获取特定表"td“元素的信息

Question

我有一张10×8桌。

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

基本上，我是在每一行的第2列到第8列上创建jquery事件。当我单击该列中的任何一个(td)时，它应该会获得列1的id、类或名称属性的信息，我需要这个信息在服务器端代码中发送。

--谢谢。

Answer 1

是。从单击的元素中，您通过closest导航到行，然后可以找到带有find或children的相关类的td (如果有嵌套表，则可能是children )：

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

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

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

如果将该处理程序分配给表中的任何td、tr或整个tbody或table，则该处理程序将工作。

实例化 x- 来源

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.
});