Как создать динамическую таблицу?

Question

Есть ли способ создать динамический элемент таблицы HTML, используя Jquery.

В этой таблице я хочу добавить внутренний элемент Td в качестве тега привязки.

Answer 1

Вы можете сделать что-то вроде этого

Используйте функцию append

$("#divID").append("<table><tr><td><a href='3#'>Click me</a></td></tr></table>");

или просто создайте разметку таблицы как строку и используйте

HTML ()

чтобы добавить его в контейнер

var strTable = "<table><tr><td><a href='#'>Click</a></td></tr></table>";

$("#div1").html(strTable.toString() );

Если у вас более сложная разметка, используйте массив

var arrTableMarkup = new Array();
arrTableMarkup.push ( "<table>" );
arrTableMarkup.push (     "<tr>" );
arrTableMarkup.push (       "<td>" );
arrTableMarkup.push (           "<a id='anch1' href='#'>Click</a>" );
arrTableMarkup.push (       "</td>" );
arrTableMarkup.push (       "</tr>" );
arrTableMarkup.push ( "</table>" );

$("#div1").html(arrTableMarkup.join('') );

Редактировать

Если вам нужно добавить событие onclick, вы можете указать тег привязки id и затем использовать метод live для назначения события.

$("#anch1").live ( "click" , function () { EventHandlerFunction() } );

Answer 2

Звоните createDynamicTable(tbody, rows, cols)

<script typr="text/javascript">
function createDynamicTable(tbody, rows, cols)
{
    if (tbody == null || tbody.length < 1)return;

    for (var r = 1; r <= rows; r++) {
            var trow = $("<tr>");
        for (var c = 1; c <= cols; c++) {
            var input = $("<a />");
            $("<td>")
                    .addClass("tableCell")
                    .append(input)
                    .data("col", c)
                    .appendTo(trow);
        }
        trow.appendTo(tbody);
    }
}
</script>

Answer 3

Самый простой (и, возможно, самый быстрый) способ сделать это из HTML:

var table = $('<table><tr><td><a href="#">Hello World!</a></td></tr></table>');

Выполнение table.find('a') даст вам привязку, если необходимо.