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

Edit HTML Table Data cell using Jquery

本文关键字：数据 单元格 HTML Jquery 编辑 使用      更新时间：2023-09-26

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

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

我可以在表外设置新的文本和获取属性，但每当我尝试在表内设置时，我都会收到一个错误：

"Uncaught->TypeError:undefined不是函数"。

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

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

刚刚做了一个Fiddle:

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

通过检查td中的当前文本并使用三元运算符在CCD_ 5和CCD_。通过对初始文本使用trim()，可以解决空白情况下的问题（正如我刚刚注意到的，在示例td中有空白）。

为了防止在最初加载页面时按钮不在DOM中，您必须调整on()以将静态父元素的单击事件委派给按钮，例如：$(document).on("click", "button", function () { ...
可以使用每一个其它静态父元素来代替$(document)。

正如你提到的，该表将有多个具有数据属性的td，我刚刚调整了Fiddle来处理这个问题：

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

我不知道.text()怎么不适合你。

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

这里有一个小提琴展示了这个在你的问题上的用法。

相关文章：