Jquery操作table

最新推荐文章于 2021-01-08 12:31:37 发布
最新推荐文章于 2021-01-08 12:31:37 发布
阅读量686 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlbenXie/article/details/73826657
版权

Jquery操作table

复制代码 
  1  $(function () {
  2             SetControlDisabled(0, "", true); //控制grid的第一行的所有控件不可用             
  3             SetControlDisabled("", 1, true); //控制grid的第二列的所有控件不可用       
  4             SetControlDisabled("", "标题3", true); //控制grid的标题是‘标题3’的那一列的所有控件不可用
  5             SetControlDisabled(2, "标题5", true); //控制grid的第三行并且标题是‘标题5’的那一列的所有控件不可用
  6             //SetControlDisabled(true);控制grid里面的所有控件不可用     
  7 
  8             var controls = findControl(1);//查找第二行的所有控件
  9             for (var control in controls) {
 10                 alert(controls[control].attr("id"));
 11             }
 12 
 13             var targetControls = findControl(0, 1); //查找第一行，第2列的所有控件
 14             for (var control in targetControls) {
 15                 alert(targetControls[control].attr("id"));
 16             }
 17 
 18             String.prototype.trim = function () {
 19                 return this.replace(/^(\s|\u3000)+|(\s|\u3000)+$/g, "");
 20             }
 21 
 22             //根据表头标题找到表头所在的列索引
 23             function GetTdIndexByTdText(strTdText) {
 24                 var targetTdIndex = 0;
 25                 $("#grid thead tr").find("th").each(function (index, item) {
 26                     if ($(item).text().trim() == strTdText) {
 27                         targetTdIndex = index;
 28                         return false;
 29                     }
 30                 });
 31                 return targetTdIndex;
 32             }
 33             //查找grid里面的控件
 34             function findControl() {
 35                 var controls = [];
 36                 var controlId = null;
 37                 if (arguments.length == 1) {
 38                     var targetTr = $("#grid tbody tr").eq(arguments[0]);
 39                     targetTr.find("td").each(function (index, item) {
 40                         $(item).find("input").each(function (i_index, i_item) {
 41                             controlId = $(i_item).attr("id")
 42                             if (controlId === "") {
 43                                 controlId = newGuid();
 44                                 $(i_item).attr("id", controlId);
 45                             }
 46                             controls[controlId] = $(i_item);
 47                         });
 48                         $(item).find("select").each(function (i_index, i_item) {
 49                             controlId = $(i_item).attr("id")
 50                             if (controlId === "") {
 51                                 controlId = newGuid();
 52                                 $(i_item).attr("id", controlId);
 53                             }
 54                             controls[controlId] = $(i_item);
 55                         });
 56                         $(item).find("textarea").each(function (i_index, i_item) {
 57                             controlId = $(i_item).attr("id")
 58                             if (controlId === "") {
 59                                 controlId = newGuid();
 60                                 $(i_item).attr("id", controlId);
 61                             }
 62                             controls[controlId] = $(i_item);
 63                         });
 64                     });
 65                 } else if (arguments.length == 2) {
 66                     var targetTr = $("#grid tbody tr").eq(arguments[0]);
 67                     var targetTd = targetTr.find("td").eq(arguments[1]);
 68                     targetTd.find("input").each(function (index, item) {
 69                         controlId = $(item).attr("id")
 70                         if (controlId === "") {
 71                             controlId = newGuid();
 72                             $(item).attr("id", controlId);
 73                         }
 74                         controls[controlId] = $(item);
 75 
 76                     });
 77                     targetTd.find("select").each(function (index, item) {
 78                         controlId = $(item).attr("id")
 79                         if (controlId === "") {
 80                             controlId = newGuid();
 81                             $(item).attr("id", controlId);
 82                         }
 83                         controls[controlId] = $(item);
 84 
 85                     });
 86                     targetTd.find("textarea").each(function (index, item) {
 87                         controlId = $(item).attr("id")
 88                         if (controlId === "") {
 89                             controlId = newGuid();
 90                             $(item).attr("id", controlId);
 91                         }
 92                         controls[controlId] = $(item);
 93 
 94                     });
 95                 }
 96                 return controls;
 97             }
 98 
 99             //控制grid里面的控件是否可用
100             function SetControlDisabled(rowIndex, colIndex, bolFlag) {
101                 //SetGridControlEnabeld(rowIndex,"",bolFlag)             
102                 if (rowIndex >= 0 && colIndex == "") {
103                     var targetTr = $("#grid tbody tr").eq(rowIndex);
104                     targetTr.find("td").each(function (index, item) {
105                         SetDisabled(item, bolFlag);
106                     });
107                 }
108                 //SetGridControlEnabeld("",colIndex,bolFlag)               
109                 else if (rowIndex == "") {
110                     $("#grid tbody tr").each(function (index, item) {
111                         var td = null;
112                         if (typeof (colIndex) == "string") {
113                             td = $(item).find("td").eq(GetTdIndexByTdText(colIndex))
114                         } else {
115                             td = $(item).find("td").eq(colIndex)
116                         }
117 
118                         SetDisabled(td, bolFlag);
119                     });
120                 } else if (rowIndex >= 0 && typeof (rowIndex) == "number") {
121                     var targetTr = $("#grid tbody tr").eq(rowIndex);
122                     var targetTd = null;
123                     if (typeof (colIndex) == "string") {
124                         targetTd = targetTr.find("td").eq(GetTdIndexByTdText(colIndex))
125                     } else {
126                         targetTd = targetTr.find("td").eq(colIndex)
127                     }
128                     SetDisabled(targetTd, bolFlag);
129 
130                 } else if (arguments.length == 1) {
131                     var bolFlag = arguments[0];
132                     $("#grid tbody tr").each(function (trIndex, trItem) {
133                         $(trItem).find("td").each(function (tdIndex, tdItem) {
134                             SetDisabled(tdItem, bolFlag);
135                         });
136                     });
137                 }
138             }
139 
140             //生成 GUID 
141             function newGuid() {
142                 var guid = "";
143                 for (var i = 1; i <= 32; i++) {
144                     var n = Math.floor(Math.random() * 16.0).toString(16);
145                     guid += n;
146                     if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
147                         guid += "-";
148                 }
149                 return guid;
150             }
151 
152             //设置某个容器里面的控件是否可用
153             function SetDisabled(container, bolFlag) {
154                 $(container).find("input").each(function (index, item) {
155                     $(item).attr('disabled', bolFlag);
156                 });
157                 $(container).find("select").each(function (index, item) {
158                     $(item).attr('disabled', bolFlag);
159                 });
160                 $(container).find("textarea").each(function (index, item) {
161                     $(item).attr('disabled', bolFlag);
162                 });
163             }
164         });
复制代码

