Jquery表格行列操作

来源：互联网发布：js字符串长度格式化编辑：程序博客网时间：2024/05/29 07:52
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body>      <table border="1">      <tr>      <td>JQuery</td>  <td>Jquery</td>  </tr>  <tr>      <td>JQuery</td>  <td>Jquery</td>  </tr>  </table>  <input type="button" name="button" id="button" value="加列" onclick="AddCol();"/>      <input type="button" name="button" id="button" value="加行" onclick="AddRow();"/>  <input type="button" name="button" id="button" value="减列" onclick="RemoveCol();"/>  <input type="button" name="button" id="button" value="减行" onclick="RemoveRow();"/>      <script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  <script>      // 删除行          function RemoveRow()  {  // remove可以直接删除行或列     $("tr:last").remove();  }          //删除列  function RemoveCol()  {     $("tr td:last-child").remove();  }          // 增加行  function AddRow()  {      //调用clone函数复制要添加的行，再使用appendTo向表的尾部加入新的行      $("tr:first").clone().appendTo("table:first");  }          //增加列  function AddCol()  {   //append()函数增加列       $("tr").append("<td>JQuery</td>");  }  </script>    </body></html>
0 0