jquery - 获取有关特定表“td”元素的信息

Question

我有一张 10 X 8 的桌子。

每行有 8 列，即 8 个 td 元素。行中的每个 td 都有一个不同的类。当我单击该行中的任何其他 td 时，是否可以获得该行中第一个td元素的信息。

基本上我在每行的第 2 列到第 8 列上创建一个 jquery onclick 事件。当我单击此列中的任何一个（td）时，它应该获取信息，即..，列 1 的 id 或 class 或 name 属性。我需要这个在服务器端代码上发送它。

- 谢谢。

Answer 1

是的。从单击的元素中，您可以通过 导航到该行closest，然后您可以使用or找到td具有相关类的（可能在您有嵌套表的情况下）：findchildrenchildren

function clickHandler(e) {
    var cell = $(e.target).closest('tr').children('td.foo');
    // ...
}

或者，如果您总是想要第一个 td：

var cell = $(e.target).closest('tr').children('td').first();

td如果将该处理程序分配给表中的任何一个，分配给 ，或者tr实际上分配给整个，那么该处理程序将起作用。tbodytable

实例| 来源

JavaScript：

jQuery(function($) {

  // Put the handler on the tbody
  $("#target").click(clickHandler);

  function clickHandler(e) {
    var td = $(e.target).closest('tr').children('td').first();
    display("The text of the first <code>td</code> in that row is: " + td.text());
  }

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }

});

HTML：

<table>
  <tbody id="target">
  <tr>
    <td class="one">This is one in row 0</td>
    <td class="two">This is two in row 0</td>
    <td class="three">This is three in row 0</td>
  </tr>
  <tr>
    <td class="one">This is one in row 1</td>
    <td class="two">This is two in row 1</td>
    <td class="three">This is three in row 1</td>
  </tr>
  <tr>
    <td class="one">This is one in row 2</td>
    <td class="two">This is two in row 2</td>
    <td class="three">This is three in row 2</td>
  </tr>
  </tbody>
</table>

Answer 2

基本上你可以这样：

$('td.column2-8').click(function()
{
var firstTdData = $(this).parent().children('td:first').html();
});

Answer 3

$('td').click( function(){
    var $elem = $(this).parent('tr').children('td:first');
    var elem_id = $elem.prop('id'); // or $elem.attr('id');
    .... // for class, name, etc.
});