javascript - Jquery - Setting value of <td> - Stack Overflow

I currently have a table and in 1 column a Delete link, if the user clicks this link it fires an onClick which basically flags that item to be deleted and hide the TR. It works fine, but I am just wondering if there is a better way .....

$(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();
});

I just think there must be a better way than the string manipulation I am doing with the replace? Is there? I've tried these but with no luck...

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

Thanks

I currently have a table and in 1 column a Delete link, if the user clicks this link it fires an onClick which basically flags that item to be deleted and hide the TR. It works fine, but I am just wondering if there is a better way .....

$(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();
});

I just think there must be a better way than the string manipulation I am doing with the replace? Is there? I've tried these but with no luck...

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

Thanks

• javascript
• jquery

Share Improve this question Follow edited Nov 13, 2015 at 10:50 ozil 7,14599 gold badges3636 silver badges6161 bronze badges asked Nov 13, 2015 at 10:44 AntDCAntDC 1,9171515 silver badges2323 bronze badges 3

• use .text() or .html() – guradio Commented Nov 13, 2015 at 10:45
• 1 Table data cells don't have values. What are you actually trying to do? – Quentin Commented Nov 13, 2015 at 10:46
• Hete is the TD <td value="CsDeleted" class="deleteCell"> <input data-val="true" data-val-required="The ModelStatus field is required." id="Costs_0__ModelStatus" name="Costs[0].ModelStatus" value="CsDeleted" type="hidden"> Delete </td> I want to modify the value of ModelStatus. I see now it is in the input...excude me. I just need to be able to get the Input element now. – AntDC Commented Nov 13, 2015 at 10:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

td has no value use .text() or .html()

td doesnt have a value attribute.

Use

$("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

You could use any of the following to set the cell contents

.html() or .text() or .prependor .append and more

However .val() only works on inputs that have the value="...." attribute. If you want to prop the Cell with some data use .data("key","value") which can be accessed at any point by calling .data("key");

Try this one,

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

});

You may use custom data-- attributes on any html element ( see this MDN article and the reference ). These are accessible through jquery's attr method and have no influence on rendering.

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();
});

In case the values given in your code are mutually exclusive, this simplifies to

$(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();
});

Update

As the OP actually wants to modify the value of a child input element, the handler reduces to:

$(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();
});