87,910
社区成员
发帖
与我相关
我的任务
分享关于jquery动态添加、删除表格一行
如图所示，任意删除一行的时候，最前边的一列序号，也要改变(例如，删除序号为2的，后边的3、4要变成2、3)。现在的效果是图2 ，序号不变。而且删除后再添加竟然还是4，如图3。求帮忙啊
...全文
请发表友善的回复…
发表回复
Hello World, 2016-11-25
- 打赏
- 举报
行号的事很简单，在删除和添加行之后把现有的行遍历一次，逐个赋值就完事。
至于ID加个rowcount，除非你这个rowcount只增不减，否则会重复。
可以各个行的同列的元素都用同一个ID，用$(row).find('#ID')来查找元素，省去改来改去的麻烦
csdn12300 2016-11-25
- 打赏
- 举报
忘记说了，我还要保存当时添加行里的信息。每个添加行里td的input的id我也给加上rowcount了。我还要根据input里的具体哪个id来取值，这要怎么改？
一支糖包仔 2016-11-25
- 打赏
- 举报
删除的时候获得标识，然后循环给大于标识的数字全部减1.添加的时候获取一下最后面那个标识，重新赋值给你添加时的那个变量。
csdn12300 2016-11-25
- 打赏
- 举报
下边是添加、删除的具体方法代码
大神来帮忙看下
var rowCount = 2;
function add_line() {
// rowCount++;
var routeType = $("#routeTypeVal").val();
$('#passengerTable').append(
'<tr id="option'+rowCount+'">'+
'<td id="rowIndex'+rowCount+'">'+rowCount+'</td>'+
'<td ><input type="text" style="width:80px;" id="passengerName'+rowCount+'" name="passengerName"/></td>'+
'<td >'+
'<div class="sel">'+
'<select id="passengerType'+rowCount+'" class="subsel" style="width:80px;" name="passengerType">'+
'<option value="">请选择</option>'+
'<option value="ADU">成人</option>'+
'<option value="CHD">儿童</option>'+
'<option value="INF">婴儿</option>'+
'</select>'+
'</div>'+
'</td>'+
'<td >'+
'<div class="sel">'+
'<select id="cardType'+rowCount+'" class="subsel" style="width:80px;" name="cardType">'+
'<option value="">请选择</option>'+
'<option value="NI">身份证</option>'+
'<option value="PP">护照</option>'+
'</select>'+
'</div>'+
'</td>'+
'<td ><input type="text" style="width:100px;" id="cardNum'+rowCount+'" name="cardNum"/></td>'+
'<td >'+
'<div class="sel">'+
'<select id="sex'+rowCount+'" class="subsel" style="width:40px;" name="sex">'+
'<option value="1">男</option>'+
'<option value="0">女</option>'+
'</select>'+
'</div>'+
'</td>'+
'<td ><input type="text" style="width:100px;" id="birthday'+rowCount+'" name="birthday"/></td>'+
'<td id="goEticketNumtd'+rowCount+'" style="display: none;"><input id="goEticketNum'+rowCount+'" type="text" style="width:100px;" name="goEticketNum"/></td>'+
'<td id="backEticketNumtd'+rowCount+'" style="display: none;"><input id="backEticketNum'+rowCount+'" type="text" style="width:100px;" name="backEticketNum"/></td>'+
'<td onclick="delCol('+rowCount+')" style="width:25px;" id="delRow'+rowCount+'">删除</td>'+
'<tr>')
rowCount++;
}
function delCol(rowIndex){
if(rowIndex==1||rowIndex=="1"){
alert("至少保留一行信息");
return;
}
$("#option"+rowIndex).remove();
rowCount--;
$("#passengerNum").text(rowCount);
}
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下：
昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到我们平台的一个方法。
代码如下://记录添加行数
var areaCount=1;
//记录实际表格行数
var rowCount=1;
//删除模板html
var delRowTemplete = “删除
