首页 > 代码库 > 【Asp.net入门3-03】jQuery-选择元素

【Asp.net入门3-03】jQuery-选择元素

技术分享

 技术分享

技术分享

 

技术分享

技术分享

技术分享

技术分享

技术分享

技术分享

技术分享

 练习:使用jQuery实现一个可以给table增加、删除行的页面

HTML代码:

<body>   <input type="button" value="ADD" id="btn1"/>   <input type="button" value="DEL" id="btn2"/>   <div id="div1">      <table border="1" width="200px" id="t1">          <tr class="CaseRow">              <td>test1</td>              <td><input type="checkbox" /></td>          </tr>          <tr class="CaseRow">              <td>test2</td>              <td><input type="checkbox" /></td>          </tr>      </table>   </div>   </body>  

JS代码

<script type="text/javascript">      $(document).ready(function(){          $("#btn1").click(function(){              var tr = "<tr class=‘CaseRow‘><td>new</td><td><input type=‘checkbox‘ /></td></tr>";              $("table").append(tr);//向table中追加tr          });          $("#btn2").click(function(){              var num=$("#t1 tr").filter(".CaseRow").size();//获得表格行数              alert(num);              if(num==1){                  alert("留一行,好不好");                  return;              }              var t=$("input:checked").parent().parent("tr").remove();//移除选中的行          });      });  </script>  

 

【Asp.net入门3-03】jQuery-选择元素