日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 表格实现

發布時間：2023/12/3 编程问答 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery 表格实现 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<script type="text/javascript">$(function(){/******實現全選的操作****/$("#chks").click(function(){//獲得當前框的勾選狀態var flag= $("#chks").prop("checked");$("input[name='chk']").prop('checked',flag);})/******實現是否全部勾選的效果*****/$("input[name='chk']").click(function(){//獲得所有的單個的勾選框var inps =$("input[name='chk']");/*for(var i in inp){console.log(inp[i]);}*/var flag=true;inps.each(function(){//循環體if(!$(this).prop('checked')){//證明至少有一個框沒有被勾選flag=false;return; }})$("#chks").prop('checked',flag); })/********實現反選的效果***********/$("#fx").click(function(){var inps =$("input[name='chk']");inps.each(function(){//當前多選框的狀態var flag= $(this).prop('checked');$(this).prop("checked",!flag)}) })/*****新增一行數據********/$("#addRow").click(function(){$("#ta").append('<tr>'+'<td><input type="checkbox" name="chk" id="" value="4" /></td>'+'<td>《web開發詳解》</td>'+'<td>劉老師</td>'+'<td>30</td>'+'</tr>') })/*****移除指定的數據****/$("#delRow").click(function(){//獲得所有被選中的多選框var v =$("input[name='chk']:checked");if(v.length==0){alert("請至少勾選一行數據")}else{//parent()--獲得當前節點的父節點v.parent().parent().remove();}})/******賦值行的操作*******/$("#copyRow").click(function(){//獲得被勾選的inputvar v =$("input[name='chk']:checked");if(v.length==0){alert("請至少選擇一行進行復制");}else {//賦值一行var tr=v.parent().parent().clone();//把復制的行黏貼到指定的表格中$("#ta").append(tr) } })}) </script></head><body><h3>jQuery操作表格</h3><hr /><input type="button" id="fx" value="反選" /><input type="button" id="addRow" value="新增一行" /><input type="button" id="delRow" value="刪除行" /><input type="button" id="copyRow" value="復制行" /><table border="1px" cellpadding="10px" cellspacing="0" id="ta"><tr><td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td><td width="200px">書名</td><td width="200px">作者</td><td width="200px">數量</td></tr><tr id=""><td><input type="checkbox" name="chk" id="" value="2"/></td><td>《Java編程之道》</td><td>wollo</td><td>10</td></tr><tr><td><input type="checkbox" name="chk" id="" value="3" /></td><td>《Python和我的故事》</td><td>趙老師</td><td>10</td></tr><tr><td><input type="checkbox" name="chk" id="" value="4" /></td><td>《web開發詳解》</td><td>張老師</td><td>30</td></tr> </table>

總結

以上是生活随笔為你收集整理的jQuery 表格实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。