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>
