无法使用 jQuery 在 <td> 中获取文本答案

【问题标题】：Cannot Get a Text Inside a <td> With jQuery无法使用 jQuery 在 <td> 中获取文本
【发布时间】：2012-08-28 11:10:54
【问题描述】：

我有一个像这样的<td> 元素：

<td class="right editable qty">100</td>

我想获取其中的值 (100)，但遇到了一些问题。

这是我的脚本：

$('#example tbody tr td.qty').change(function () {
    var sQty = $(this);

    console.log(sQty); // print [<td class="right editable qty">100</td>]
    console.log($.text(sQty)); // print nothing
    console.log(sQty.val()); // print nothing
    console.log(sQty.text()); // print nothing
    console.log(sQty.html()); // print <form><input style="width: 100%; height: 100%; " autocomplete="off" name="value"></form>
});

我的脚本有什么遗漏吗？

我正在使用：DataTables 和 jeditable

【问题讨论】：

TD 元素不会触发 change 事件。您可以使用单击。
@undefined：更新了问题。
可以使用点击方式。 jsfiddle.net/RJCxt/3

标签： jquery html datatables jeditable

【解决方案1】：

您可以通过$(selector).text();获取值

改变

console.log($.text(sQty));

到

console.log(sQty.text());

【讨论】：

【解决方案2】：

我写这个以防有人发现这个问题

当尝试选择各种<td> 时，为了从多个<td> 标签中获取（或设置）每个值，如下所示：

<td class='myClass'>1</td>
<td class='myClass'>2</td>
<td class='myClass'>3</td>

如果你使用.text()、.val()或.html()，如下：

//Example
var tdContainer;
for (int k = 0; k < $("td.myClass").length; k++){
     var tdContainer = $("td.myClass")[k].text() + ", "; //Throws "Uncaught TypeError"
}

Javascript 抛出错误，返回“[used method] is not a function”。

在这种情况下，解决方案是使用.textContent:

//Example
var tdContainer;
for (int k = 0; k < $("td.myClass").length; k++){
     tdContainer += $("td.myClass")[k].textContext + ", ";
}

希望这对你们中的一些人有所帮助。

【讨论】：

【解决方案3】：

提示：来自.change 文档

change 事件在元素值更改时发送到元素。这事件仅限于元素、框和元素。用于选择框、复选框和单选按钮。

所以用.text()获取文本

console.log($('#example td.qty').text());

【讨论】：

我们真的需要 $('#example tbody tr td.qty') 吗？可以用 $('.qty') 来完成吗？
@diEcho：因为有超过 1 个 <td> 具有相同的 class 属性，它将打印除更改的 <td> 之外的另一个 <td> 值。

【解决方案4】：

首先td 没有change 属性，而是使用click

$('#example tbody tr td.qty').click(function () {
    var sQty = $(this);

    console.log(sQty.html()); // print [<td class="right editable qty">100</td>]
    console.log(sQty.text()); // print 100
    console.log(sQty.val()); // nothing will print,val() is for input type elements
});

【讨论】：

【解决方案5】：

朋友，

您可以通过选择具有类名(.righteditableqty) 的列，然后使用 .text() 函数选择文本来简单地从表格行的表格列中获取值。

或使用该脚本：

$(".righteditableqty").Text()

【讨论】：

【解决方案6】：

/* Apply the jEditable handlers to the table */
oTable.$('td.editable').editable(
    function(value, settings) {
        if($(this).hasClass('qty')) // The editable class not only on one column.
            console.log(value);
        return(value);
    },
    {   
        "height": "100%",
        "width": "100%"
    }
);

当我尝试运行jEditable 处理程序和change 事件（关于上述问题）时，我发现将首先触发change 事件，然后再触发jEditable 处理程序。 jEditable 处理程序将返回 value 并设置到已编辑的单元格中。

默认情况下，表格单元格将如下所示：

<td class="right editable qty">1</td>

当我点击单元格时，它会生成这个表单：

<td class="rigth editable qty">
    <form>
        <input style="width: 100%; height: 100%; " autocomplete="off" name="value">
    </form>
</td>

我们看到单元格的值消失了（我在尝试使用 firebug 检查元素时得到的这个表单）。当我尝试更改form 内的input 元素的值时，萤火虫根本没有显示任何变化（该值隐藏在某处）。所以当我按下Enter 按钮时，我意识到change 事件将首先被触发，而在那一刻<td> 元素仍然是空的，这就是为什么当我们尝试打印该值时仍然是空的。

因此，我没有使用change 事件来获取值，而是在将值返回到单元格之前使用jEditable 处理程序（如果我们按下Enter 按钮，处理程序将被触发）。

【讨论】：