JQuery 获取表格对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 获取表格对象相关的知识，希望对你有一定的参考价值。
我的应用程序中，动态生成一个Table,同时动态生成一组checkbox,当选中第一个 checkbox时，表格的第一列隐藏，不选中又出现，以此类推。现在完成的代码如下：
$("[type='checkbox']").each(function(i)
$(this).click(function()
if($(this).attr("checked")==true)
$("td:eq(0)",$("tr")).hide();
else
$("td:eq(0)",$("tr")).show();
);
);
问题就在于数字“0”上，我希望能够获取和checkbox相同序号的td,而不是固定的第一列。
初学Jquery,不是很明白，望大侠指教，谢谢。
当选中第一个 checkbox时，表格的第一列隐藏，不选中又出现,当选中第二个 checkbox时，表格的第二列隐藏，不选中第二列显示，当选中第三个checkbox时，第三列隐藏......以此类推。谢谢。
<script>
$(document).ready(function
()
$("input:checkbox").each(function
()
$(this).click(function
()
if
(
$(this).attr('checked')
)
$('tr').eq(parseInt($(this).val())).hide();
else
$('tr').eq(parseInt($(this).val())).show();
);
);
);
</script>
<input
type="checkbox"
value="0"/>
<input
type="checkbox"
value="1"/>
<input
type="checkbox"
value="2"/>
<table
width="200"
border="1">
<tr>
<td>1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
</table> 参考技术B <head>
<title>JavaScript 测试</title>
<style>
</style>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("[type='checkbox']").click(function()
var i = $(this).attr('value');
$("td:eq(" + i +")", $("#table1 tr")).toggle();
);
);
</script>
</head>
<html>
<body>
显示/隐藏<br>
<input type="checkbox" name="showhide" value="0" checked>第一列
<input type="checkbox" name="showhide" value="1" checked>第二列
<input type="checkbox" name="showhide" value="2" checked>第三列
<table id="table1">
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</table>
</body>
</html>本回答被提问者采纳 参考技术C 不太看得懂你的问题..
把零改成你需要的ID就可以了
如果没法定位,动态列表的时候把 tr的id定义下
例如
<tr id="tr_0"
<tr id="tr_1" 参考技术D 我实在不知道你是什么意思，大概写了下
<script>
$(document).ready(function ()
$("input:checkbox").each(function ()
$(this).click(function ()
if ( $(this).attr('checked') )
$('tr').eq(parseInt($(this).val())).hide();
else
$('tr').eq(parseInt($(this).val())).show();
);
);
);
</script>
<input type="checkbox" value="0"/>
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<table width="200" border="1">
<tr>
<td>1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
</table>
JSON对象处理成表格（使用jQuery）
菜鸟之前介绍了用javaScript制作表格，在使用过程中，一般会请求后台页返回一个json字符串，然后在前台转成json对象再处理，但我并不想每次要个表格每次都写那段代码。今天就写一个通用的函数，传入两个参数，参数一是字符串数组类型，用以填充表格的表头，参数二传入json对象，最后返回一个table表格。
$(function () {
$.ajax(
{
method: "post",
url: "/index.ashx",
success: function (data)
{
if (data == "" && data.length==0)
{
return;
}
var json = eval("(" + data + ")")
var thArr = ["姓名", "年龄", "班级"];
var tbl = changeJsonToTbl(thArr,json);
$("body").append(tbl);
}
}
);
});
function changeJsonToTbl(thArr,json)
{
var tbl = $("<table></table>");
tbl.attr("id", "jsonTbl");
var thRow = $("<tr></tr>");
tbl.append(thRow);
for (var k = 0; k < thArr.length;k++)
{
var th = $("<td></td>")
th.attr("class", "th")
th.html(thArr[k])
thRow.append(th);
}
for (var i = 0; i < json.length; i++)
{
var tr = $("<tr></tr>");
tbl.append(tr);
for(var j in json[i])
{
var td = $("<td></td>");
td.html(json[i][j]);
tr.append(td);
}
}
return tbl;
}
---------------------------后台页：index.ashx-----------------------------------
-----------------------结果------------------------------------------
以上是关于JQuery 获取表格对象的主要内容，如果未能解决你的问题，请参考以下文章
在 jQuery 中将 HTML 表格数据转换为 JSON 对象