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

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 表格实现

發(fā)布時(shí)間：2023/12/3 编程问答 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery 表格实现 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<script type="text/javascript">$(function(){/******實(shí)現(xiàn)全選的操作****/$("#chks").click(function(){//獲得當(dāng)前框的勾選狀態(tài)var flag= $("#chks").prop("checked");$("input[name='chk']").prop('checked',flag);})/******實(shí)現(xiàn)是否全部勾選的效果*****/$("input[name='chk']").click(function(){//獲得所有的單個(gè)的勾選框var inps =$("input[name='chk']");/*for(var i in inp){console.log(inp[i]);}*/var flag=true;inps.each(function(){//循環(huán)體if(!$(this).prop('checked')){//證明至少有一個(gè)框沒有被勾選flag=false;return; }})$("#chks").prop('checked',flag); })/********實(shí)現(xiàn)反選的效果***********/$("#fx").click(function(){var inps =$("input[name='chk']");inps.each(function(){//當(dāng)前多選框的狀態(tài)var flag= $(this).prop('checked');$(this).prop("checked",!flag)}) })/*****新增一行數(shù)據(jù)********/$("#addRow").click(function(){$("#ta").append('<tr>'+'<td><input type="checkbox" name="chk" id="" value="4" /></td>'+'<td>《web開發(fā)詳解》</td>'+'<td>劉老師</td>'+'<td>30</td>'+'</tr>') })/*****移除指定的數(shù)據(jù)****/$("#delRow").click(function(){//獲得所有被選中的多選框var v =$("input[name='chk']:checked");if(v.length==0){alert("請(qǐng)至少勾選一行數(shù)據(jù)")}else{//parent()--獲得當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)v.parent().parent().remove();}})/******賦值行的操作*******/$("#copyRow").click(function(){//獲得被勾選的inputvar v =$("input[name='chk']:checked");if(v.length==0){alert("請(qǐng)至少選擇一行進(jìn)行復(fù)制");}else {//賦值一行var tr=v.parent().parent().clone();//把復(fù)制的行黏貼到指定的表格中$("#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="復(fù)制行" /><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">數(shù)量</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開發(fā)詳解》</td><td>張老師</td><td>30</td></tr> </table>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。