如何使用 jQuery 从表中获取 <td> 标签？答案

【问题标题】：How to get the <td> tag from table using jQuery?如何使用 jQuery 从表中获取 <td> 标签？
【发布时间】：2015-06-16 13:24:16
【问题描述】：

我有一个包含几行的表，其中一行如下所示：

<tr>
    <td>
        <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
        </div>

        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
        </button>

        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
</tr>

我想在这个tr 的第一个td 中获取div 的值。我在同一个 td 中有按钮，当我单击它们时，我会转到一个函数，我需要访问该函数中的行。

我已经尝试了以下

console.log($(this).closest("tr"));
console.log($(this).closest("tr").find(".div"));

但我不断得到

[prevObject: m.fn.init[1], context: undefined]

我想访问这一行以及对上一行和下一行的访问权限，但我看不到这里哪里出错了。

谢谢。

【问题讨论】：

替换这段代码 console.log($(this).closest("tr").find(".div"));与 console.log($(this).closest("tr").find(".entry_karma"));
当你说要获取div的值时，你的意思是4还是
4
？
我想得到这个tr中第一个td里面的div的值 ::$(this).closest('tr').find('td:first div').html()
我想要 4 或
，两者都行。
$(this).parents('tr') 会让你排在第一位。 $(this).parents('td').find('div > h4').text() 应该让你 4

标签： javascript jquery html

【解决方案1】：

您正在寻找带有class="div" 的元素，但没有类似的东西。

console.log($(this).closest("tr").find("div"));

此 div 的值（或更好的内容）在 .html() 或 .text() 中。

console.log($(this).closest("tr").find("div").html());

【讨论】：

【解决方案2】：

你还没有定义任何类名 div。试试这样：

console.log($(this).closest("tr").find("div:first"));

【讨论】：

我得到了这个 [prevObject: m.fn.init[0], context: undefined, selector: "div:first"]。
这是选择 div。如果你需要价值，你需要调用函数 $(this).closest("tr").find("div:first").val();
而不是 .val() 使用 .text();
当我使用 text() 时，控制台打印一个空行。

【解决方案3】：

不是.div。它只是div。 .div 指的是 element 类 div。所以你必须参考div 或div 类entry_karma

$(this).closest("tr").find("div.entry_karma");

更新

试试

$(this).closest("tr").find(".entry_karma>h4").text();

要获得价值，您需要按照@wahwahwah 所说的去做并获得previous 和next tr，您可以按以下方式进行：

var prevTr=$(this).closest("tr").prev();
var nextTr=$(this).closest("tr").next();

【讨论】：

我得到 [prevObject: m.fn.init[0], context: undefined, selector: "div.entry_karma"]。

【解决方案4】：

您可以在 jQuery 中使用包含元素和类的父子选择器：

var child = $('td > .entry_karma');

child 现在等于 <h4>4</h4>，然后您可以在其中检索 html 并获取 4

要获取父 <tr> 元素，您可以使用 jQuery .has() 选择器，使用上述 var child = * sn-p 中的相同变量：

var child = $('td > .entry_karma');

console.log(child.html());

// get parent tr
var parent = $('tr').has(child);

console.log(parent.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="entry_karma" id="entry_karma_9">
        <h4>4</h4>
      </div>

      <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
        <span class="glyphicon glyphicon-arrow-up"></span>
      </button>

      <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
        <span class="glyphicon glyphicon-arrow-down"></span>
      </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
  </tr>
</table>

或者，如果值总是嵌套在<h4>标签中，你可以像这样直接访问它：

var val = $('td > .entry_karma > h4').html();

var val = $('td > .entry_karma > h4').html();
console.log(val);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <td>
          <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
          </div>

          <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
          </button>

          <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
          </button>

        </td>
        <td>Hello</td>
        <td>2014</td>
      </tr>
    </table>

【讨论】：

无论如何我可以获得下一个 tr 或 prev tr 并获得 div 值吗？顺便说一句，这是迄今为止唯一有效的答案。
@Pete - 我已经更新了我的答案......这并不是说其他答案不起作用，而是他们正在返回一个不应该被直接解析为控制台中的“字符串”。虽然，我的答案在 DOM a little bit less 周围移动，而不是其他答案（据我所知）。

【解决方案5】：

在按钮单击处理程序中，您可以将以下内容用于当前行、下一行和上一行，以及 div 的内容：

var thisROW = $(this).closest('tr'),
    nextROW = thisROW.next(),
    prevROW = thisROW.prev(),
    div = $('div.entry_karma', thisROW).html();

$('button[id^="vote_down_"]').on('click', function() {
    var thisROW = $(this).closest('tr'),
        nextROW = thisROW.next(),
        prevROW = thisROW.prev(),
        div = $('div.entry_karma', thisROW).html();
    console.log( thisROW[0], nextROW[0], prevROW[0], div.trim() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
<tr>
    <td>
        <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
        </div>

        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
        </button>

        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
</tr>
    </tbody>
  </table>

【讨论】：

【解决方案6】：

只需将.div 替换为div，并找到最接近的td，因为按钮已经在第一个td 内，如下所示：

console.log($(this).closest("td").find("div"));

P.S.：如果您使用.closest('tr')，它将找到所有现有的divs（如果您有多个）。

【讨论】：

4

，两者都行。