HTML测试代码：

复制代码 
 1  <div id="grid">
 2         <table border="1px">
 3             <thead>
 4                 <tr>
 5                     <th title="标题1">
 6                         标题1
 7                     </th>
 8                     <th title="标题2">
 9                         标题2
10                     </th>
11                     <th title="标题3">
12                         标题3
13                     </th>
14                     <th title="标题4">
15                         标题4
16                     </th>
17                     <th title="标题5">
18                         标题5
19                     </th>
20                      <th title="标题6">
21                         标题6
22                     </th>
23                 </tr>
24             </thead>
25             <tbody>
26                 <tr>
27                     <td>
28                         <input id="Text1" type="text" />
29                     </td>
30                     <td>
31                         <select id="Select1">
32                             <option>111111111111</option>
33                         </select>
34                     </td>
35                     <td>
36                         <input id="Checkbox1" type="checkbox" />
37                     </td>
38                     <td>
39                         <input id="Radio1" type="radio" />
40                     </td>
41                     <td>
42                         <textarea cols="20" rows="2"></textarea>
43                     </td>
44                     <td>
45                         <input type="button" value="button" />
46                     </td>
47                 </tr>
48                 <tr>
49                     <td>
50                         <input id="Text2" type="text" />
51                     </td>
52                     <td>
53                         <select id="Select2">
54                             <option>111111111111</option>
55                         </select>
56                     </td>
57                     <td>
58                         <input id="Checkbox2" type="checkbox" />
59                     </td>
60                     <td>
61                         <input id="Radio2" type="radio" />
62                     </td>
63                     <td>
64                         <textarea cols="20" rows="2"></textarea>
65                     </td>
66                     <td>
67                         <input type="button" value="button" />
68                     </td>
69                 </tr>
70                 <tr>
71                     <td>
72                         <input id="Text3" type="text" />
73                     </td>
74                     <td>
75                         <select id="Select3">
76                             <option>111111111111</option>
77                         </select>
78                     </td>
79                     <td>
80                         <input id="Checkbox3" type="checkbox" />
81                     </td>
82                     <td>
83                         <input id="Radio3" type="radio" />
84                     </td>
85                     <td>
86                         <textarea id="TextArea3" cols="20" rows="2"></textarea>
87                     </td>
88                     <td>
89                         <input id="Button3" type="button" value="button" />
90                     </td>
91                 </tr>
92             </tbody>
93         </table>
94     </div>
复制代码
AlbenXie
关注
专栏目录
JQuery+js操作table
04-01
操作table，绑定某行数据到另外页面，例如修改操作，回显数据
jQuery操作Table技巧大汇总
01-19
本文汇总了jQuery操作Table的技巧。分享给大家供大家参考，具体如下： 1.鼠标移动行变色 方法一：jQuery中的hover(fun(),fun())方法，参数一：第一个方法是添加样式功能，参数二：第二个方法是取消样式功能 $(#...
Jquery操作表格
shashou628的专栏
12-25 412
以下列出13个jQuery操作table常用到的功能： 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){     $(this).children('td').addClass('hover') }, function(){     $(this).children('td').removeClass('hover') })
jQuery操作表格（table）的常用方法、技巧汇总
技术资料收集站
06-02 1005
虽然现在DIV+CSS进行页的布局大行其道，但是很多地方使用table还是有很多优势，用table展示数据是比较方便的，下面汇总了jQuery操作Table tr td常用的方法，熟记这些操作技巧，下次再使用的到时候，会让你如鱼得水，提高开发效率 以下列出13个jQuery操作table常用到的功能： 1.鼠标移动行变色 复制代码代码如下: $('#ta
jquery 操作table
zheng199172的博客
05-28 319
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
jquery操作table
09-04
在jquery里操作table表格的各种方法，希望希望对大家有帮助
使用jQuery 操作table 完成单元格合并的实例
11-27
总结来说，通过jQuery操作表格的单元格合并，主要是利用选择器选取特定的单元格，通过条件判断和循环来比较内容，然后通过改变`rowspan`属性和隐藏不需要的单元格来实现视觉上的合并。这个过程涉及到HTML表格的基本...
【Jquery】Jquery操作table表格详细说明
liuzhenhe1988的专栏
01-08 1796
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $("#tableid tr td:nth-child(2)").remove();//第二列 行操作 1、隐藏行 $("#tableid tbody tr:eq(3)").hide(); //隐藏第四行，行索引从0开始 //隐藏第二行的方式 $("#tableid tr:gt(0):eq(1)").hide();//
一个JQuery操作Table的好方法
weixin_30852367的博客
03-29 64
一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr> <tr><td>测试</td>&...
jquery操作table表格
山鹰的专栏
05-25 480
一、数据准备 &lt;table id="table1"&gt; &lt;tr&gt;&lt;th&gt;文章标题&lt;/th&gt;&lt;th&gt;文章分类&lt;/th&gt;&lt;th&gt;发布时间&lt;/th&gt;&lt;th&gt;操作&lt;/th&gt;&lt;/tr&gt;
Jquery Table 的基本操作
王武的博客
11-27 537
Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。
jQuery操作table
永立的专栏
01-28 291
jQuery操作table，动态增加行，删除行，获取行内数据。 html> head> meta charset="utf-8"> title>jQuery动态增加tabletitle> script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> script> script> funct
JQuery 操作Tbale
Lxy_Terry的博客
08-12 593
1.鼠标移动行变色 方法一： jQuery中的hover(fun(),fun())方法，参数一：第一个方法是添加样式功能，参数二：第二个方法是取消样式功能 $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children("t
jQuery操作Table技巧详解
"jQuery操作Table技巧大汇总" 在网页开发中，jQuery库为开发者提供了方便快捷的方式来操作HTML元素，特别是对于表格（Table）的操作。本文将深入探讨几个使用jQuery操作Table的实用技巧。 1. 鼠标移动行变色 当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值