传递表行的ID

Question

对于大多数人来说，以下问题可能是一个简单的问题。但是我刚刚开始使用JavaScript，如果有人能指出我的方向，我真的很感激。

我有一个正常的HTML表，其中每一行都有自己的ID。我想实现的是每次单击一行中的链接时，该行的id应该存储在一个变量中，然后传递给一个函数。比方说，我点击行＃1，然后id＃1应该通过，等等......我怎么能做到这一点？

谢谢。

Answer 1

这应该工作：

var currentRowID, table = document.getElementById('your-table'); 
var rows = table.rows; 
var row_count = rows.length; 

for(var i = 0; i < row_count; i++) { 
    rows[i].onclick = function() { 
     currentRowID = this.id; 
     //do something with currentRowID here... 
    }; 
} 

jsFiddle example

Answer 2

当你安排一个事件处理程序，以响应点击，浏览器会做一些事情，这样就可以找出被点击了什么元素（事件的“目标”）。在JavaScript，你可以做这样的事情，假设你<table>是页面上的唯一表：

function handleRowClicks(e) { 
    e = e || window.event; 
    if (!e.target.tagName.toLowerCase() === "tr") return; 
    var rowId = e.target.id; 
    /* 
    whatever you want to do goes here 
    */ 
} 

// To set up the event handler, do this in your "window.onload" or some 
// other initialization point 

document.getElementsByTagName("table")[0].onclick = handleRowClicks; 

这只是一堆不同的方法之一。如果你要使用Javascript框架/库，它可能会稍微简单些，但可能并不多。

请注意，此方法处理的是<table>级别的点击，而不是行本身。这节省了一些初始化工作。

Answer 3

其他例子类似，这里是你如何能在纯JavaScript做到这一点：

// Pure JavaScript: 
var table = document.getElementById("table-one"); 
var rows = table.rows; 
var length = rows.length; 

for(var i = 0; i < length; i++) { 
    rows[i].onclick = function() { 
     alert(this.id); 
     // Do more stuff with this id. 
    } 
} 

在我看来，这种特殊的问题是由jQuery非常漂亮的解决。如果您正在执行与此类似的其他操作，那么jQuery将为您节省大量时间，并降低代码的复杂度。比较以上这样的：

// jQuery: 
$("#table-one tr").bind("click", function() { 
    alert(this.id); 
}); 

bind是一个jQuery方法，只是，嗯，结合事件的处理程序:)

工作样本：http://jsfiddle.net/andrewwhitaker/9HEQk/

Answer 4

做到这一点的最简单的方法是使用jQuery框架。

// Your function 
function MyFunc(rowId){ 
    alert(rowId); 
} 
// Binde click event to all rows with class "ClockableRow" 
// within table with class "clickableTable" 
$(".clickableTable .clickableRow").click(function(){ 
    // Call you function and pass clicked row ID there 
    MyFunc($(this).attr("id")); 
}) 

你表建议立即进行删除这个样子：

<table class="clickableTable"> 
    <tr id="row1" class="clickableRow"><td>row 1</td></tr> 
    <tr id="row2" class="clickableRow"><td>row 2</td></tr> 
    <tr id="row3" class="clickableRow"><td>row 3</td></tr> 
    <tr id="row4" class="clickableRow"><td>row 4</td></tr> 
    <tr id="row5" class="clickableRow"><td>row 5</td></tr> 
</table> 

example