JS如何添加行和删除行?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>123</title>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var spotMax = 30;
if($('div.spot').size() >= spotMax) {$(obj).hide();}
$("input#add").click(function(){ addSpot(this, spotMax);
});
});
function addSpot(obj, sm) {
$('div#spots').append(
'<div>' +
'<span><input name="shengfen" type="text" /></span>'+
'<span><input name="diqu" type="text" /></span>'+
'<input type="button" class="remove spot01" value="删除行" /></div>')
.find("input.remove").click(function(){
$(this).parent().remove();
$('input#add').show();
});
if($('div.spot').size() >= sm) {$(obj).hide();}
};
</script>
</head>
<body>
<span><input name="shengfen" type="text" /></span>
<span><input name="diqu" type="text" /></span>
<input type="submit" id="add" name="Submit" value="添加行" >
<div>
<form method="post" name="asdf" id="asdf"><div id="spots"></div></form>
</div>
</body>
</html>
效果这样（样式再自己调）
要加jQuery插件进去
不懂再追问
我用的表格做这个可以吗？我要添加行这个功能是要做数组录入
是要把文本框的内容传到后端？
$(function(){
$('.delete-row').click(function(){
操作逻辑（获取到需要删除的tr,）移除对应的tr,
})
$('.add-row').click(function(){
操作逻辑（获取到需要添加的tr的上一个位置或下一个位置,）添加对应的tr
})
})
给table添加行有三种方式：
使用table自己的函数添加行
var i=1;//为了删除时能分清删除的是哪一行定义个i，改变文本框中的数字
function addTR(){
var table=document.getElementById("table");
var row=table.insertRow();
var cell=row.insertCell();
var input=document.createElement("input");
input.type="text";
input.value=i;
cell.appendChild(input);
cell=row.insertCell();
input=document.createElement("input");
input.type="text";
input.value=i;
cell.appendChild(input);
i++;
}
使用element的函数添加行
function addTR(){
var table=document.getElementById("table");
var tr=document.createElement("tr");
table.appendChild(tr);
var td=document.createElement("td");
tr.appendChild(td);
var input=document.createElement("input");
input.type="text";
input.value=i;
td.appendChild(input);
td=document.createElement("td");
tr.appendChild(td);
input=document.createElement("input");
input.type="text";
input.value=i;
td.appendChild(input);
i++;
}使用innerHTML添加行
var i=1;
function addTR(){
var table=document.getElementById("table");
var tr="<tr><td><input type='text' value='"+i+"'/></td><td><input type='text' value='"+i+"'/></td></tr>";
table.innerHTML+=tr;
i++;
}
删除行有两种方式：
使用table自己的函数删除行
function delTR(index){//index是要删除的行的索引，从0开始
var table=document.getElementById("table");
table.deleteRow(index);
}使用element的函数删除行
function delTR(index){//index是要删除的行的索引，从0开始
var table=document.getElementById("table");
table.removeChild(table.childNodes[index+1]);//childNodes含有空表头，所以index+1
}HTML的代码中注册添加删除事件
<body>
<table id="table">
<tr>
<td><input type="text" value="0"/></td>
<td><input type="text" value="0"/></td>
</tr>
</table>
<input type="button" value="删除行" onclick="delTR(0)"/>
<input type="button" value="添加行" onclick="addTR()"/>
</body>
<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td height="30"><input name="shengfen" type="text" /></td>
<td><input name="diqu" type="text" /></td>
</tr>
</table>
<input id=shanchu type="button" value="删除行" >
<input id=tianjia type="button" value="添加行" >
<script>
window.onload=function(){
tianjia.onclick=function(){
document.querySelector("table tbody").appendChild(document.querySelector("table tbody tr:first-child").cloneNode(true));
}
shanchu.onclick=function(){
document.querySelector("table tbody").removeChild(document.querySelector("table tbody tr:last-child"));
}
}
</script>
我想从第二行开始复制把first-child改成second就不行了..
这是两个table的例子，且都是按第二行复制的，如果只剩两行则不能删除
<div>
<table width="400" border="1" cellpadding="0" cellspacing="0">
<tr><th>身份证号码</th><th>所在地区</th></tr>
<tr align="center"><td height="30"><input name="shengfen" type="text" /></td><td><input name="diqu" type="text" /></td></tr>
</table>
<input type="button" value="删除行" onclick="delRow(this);"><input type="button" value="添加行" onclick="addRow(this);">
</div>
<div>
<table width="400" border="1" cellpadding="0" cellspacing="0">
<!--这里是第二个表格，内容和上面一样，由于超出字数限制了，所以这里省略了-->
</table>
<input type="button" value="删除行" onclick="delRow(this);"><input type="button" value="添加行" onclick="addRow(this);">
</div>
<script>
function addRow(e){
var rows=e.parentNode.getElementsByTagName("tr");
if(rows.length>1)rows[0].parentNode.appendChild(rows[1].cloneNode(true));
}
function delRow(e){
var rows=e.parentNode.getElementsByTagName("tr");
if(rows.length>2)rows[0].parentNode.removeChild(rows[rows.length-1]);
}
</script>
