js点击表格内容获取
展开全部
以下为html+js实现表格添加一行的，附加代码注释，如果需要jquery的，
再联系，Q：672986035
<html>
<head>
<title>检测</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function AddRow(mytr) {
var tabAdd = document.getElementById("tabAdd");
// 去掉注释的代码，则每次点击效果为先清除之前添加的行
// var lengthRow = tabAdd.rows.length;
// if (lengthRow > 1) {
// for (var j = 1; j < lengthRow; j++) {
// tabAdd.deleteRow(j);
// }
// }
// 为表格 tabAdd 添加一行
var tabRow = tabAdd.insertRow();
// 根据点击的行的列数，循环为tabRow添加每一列
var length = mytr.cells.length;
for (var i = 0; i < length; i++) {
var tabCell = tabRow.insertCell();
tabCell.innerHTML = mytr.cells[i].innerHTML;
}
}
</script>
</head>
<body>
<table id="tabOld" border="1" style="width:300px; text-align:center;">
<tr>
<th>序号</th>
<th>组织名</th>
</tr>
<tr onclick="AddRow(this)">
<td>1</td>
<td>组织一</td>
</tr>
<tr onclick="AddRow(this)">
<td>2</td>
<td>组织二</td>
</tr>
</table>
<br /><br />
<table id="tabAdd" border="1" style="width:300px; text-align:center;">
<tr>
<th>序号</th>
<th>组织名</th>
</tr>
</table>
</body>
</html>
再联系，Q：672986035
<html>
<head>
<title>检测</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function AddRow(mytr) {
var tabAdd = document.getElementById("tabAdd");
// 去掉注释的代码，则每次点击效果为先清除之前添加的行
// var lengthRow = tabAdd.rows.length;
// if (lengthRow > 1) {
// for (var j = 1; j < lengthRow; j++) {
// tabAdd.deleteRow(j);
// }
// }
// 为表格 tabAdd 添加一行
var tabRow = tabAdd.insertRow();
// 根据点击的行的列数，循环为tabRow添加每一列
var length = mytr.cells.length;
for (var i = 0; i < length; i++) {
var tabCell = tabRow.insertCell();
tabCell.innerHTML = mytr.cells[i].innerHTML;
}
}
</script>
</head>
<body>
<table id="tabOld" border="1" style="width:300px; text-align:center;">
<tr>
<th>序号</th>
<th>组织名</th>
</tr>
<tr onclick="AddRow(this)">
<td>1</td>
<td>组织一</td>
</tr>
<tr onclick="AddRow(this)">
<td>2</td>
<td>组织二</td>
</tr>
</table>
<br /><br />
<table id="tabAdd" border="1" style="width:300px; text-align:center;">
<tr>
<th>序号</th>
<th>组织名</th>
</tr>
</table>
</body>
</html>
追问
不是增加一行 点击序号就只是序号显示 点击组织名就只是组织名显示
追答
如果你是这样的话，那就需要把onclick事件绑定在td上，然后下面那一行要先写好td，例如你可以把代码改成如下：
js部分：
function AddCell(mycell, cellid) {
document.getElementById("cell" + cellid).innerHTML = mycell.innerHTML;
}
html部分：
1
组织一
2
组织二
id=tabAdd中添加
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<table id="tbl2" width="100%" border="1" style="text-align: center;">
<tr>
<td>序号
</td>
<td>组织名</td>
</tr>
<tr>
<td>1
</td>
<td>456</td>
</tr>
<tr>
<td>2
</td>
<td>678
</td>
</tr>
<tr>
<td>3
</td>
<td>789
</td>
</tr>
</table>
<table id="target2" width="100%" border="1" style="text-align: center;"></table>
<script>
$("#tbl2 tr:not(:first)").click(function () {
var td = $(this).find("td:first");
var td2 = $("#target2 tr").map(function () { return $.trim($(this).find("td:first").text()) == $.trim(td.text()) ? $(this) : null }).get();
if (td2.length > 0) td2[0].remove();
else $(this).clone().appendTo($("#target2"));
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
/*
如果是想用子母表格 或 级联列表吧.
可以看jqGrid和easyui的grid插件.
就现在这情况来说吧.
*/
$("#tableId tr").delegate("click",function(){
$("#下面的tableID tr").replaceWith($(this));
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道你的数据是从数据库中读出来的还是静态页面的。静态页面的这样写就可以
jsp中：
<table border="1">
<tr id="1" onclick="load(this.id)"><td>aa</td><td>dd</td></tr>
<tr id="2" onclick="load(this.id)"><td>cc</td><td>vv</td></tr>
<tr id="3" onclick="load(this.id)"><td>xx</td><td>nn</td></tr>
<tr id="a"><td></td><td></td></tr>
</table>
js中：
<script type="text/javascript">
function load(id){
$("#a").html($("#"+id).html());
}
</script>
加上对jquery的支持。如果是动态从数据库中读出来的。你就追问
jsp中：
<table border="1">
<tr id="1" onclick="load(this.id)"><td>aa</td><td>dd</td></tr>
<tr id="2" onclick="load(this.id)"><td>cc</td><td>vv</td></tr>
<tr id="3" onclick="load(this.id)"><td>xx</td><td>nn</td></tr>
<tr id="a"><td></td><td></td></tr>
</table>
js中：
<script type="text/javascript">
function load(id){
$("#a").html($("#"+id).html());
}
</script>
加上对jquery的支持。如果是动态从数据库中读出来的。你就追问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
$(function () {
$("上面的tr").click(function () {
alert($(this).html());
$("下面的table的tr").html($(this).html())
})
})
</script>
给你Jquery版本的！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
