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

传递表行的ID

4 个答案: