JQuery动态给table添加、删除行 改进版

复制代码 代码如下:

  <html>

  <head>

  <title>

  </title>

  <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script>

  <script type="text/javascript" language="javascript">

  var row_count = 0;

  function addNew()

  {

  var table1 = $('#table1');

  var firstTr = table1.find('tbody>tr:first');

  var row = $("<tr></tr>");

  var td = $("<td></td>");

  td.append($("<input type='checkbox' name='count' value='New'><b>CheckBox"+row_count+"</b>")

  );

  row.append(td);

  table1.append(row);

  row_count++;

  }

  function del()

  {

  var checked = $("input[type='checkbox'][name='count']");

  $(checked).each(function(){

  if($(this).attr("checked")==true) //注意:此处判断不能用$(this).attr("checked")==‘true'来判断。

  {

  $(this).parent().parent().remove();

  }

  });

  }

  </script>

  </head>

  <body>

  <input type="button" value="Add" onclick="addNew();">

  <input type="button" value="Delete" onclick="del();">

  <div id="rightcontent">

  <table id="table1" cellspacing="3" cellpadding="3" border="1">

  <tbody>

  <tr>

  <th>

  Add new row,then test the delete function.

  </th>

  </tr>

  </tbody>

  </table>

  </div>

  </body>

  </html>