js简单的表格添加行和删除行操作示例

复制代码 代码如下:

  <html>

  <head>

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

  <script>

  //创建一个html元素

  function $c(tagname){

  return document.createElement(tagname);

  }

  //文档加载完成后要执行的内容

  $(document).ready(function(){

  //绑定添加行按钮的单击事件

  $("#addrow").bind("click",function(){

  // 取得table

  var tab = $("#tab");

  // 创建tr元素

  var tr = $c("tr");

  // 为table追加tr元素

  tab.append(tr);

  // 创建td元素

  var td1=$c("td");

  // td元素的内容

  td1.innerHTML="insert1";

  // 为新追加的tr追加td元素

  tr.appendChild(td1);

  var td2=$c("td");

  td2.innerHTML="insert2";

  tr.appendChild(td2);

  });

  // 绑定删除行按钮的单击事件

  $("#deleterow").bind("click",function(){

  // 取得table的第一行

  var tab = $("#tab tr:eq(0)");

  // 删除此行

  tab.remove();

  });

  });

  </script>

  </head>

  <body>

  <table border='1' id="tab">

  <tr>

  <td>123</td>

  <td>456</td>

  </tr>

  </table>

  </br>

  <button id="addrow">添加行</button>

  <button id="deleterow">删除行</button>

  </body>

  </html>