Jquery中关于table元素的操作
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Jquery中关于table元素的操作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4618字，纯文字阅读大概需要7分钟。
内容图文
1.Jquery创建表格
/**
* 创建表格
* @param label 标题 json格式，数据结构见附录1
* @param data 数据 json格式，数据结构见附录1
* @param parentElement html元素，表格插入至此元素中
*/
function createTable(label, data, parentElement) {
//创建表格
var table = $("<table> </table>");
//也可以为元素对象设定id,class等属性.
/*var table = $("<table>",{
"id" : "tableId",
"class" : "table_class"
});*/
//设定样式
table.css({
width: "98%",
"border-collapse": "collapse",
border: "0px solid #d0d0d0",
margin: "3px",
"font-size": "14px"
});
//标题行
var tr = $("<tr></tr>");
tr.css({
border: "1px solid #d0d0d0",
height: "30px",
color: "#FFF",
background: "#37b5ad"
});
$.each(label, function (index, value) {
var th = $("<th>" + value + "</th>");
th.appendTo(tr);
});
tr.appendTo(table);
$.each(data, function (index, row) {
//数据行
var tr = $("<tr></tr>");
//数据列
$.each(row, function (key, value) {
//console.info(key + ":" + value);
var td = $("<td>" + value + "</td>");
td.css({
border: "1px solid #d0d0d0",
height: "24px"
});
td.appendTo(tr);
});
tr.appendTo(table);
});
table.appendTo(parentElement);
}
createTable附录 1：label和data的数据结构
//label.json
['事项编码','事项名称']
//data.json
[{"code":"44530200","name":"办理《计划生育情况证明》"},
{"code":"44530200","name":"申请《再生育一胎子女审批》"},
{"code":"44530200","name":"办理《符合政策生育一孩登记》"},
{"code":"44530200","name":"办理《流动人口婚育证明》"}]2.Jquery填充表格数据
请注意，填充表格数据前提是：已经创建好了html表格行列元素。
/**
*填充表格数据前提是：已经创建好了html表格行列元素。
*
*如：第4行第5列不存在时，会出错。
*表格的html页面示例代码，见附录2.
*/
function fillTableData() {
//table
var table = $("#tableId");
// 也可以通过嵌套了table的元素id获取table对象
// 例如：<div id="contain_table_elementId"><table></table></div>
//var table = $("#contain_table_elementId").find("table");
// row cell 从1开始计数，第1行是表头，这里从第2行开始填充
$("tr:nth-child(2) td:nth-child(2)", table).html('第2行第2列');
$("tr:nth-child(2) td:nth-child(3)", table).html('第2行第3列');
$("tr:nth-child(2) td:nth-child(4)", table).html('第2行第4列');
$("tr:nth-child(2) td:nth-child(5)", table).html('第2行第5列');
//第3行
$("tr:nth-child(3) td:nth-child(2)", table).html('第3行第2列');
$("tr:nth-child(3) td:nth-child(3)", table).html('第3行第3列');
$("tr:nth-child(3) td:nth-child(4)", table).html('第3行第4列');
$("tr:nth-child(3) td:nth-child(5)", table).html('第3行第5列');
//第4行第5列不存在，你猜会发生什么?
//$("tr:nth-child(4) td:nth-child(5)", table).html('第4行第5列');
}附录2 table.html
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" height="36" class="tr1">
<td class="td1">第1列</td>
<td class="td1">第2列</td>
<td class="td1">第3列</td>
<td class="td1">第4列</td>
<td class="td1">第5列</td>
</tr>
<tr align="center" height="36">
<td>第2行</td>
<!-- td-第2行已创建，你可以为其填充数据 -->
<td></td>
<td></td>
<td ></td>
<td class="td2" ></td>
</tr>
<tr align="center" height="36">
<td>第3行</td>
<td ></td>
<td ></td>
<td ></td>
<td class="td2"></td>
</tr>
</table>
table.html3.Jquery添加(删除)表格行列
多用于动态表格，即表格的数据行列非固定，ajax填充数据。
注意：因为这里是重置表格，所以删除了除第一行(表头行)的所有行，然后再添加数据行。
//如果不删除原表格table的行row和列cell，那么只会追加新数据行，而不是覆盖。
function rest_table_data() {
var table = $("#tableId");
//删除原有表格行
table.find("tr").each(function(i){
if(i != 0){
//表头不删
this.remove();
}
});
//添加行列数据,table_data.json 见附录3
$.get('table_data.json', function (data) {
// row cell 从1开始，因为明确知道数据是12行，所以i<12
for (var i = 0; i < 12; i++) {
//数据行
var tr = $("<tr>", {
align: "center",
height: "36"
});
//数据列
$.each(data, function (key, value) {
var td = $("<td>" + value[i] + "</td>");
td.appendTo(tr);
if (key == "column_4") {
//这一列的数据，要指定样式
td.attr("class","td2");
}
});
tr.appendTo(table);
}
});
}附录3 table_data.json
//按列
{"column_1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"column_2":[1858,2120,3466,3513,3829,3035,2934,2761,2576,1635,0,0],
"column_3":[0,0,1,46,86,69,102,82,118,61,0,0],
"column_4":[0,0,0,39,44,59,101,81,101,57,0,0],
"column_5":["0.0%","0.0%","0.0%","85.0%","51.0%","86.0%","99.0%","99.0%","86.0%","93.0%","0.0%","0.0%"]}重点：Jquery隐藏表格行时，要使用<tbody></tbody>标签包裹需要隐藏的<tr></tr>，不然会破坏样式。
Html示例：
<!-- 注意用tbody,不然会破坏表格样式 -->
<tbody id="${rowId}" style="display: none" class="tableRow">
<tr>
<td valign="top" class="title">内容：</td>
<td height="100" valign="top" colspan="4">
<textarea name="option" class="textarea" readonly="readonly">我这行需要隐藏</textarea>
</td>
</tr>
</tbody>以上就是Jquery中关于table元素的操作的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的Jquery中关于table元素的操作全部内容，希望文章能够帮你解决Jquery中关于table元素的操作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】