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

Question

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

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

我可以在表外设置新文本并获取属性，但是每当尝试在表内时，我都会不断收到错误消息：

“未捕获-> TypeError：未定义不是函数”。

我已经收到许多命令$('td').text() .val() .attr('td')和.getAttribute() 。 我是否缺少插件或从表中获取和设置值的东西？

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

Answer 1

刚刚做了一个小提琴 ：

$("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') 。

这是一个小提琴，用于显示您的问题的用法。