What's the best way in javascript to delete row from html table? Table's td contains colspan and rowspan more 1 and it is a problem.

Question

What's the best way in javascript to delete row from html table? Elements contain colspan and rowspan more 1. Function deleteRow() in DOM doesn't take into account colspans and rowspans.

Answer 1

If you have loaded jQuery

$('tr#id_of_the_row').remove();

Answer 2

It sounds like your table is collapsing because it no longer has an equal number of cells in each row. This is to be expected. You need to replace the missing cells in the affected rows.

Colspan shouldn't be an issue because its all on one row which is being deleted. Rowspan however will impact other rows, so:

1) using getElementsByTagName, get all your td elements from your tr node (not your document), then loop through them to check for the rowspan attribute with getAttribute

2) if one of the attributes comes back as a number, you need to go through that many rows minus 1 and insert a td at the point where there would have been a rowspan accounting for the td.
If there are also colspans going on, you will need to keep a track of these to determine which column the td really is in. You'll also have to look out for colspans in your following rows when you come to insert the new td.

3) You may need to grab the innerHTML or children nodes of the original td and store them in memory if you want to re-add the contents in the following rows, once the row is deleted the contents will also be gone.

4) once you've done that, it is now finally safe to delete the row.