I have a html table and insert a new row with table.insertRow()
, but the new row doesn't have any attributes or formatting applied. How can I add a row to the table with row formatting?
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /><TABLE id="dataTable" width="100%" align="center"><TR align="center" border="1"><TH></TH><TH>ID </TH><TH>Name</TH><TH>Status</TH></TR><TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD> 1 </TD><TD> <INPUT type="text" value="Submission 1" /> </TD><TD>Working version</TD></TR></TABLE><script type="text/javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; cell3.appendChild(element2); } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } }</script>