JS如何添加行和删除行?

发布网友发布时间：2022-04-23 18:57

我来回答

共5个回答

热心网友时间：2022-05-13 21:20

<!DOCTYPE html>

<head>

$(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>

<div>

</div>

</body>

</html>

效果这样（样式再自己调）

要加jQuery插件进去

不懂再追问

热心网友时间：2022-05-13 22:38

首先绑定点击事件，给删除行和添加行分别加上一个id或类名，如给删除添加一个class="delete-row"给添加行加一个class="add-row" (为了书写方便，我这里使用jq)
$(function(){
$('.delete-row').click(function(){
操作逻辑（获取到需要删除的tr,）移除对应的tr,

})

$('.add-row').click(function(){
操作逻辑（获取到需要添加的tr的上一个位置或下一个位置,）添加对应的tr

})
})

热心网友时间：2022-05-14 00:13

给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的代码中注册添加删除事件

热心网友时间：2022-05-14 02:04

<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>