writing to tr td with onClick()

Question

I am trying to get an onClick function to highlight a table row (within a dynamicTable) and also write "test read" to the clicked td[0] within this row.

this is what i have (found and tweaked from the net / stackOverflow)

$("#dynamicTable tr").click(function() {
    var selected = $(this).hasClass("highlight_tr");
    $("#dynamicTable tr").removeClass("highlight_tr");
    if(!selected)
            $(this).addClass("highlight_tr");
});

try{
    $('#dynamicTable').dataTable({
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": true,
        "sCookiePrefix": "my_datatable_",
        "aaSorting": [[ 2, "desc" ]],
        "aoColumns": [
          { "sType": "html" },
          { "sType": "html" },
          { "sType": "string" },
          { "sType": "html" },
          { "sType": "html" },
          null
        ]
    });
} catch (e){
    errorMessage(e);
}

this works fine with highlighting the row and of course the dynamicTable i can not work out what to add in order to get add HTML to the table cell though

i have tried as a test

$(this).innerHTML("test read");

thinking this will write to the full row, but it does nothing. I have also tried a few other things but none work down to my lack of javaScript knowledge...

I am not very good with javaScript as you can see..., but can usually cobble something together with help from the net, but this one is making my head ache. Any help is greatly appreciated!

Answer 1

jQuery does not have an innerHTML method, this is a property of native DOM nodes , not jQuery collections.

Perhaps you mean something like this?

this.innerHTML = "test read";

The jQuery equivalent of this is the html method.

$(this).html("test read");

However, if you want only plain text, and not HTML, you should use the text method.

$(this).text("test read");

For completeness, the native DOM node equivalent for plain text would be textContent .

this.textContent = "test read";

Answer 2

You cannot write directly inside tr element but write in td:

$(this).find('td:eq(0)').text("test read");//writes text in first td

If you want to write in all td of the tr then just remove eq() method.

You can always see the documentation like eq , text , html

Answer 3

or try

$("td:first").text("test read");

--