How to set HTML attribute of a column in a row added programmatically.

jhewson

I have some code in my HTML file that adds rows to my table (see HTML code, below). As you can see, the second td tag sets contenteditable to true. This works correctly and allows the user to edit that column in the table.

However, when I try to add a new row to the same table programmatically (see JavaScript/jQuery code, below), the contenteditable setting is not added and the user cannot edit that column in the table.

How do I correctly set contenteditable to true programmatically?

Note: The third column has a Remove button that works correctly when added programmatically, but it does not specify the td tag (it just specifies the button tag). Perhaps I should not be specifying the td tag for the second column, but then how do I set the contenteditable attribute?

HTML code:

{% for obj in excipientsSelectedList %} {% empty %} {% endfor %}

Excipient	Percentage	Remove
{{ obj.0 }}	{{ obj.1 }}		No Excipient found...

JavaScript/jQuery code:
var excipientsTable = $('#excipients').DataTable();
var rowInfo = [];
rowInfo.push(name);
rowInfo.push('<td contenteditable="true">0</td>');
rowInfo.push('<button id="removeExcipient" row-name="' + name + '"><span class="glyphicon glyphicon-remove"></span></button>');
excipientsTable.row.add(rowInfo).draw();

Thanks,
James.