[英]How to get the value of cell in dynamic table when a link is clicked using jquery?
I want to get the respective customer ID when I click on respective link in the table. 当我单击表中的相应链接时,我想获得相应的客户ID。 I am unable to get the value of cluster ID in the for loop.
我无法在for循环中获取群集ID的值。
I used jQuery to create a dynamic table and simple HTML: 我使用jQuery创建了动态表和简单的HTML:
As you can see, in that image, if I click on the Start button it should show me first cluster ID in an alert. 如您所见,在该图中,如果单击“开始”按钮,它将在警报中显示第一个群集ID。 Here's the code that I'm having issues with:
这是我遇到问题的代码:
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);
});
});
And here's my full HTML code: 这是我的完整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>
Since you are appending the table dynamically you need to use event delegation 由于您是动态追加表,因此需要使用事件委托
$('#sample').on('click', '.btn', function () { ... });
Structure as this 像这样的结构
$('static element').on('event', 'dynamic element', function(){ ... });
i cant clear your codeing but clearly understand u need first td value .try this 我无法清除您的代码,但清楚地了解您需要第一个td值。
check : http://jsfiddle.net/ke7VN/ 检查: http : //jsfiddle.net/ke7VN/
$('.btn').on('click', function () {
console.log( $(this).parent().parent().find('td:first').text());
});
The best way is to get parent tr and then #clustr 最好的方法是先获取父tr,然后再#clustr
$('.btn').on('click', function () {
console.log($(this).closest('tr').find('#clustr'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.