|
通過jQuery來，動(dòng)態(tài)創(chuàng)建表格，增加，以及 刪除某一行，以及全選，取消全選，刪除選中行等操作，加強(qiáng)jquery 操作dom 對(duì)象的能力
頁面代碼
- <body>
- <h2 align="center">jquery 實(shí)現(xiàn)動(dòng)態(tài)表格的創(chuàng)建及列表全選等操作</h2>
- <div align="center">
- 編號(hào)：<input id="tId" type="text" />
- 名稱：<input id="name" type="text" />
- 價(jià)格：<input id="price" type="text" />
- <input id="add" type="button" value="添加" />
- <br />
- <br />
- </div>
- <table id="tab" width="80%" align="center" cellspacing="0" border="1" bordercolor="#a0c6e5">
- <tbody id="tbody">
- <tr align="center">
- <td><input type="checkbox" /></td>
- <td>編號(hào)</td>
- <td>名稱</td>
- <td>價(jià)格</td>
- <td>操作</td>
- </tr>
- <tr align="center">
- <td><input type="checkbox" /></td>
- <td>001</td>
- <td>java</td>
- <td>36.5</td>
- <td><input type="button" value="delete"></td>
- </tr>
- </tbody>
- </table>
- <br>
- <br>
-
- <div align="center">
- <input id="selectAll" type="button" value="全選" />
- <input id="cancelSelect" type="button" value="取消選中" />
- <input id="deleteSelect" type="button" value="刪除選中" />
- <br />
- <br />
- </div>
- </body>
js 代碼
- <script type="text/javascript" src="./js/jquery-1.6.4.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#add").click(function(){ //為 按鈕添加事件
- //獲取值
- var tId = $("#tId").val();
- var name = $("#name").val();
- var price = $("#price").val();
-
- // 創(chuàng)建 td 對(duì)象 并將相應(yīng)的值插入
- var cbTd = $("<td><input type='checkbox' /></td>");
- var idTd = $("<td></td>").text(tId);
- var nameTd = $("<td></td>").text(name);
- var priceTd = $("<td></td>").append(price);
- var acTd = $("<td><input type='button' value='delete' /></td>");
-
- //創(chuàng)建 tr 對(duì)象將td 對(duì)象放入 tr, 再將tr 加入 tbody
- var tr = $("<tr></tr>").append(cbTd).append(idTd).append(nameTd).append(priceTd).append(acTd).attr("align","center");
- $("#tbody").append(tr);
- });
-
- //對(duì) 每個(gè)刪除按鈕綁定 刪除事件
- // 這種 將一組 對(duì)象 后加 click 事件，只能將原有的 對(duì)象綁定上 事件， 新添加的綁定不了 需要 使用 live/on 方法
- /*
- $("input[value='delete']").click(function(){
- $(this).parent().parent().remove();
- });
- */
- // js 1.9 已經(jīng)將 live 換位 on
- $("input[value='delete']").live("click",function(){
- $(this).parent().parent().remove();
- });
-
- //全選
- $("#selectAll").click(function(){
- $("input[type='checkbox']").attr("checked",true);
- });
-
- //取消全選
- $("#cancelSelect").click(function(){
- $("input[type='checkbox']:checked").attr("checked",false);
- });
-
- //刪除選中
- /* 1.
- $("#deleteSelect").click(function(){
- $("input[type='checkbox']:checked").parent().parent().remove();
- });
- */
- //2. 遍歷
- $("#deleteSelect").click(function(){
- var chks = $("input[type='checkbox']:checked");
- $.each(chks,function(i,ck){
- $(ck).parent().parent().remove();
- })
- });
- });
- </script>
效果圖：
|
