使用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.