jQuery 表格实现
生活随笔
收集整理的這篇文章主要介紹了
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 表格实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 御坂美琴声优是谁 御坂美琴是什么人物
- 下一篇： 保险柜怎么打开 保险柜打开步骤如下