Question

我有一个HTML表格，表格的每个单元格都有两个数据属性。我想要做的是设置一个按钮来切换表中显示的值在这两个属性之间。

<table class="table1">
<tbody>
<tr>
<td data-original="A" data-new="B"> A </td>
</tr>
</tbody>
</table>

我能够设置新文本并获取表格外的属性，但每当我尝试在表格中时，我都会收到错误：

＆＃39; Uncaught - ＆gt; TypeError：undefined不是函数＆＃39;。

我已收到许多命令$('td').text()，.val()，.attr('td')，.getAttribute()的错误。我是否错过了一个插件或用于从表中获取和设置值的东西？

答案：我找出原因，我是个白痴，并没有提到会有很多带有重复标签的TD元素。我最终使用了Underscore.js的每个方法来迭代它们以及以下部分答案来交换值。

Answer 1

刚刚制作了Fiddle：

$("button").on("click", function () {
    $("td").text($.trim($("td").text()) == $("td").data("original") 
      ? $("td").data("new") : $("td").data("original"));
});

通过检查td中的当前文本并使用三元运算符在data-original和data-new值之间切换。在空白的情况下使用trim()初始文本问题（因为我刚注意到你的示例td中有空格）。

为了防止在初始加载页面时该按钮不在DOM中，您必须调整on()以将click事件从静态父元素委派给按钮，例如像这样：$(document).on("click", "button", function () { ...
而不是$(document)可以使用其他所有静态父元素。

正如您所提到的，该表将包含多个带有数据属性的tds，我只是调整了Fiddle来处理这个问题：

$("button").on("click", function () {
   $("td").each(function () {
    $(this).text($.trim($(this).text()) == $(this).data("original") ?   
             $(this).data("new") : $(this).data("original"));
   });
});

Answer 2

我不知道.text()对你不起作用。

要在td元素中设置文字，请使用.text()。要在data-current或data-new中获取数据，jQuery有一个方便的函数.data(tag)，例如$(sel).data('current')。

这是fiddle显示您的问题的用法。

使用Jquery编辑HTML表数据单元格

2 个答案: