How to match different columns of table in html?

Question

I have a table structure as below:

<table>
  <tr id="tr1">
      <td></td>
      <td></td>
  </tr>
  <tr id="tr2">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr id="tr3">
    <td></td>
    <td></td>
  </tr>
</table>

Now it has 2 columns each in first and last row . And 4 columns in 2nd row. Now if i want to add one more column to the last row correspondent to the 4th column in 2nd row , i knw that i should append one empty td to last row and then add that column. But this empty td joining is not possible in all the cases . So how to add columns randomly and manage the structure of table?? Can i get any help??

Answer 1

is this what you want?

$(document).ready(function(){
    addCol("tr3", 4);
});

function addCol(rowid, coldes){
    var tr = $("#" + rowid + " td");
    var trctr = tr.length;
    troffset = coldes - trctr;
    alert(troffset);
    for(var i = 1; i <= troffset; i++){
        tr.parent().append("<td></td>");
    }
}

http://jsfiddle.net/djb78/1/

Answer 2

Handling HTML tables manually (adding columns etc.) is quite problematic, but there are some libraries for tables / data presentation that may help you.

1. Datatables

   http://www.datatables.net/

2. Flexigrid

   http://www.flexigrid.info/

3. SlickGrid

   https://github.com/mleibman/SlickGrid

4. jqGrid

   http://www.trirand.com/blog/

5. dgrid and DojoX Data Grids

   http://dojotoolkit.org/features/desktop.php

Answer 3

You can't do that. You must merge some cells and remove their borders. rowspan and colspan attributes will help