I have code which generate table. You can see below the code:

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 cellText = "Cell " + r + "." + c
                 $("<td>")
                         .addClass("tableCell")
                         .text(cellText)
                         .data("col", c)
                         .appendTo(trow);
             }
             trow.appendTo(tbody);
         }
     }      

the results are:

<table id="tbl" border="1">
<tbody>
<tr>
<td class="tableCell">Cell 1.1</td>
<td class="tableCell">Cell 1.2</td>
<td class="tableCell">Cell 1.3</td>
<td class="tableCell">Cell 1.4</td>
</tr>
</tbody>
</table>

I wish to add each <td></td> => <td><input><input/></td> Tagas. How I can do that?

I have code which generate table. You can see below the code:

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 cellText = "Cell " + r + "." + c
                 $("<td>")
                         .addClass("tableCell")
                         .text(cellText)
                         .data("col", c)
                         .appendTo(trow);
             }
             trow.appendTo(tbody);
         }
     }      

the results are:

<table id="tbl" border="1">
<tbody>
<tr>
<td class="tableCell">Cell 1.1</td>
<td class="tableCell">Cell 1.2</td>
<td class="tableCell">Cell 1.3</td>
<td class="tableCell">Cell 1.4</td>
</tr>
</tbody>
</table>

I wish to add each <td></td> => <td><input><input/></td> Tagas. How I can do that?

• javascript
• jquery
• html-table

• You wish to do an <input> into each <td>? What happens to cellText? – Alexander Commented May 31, 2012 at 11:44

3 Answers 3

Modify your function a bit, and it will add input fields to each cell:

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 = $("<input />");
            $("<td>").addClass("tableCell")
                .append(input)
                .data("col", c)
                .appendTo(trow);
        }
        trow.appendTo(tbody);
    }
}

DEMO: http://jsfiddle/Xt33h/

You could do:

$('#tbl td:last').after('<td><input><input/></td>');

change the for (where you produces the cells) as

for (var c = 1; c <= cols; c++) {
    var cellText = "Cell " + r + "." + c
    var td = $("<td>")
        .addClass("tableCell")
        .text(cellText)
        .data("col", c)
        .appendTo(trow);

    $('<input />').appendTo(td);
}