How can I add an thml object () to a cel td once the table has been drawn.

procyon81

Link to test case: http://live.datatables.net/zeyuqeca/2/edit?html,js,output

Description of problem: I have found and tested with success change the background of the cell or change text itself in a cell with a click on the cell. However I haven't found the way to change or add or remove a html element inside the cell.

I have created this from examples I found:

$('#myTable tbody').on('click', 'td', function(e) {
var rowIdx = myTable.cell(this).index().row;
var colIdx = myTable.cell(this).index().column;
var cellNode = myTable.cell(this).node();
var cell = myTable.cell(this);
var actualData = myTable.cell(this).data();
alert(colIdx);
if (colIdx == 0)
$(cellNode).css("background-color", "#4ac0ad");    //this works
if (colIdx == 1)
$(cell).data(actualData + '-CHANGED');  //this works
// I need to do something like
$(cell).html(<input type="text" />);
});

Thanks for any inputs,

colin

Thanks for the test case, but unfortunately it gives errors when it runs. Please can you take a look at those, and give instructions on how to reproduce the problem you want help with,

Colin

procyon81

Sorry, just fixed it.
http://live.datatables.net/zeyuqeca/5/edit
By the way, is not exactly an error, I just can't make to insert (don't know how) an html input element into the cell when clicking on it.

colin

I'm not entirely following, but I added a HTML element to the table here - http://live.datatables.net/feviqofi/1/edit . Is that what you're looking for?

Colin

procyon81

Exactly! Thanks a lot!

procyon81

Note: In my code if I add the myTable.cell(this).invalidate(); it doesn't do anything. If I remove that line it works.

Thanks,