初始化一行
点击追加效果,点击第二行删除还原为初始化状态,如果追加三行,删除第二行,序号为1,2.
HTML代码
<table id="modelTable" data-click-to-select="true" class="table table-bordered">
<thead>
<tr>
<th width="45px">連番</th>
<th>メーカー</th>
<th>型番</th>
<th width="40px">操作</th>
</tr>
</thead>
<tbody id="bbsTab2">
<tr id="add_line2">
<td class="td_center2" align="center">1</td>
<td>
<div class="form-group" style="margin-bottom: 0px;">
<input type="text" style="border:none;width:60%; margin-left: 30px" class="form-control" id="factor"
name="factor">
</div>
</td>
<td>
<div class="form-group" style="margin-bottom: 0px;">
<input type="text" style="border:none;width:60%; margin-left: 30px" class="form-control" id="model"
name="model">
</div>
</td>
<td><#button btnCss="danger" name="この行を削除" id="cancel" icon="fa-remove"
clickFun="InputInfoDlg.deleteRow2(this)"/>
</td>
</tr>
</tbody>
</table>
<div class="row btn-group-m-t">
<div class="col-sm-10">
<#button btnCss="info" name="行を追加" id="ensure" icon="fa-plus"
clickFun="InputInfoDlg.addRow2()"/>
</div>
</div>
js代码
/**
* 新增一行
*/
InputInfoDlg.addRow2 = function(){
var add_line = document.getElementById('add_line2'); //简化代码,把id名赋值给等号前面的名称中
var nodeFather = add_line.parentNode; //获取add_line中父节点并赋值到nodeFather
var node_clone = add_line.cloneNode(); //获取add_line中使用cloneNode()中方法克隆所有属性以及它们的值
content = add_line.innerHTML; //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
node_clone.removeAttribute('id'); //removeAttribute() 方法删除指定的属性
node_clone.innerHTML = content; //
nodeFather.appendChild(node_clone); //appendChild() 方法向节点添加最后一个子节点
numCheck2(); //执行下下个方法的
};
/**
* 删除当前行
*/
InputInfoDlg.deleteRow2 =function (r) {
var i=r.parentNode.parentNode.rowIndex; //定义一个变量i,值为r的父节点的父节点所在的一行。即是你这里的tr;rowIndex返回某一行在表格的行集合中的位置,parentNode是父节点。
if(i>1){
document.getElementById('modelTable').deleteRow(i);
}else{
alert("不能删除第一行");
}
numCheck2();//执行下个方法的
};
function numCheck2(){
var num = $("#bbsTab2 tr").length; //获取tr的长度
for (var i = 0; i <= num; i++) { //进行循环
$("#bbsTab2 tr .td_center2").eq(i).html(i+1);
};
}
复杂行追加删除,看我下一篇博客 :点击按钮,复杂行追加删除