Как сопоставить разные столбцы таблицы в html?

Question

У меня есть структуру таблицы, как показано ниже:

<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> 

Теперь она имеет 2 колонки каждый в первой и последней строке. И 4 столбца в 2-й строке. Теперь, если я хочу добавить еще один столбец в последнюю строку, соответствующую четвертому столбцу во второй строке, я должен добавить один пустой td в последнюю строку, а затем добавить этот столбец. Но это пустое соединение td невозможно во всех случаях. Итак, как добавить столбцы случайным образом и управлять структурой таблицы? Могу ли я получить помощь?

Answer 1

это то, что вы хотите?

$(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

Вы не можете этого сделать. Вы должны объединить некоторые ячейки и удалить их границы. rowspan и colspan атрибуты помогут

Answer 3

Обработка HTML-таблицы вручную (добавление столбцов и т.д.) весьма проблематично, но есть некоторые библиотеки для представления таблиц/данных, которые могут помочь вам.

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 и DojoX данных Сетки

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