使用jQuery单击链接时，如何获取动态表中单元格的值？
[英]How to get the value of cell in dynamic table when a link is clicked using jquery?
问题描述
当我单击表中的相应链接时，我想获得相应的客户ID。 我无法在for循环中获取群集ID的值。
我使用jQuery创建了动态表和简单的HTML：
如您所见，在该图中，如果单击“开始”按钮，它将在警报中显示第一个群集ID。 这是我遇到问题的代码：
for (i = 1; i <= 3; i++) {
var row = $('<tr></tr>').attr({
class: ["class1", "class2", "class3"].join(' ')
}).appendTo(mytable);
var clusterid = "cluster" + i;
$('<td><span align="center" valign="middle" id="clustr"></span></td>').text(clusterid).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(sizen).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(status).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(type).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(startdate).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').html("<u><a target='_blank' href='" + url + "'>view hdfs</a><br><a href>view jobtracker</a><br><a href>view tasktracker</a></u>").appendTo(row);
$('<td><span align="center" valign="middle" class="clickclass"></span></td>').html('<a href="#" id="anc" role="button" class="btn btn-info">start</a>').appendTo(row);
console.log("TTTTT:" + mytable.html());
mytable.appendTo("#box");
//alert(id);
} //for
$(function () {
$('.btn').on('click', function () {
var button = $(this);
//alert(button);
var parentTd = button.parent('td');
//alert(parentTd);
var parentTr = parentTd.parent('tr');
//alert(parentTr);
//alert(clusterid);
var nombre = parentTr.find('td #clustr').html();
// alert($row.find('td:eq(1)').html());
alert(nombre);
});
});
这是我的完整HTML代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="styles/bootstrap.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="styles/jquery.js"></script>
<script src="styles/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function () {
$("#sample").prepend(
"<div style='color:#6495ED' id='totinsinfo'> <center><h2>Cluster Information</h2></center> </div>");
mytable = $('<table id="s" border="2" style="width:947px;"><th bgcolor="#00BFFF"><h4>Cluster_Id</h4></th><th bgcolor="#00BFFF"><h4>Size(Nodes)</h4></th><th bgcolor="#00BFFF"><h4>Status</h4></th><th bgcolor="#00BFFF"><h4>Type</h4></th><th bgcolor="#00BFFF"><h4>Start_Date</h4></th><th bgcolor="#00BFFF"><h4>Clusterlinks</h4></th><th bgcolor="#00BFFF"><h4>Action</h4></th></table>').attr({
id: "basicTable"
});
var i = 1;
var sizen = "null";
var startdate = "null";
var status = "null";
var type = "null";
var url = "null";
for (i = 1; i <= 3; i++) {
var row = $('<tr></tr>').attr({
class: ["class1", "class2", "class3"].join(' ')
}).appendTo(mytable);
var clusterid = "cluster" + i;
$('<td><span align="center" valign="middle" id="clustr"></span></td>').text(clusterid).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(sizen).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(status).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(type).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').text(startdate).appendTo(row);
$('<td><span align="center" valign="middle"></span></td>').html("<u><a target='_blank' href='" + url + "'>view hdfs</a><br><a href>view jobtracker</a><br><a href>view tasktracker</a></u>").appendTo(row);
$('<td><span align="center" valign="middle" class="clickclass"></span></td>').html('<a href="#" id="anc" role="button" class="btn btn-info">start</a>').appendTo(row);
console.log("TTTTT:" + mytable.html());
mytable.appendTo("#box");
//alert(id);
} //for
$(function () {
$('.btn').on('click', function () {
var button = $(this);
//alert(button);
var parentTd = button.parent('td');
//alert(parentTd);
var parentTr = parentTd.parent('tr');
//alert(parentTr);
//alert(clusterid);
var nombre = parentTr.find('td #clustr').html();
// alert($row.find('td:eq(1)').html());
alert(nombre);
});
});
});
</script>
</head>
<body style="margin-top: 46px;">
<div class="span9" id="sample">
<div id="box" style="margin-right: -189px;"></div>
<div class="span8" id="empty"></div>
</div>
</body>
</html>
3 个解决方案
解决方案1
0 2013-12-02 09:37:03
由于您是动态追加表，因此需要使用事件委托
$('#sample').on('click', '.btn', function () { ... });
像这样的结构
$('static element').on('event', 'dynamic element', function(){ ... });
解决方案2
0 已采纳 2013-12-02 09:45:08
我无法清除您的代码，但清楚地了解您需要第一个td值。
检查： http : //jsfiddle.net/ke7VN/
$('.btn').on('click', function () {
console.log( $(this).parent().parent().find('td:first').text());
});
解决方案3
0 2013-12-02 10:01:21
最好的方法是先获取父tr，然后再#clustr
$('.btn').on('click', function () {
console.log($(this).closest('tr').find('#clustr'));
});
jQuery，在表中单击超链接值时，将其从一个单元格复制到同一行中的另一个单元格
[英]jQuery, Copy hyper-link value when clicked on it in table from one cell to another in the same row
当在PHP中单击链接时，如何使用jquery更新数据库中的值
[英]how to update a value in database using jquery when a link is clicked in php
单击时如何动态更改表单元格中的链接值时表格行的背景色
[英]how to dynamically change a table row background color when a link value within its cell changes when clicked
如何使用javascript从动态表中获取特定的单元格值
[英]how to get a particular cell value from dynamic table using javascript
如何使用 javascript 在动态表中获取单击单元格的内容
[英]How to fetch contents of clicked cell in a dynamic table using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.