javascript - 发送时如何访问所有行数据

Question

假设我有这样的事情：

<table>
<tr>
  <th>ID</th>
  <th>Name</th>
  <th>Lastname</th>
  <th>Options</th>
</tr>
<tr>
  <td>1</td>
  <td>John</td>
  <td>McDonalds</td>
  <td><a href="" onclick="delete(this)"><img src="delete.png"/></a></td>
</tr>
</table>

function delete(this)
{
   //how to access all the data from this row (id,name,lastname)
}

Answer 1

我建议将 HTML 与 Jquery 或 javascript 分开并处理事件：

在您的 HTML 中添加一个选择器，例如delete：

<td><a href="#" class="delete"><img src="delete.png"/></a></td>

然后只需使用eq 函数选择要使用的行和列。

$('.delete').click(function(e){
    e.preventDefault(); //disallowing the link

    var row = $(this).closest('tr');
    var td = row.find('td');

    var id = td.eq(0).text();  //first column
    var lastName = td.eq(1).text();  //second column
    var options = td.eq(2).text();  //third column

    alert("id: " + id +"\n" + "lastName: " + lastName + "\n" + "Options: " + options);
});

http://jsfiddle.net/7c4E3/

或者，您可以根据需要使用此答案创建数据数组。

Answer 2

是否可以在这些列上添加类？如果是，试试这个：

HTML：

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Lastname</th>
        <th>Options</th>
    </tr>
    <tr>
        <td class="id">1</td>
        <td class="name">John</td>
        <td class="lastname">McDonalds</td>
        <td><a class="deleteRow" href="#" onclick=""><img src="delete.png"/></a>
        </td>
    </tr>
</table>

jQuery：

$(".deleteRow").click(function (e) {
    var thisrow = $(this).closest("tr");
    var id = thisrow.find(".id").text();
    var name = thisrow.find(".name").text();
    var lastname = thisrow.find(".lastname").text();
    alert("You selected " + id + ": " + name + " " + lastname);
});

这是一个小提琴

Answer 3

然后我建议你尝试使用 jQuery 方式：

这.del是删除按钮的类名，您可以通过.eq()按索引选择元素的函数找到它。

$('.del').on('click', function(){
   var theRow = $(this).closest('tr').find('td');
   var id = theRow.eq(0).text();
   var fName = theRow.eq(1).text();
   var lName = theRow.eq(2).text();
   console.log(id + ' ' + fName + ' '+ lName);
});