Jquery - 设定值

Question

我目前有一个表，在1列中有一个删除链接，如果用户单击此链接，它会触发onClick，它基本上标记要删除的项并隐藏TR。 它工作正常，但我只是想知道是否有更好的方法.....

$(document).on('click', '.deleteCell', function (e) {
    //Belt and braces - only do this for <td> elements
    var target = $(e.target);
    if (!target.is('td')) {return;}

    var h = this.innerHTML;
    var newH = h.replace("CsUpdated", "CsDeleted");
    newH = newH.replace("CsAdded", "CsDeleted");
    this.innerHTML = newH;

    //We clicked on a TD so get the row TR.       
    var theRow = $(this).closest('tr');
    theRow.hide();
});

我认为必须有一个比我用替换的字符串操作更好的方法吗？在那儿？ 我试过这些，但没有运气......

$(this).attr('value', 'CsDeleted');
$(target).attr('value', 'CsDeleted');
$(this).val('CsDeleted');
$(target).val('CsDeleted');

由于

Answer 1

td没有使用值.text()或.html()

Answer 2

td没有value属性。

使用

$("td").html() // to fetch html
$("td").html("<span> Hello World </span>") // to set html

$("td").text() // to fetch plain text
$("td").text("Hello World") // to set plain text

Answer 3

您可以在任何html元素上使用自定义data- - 属性（请参阅this MDN article和the reference）。这些可以通过jquery的attr方法访问，并且对渲染没有影响。

Code PoC：

$(document).on('click', 'td.deleteCell', function (e) {
    //Belt and braces - only do this for <td> elements

    $(this)
        .removeAttr('data-CsUpdated')
        .removeAttr('data-CsAdded')
        .attr('CsDeleted', '1')
    ;

    //We clicked on a TD so get the row TR.       
    $(this).closest('tr').hide();
});

如果代码中给出的值是互斥的，则简化为

$(document).on('click', 'td.deleteCell', function (e) {
    //Belt and braces - only do this for <td> elements

    $(this).attr('Cs', 'Deleted');
       // attr 'Cs' contained 'Added' or 'Updated'
       // This scheme requires modifications at other places in your original code !
    ;

    //We clicked on a TD so get the row TR.       
    $(this).closest('tr').hide();
});

<强>更新

由于OP实际上想要修改子input元素的值，处理程序将简化为：

$(document).on('click', 'td.deleteCell', function (e) {
    $('input', $(this)).val('CsDeleted');
        // more specific selector may be needed depending on possible cell contents

    $(this).closest('tr').hide();
});

Answer 4

您可以使用以下任何一项来设置单元格内容

.html()或.text()或.prepend或.append及更多

但是.val()仅适用于具有value="...."属性的输入。如果您想使用.data("key","value")来支持Cell，可以通过调用.data("key");

随时访问

Answer 5

试试这个，

$(function(){
$('.delete').click(function(){
    $(this).closest('tr').remove();
  });

}）;