如何使用tds动态生成表行？

Question

我有一张这样的桌子：

<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">      
  <td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
  <td align="center" class="styleOdd">377</td>
  <td align="center" class="styleOdd"></td>
  <td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">     
  <td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
  <td align="center" class="styleEven">386</td>
  <td align="center" class="styleEven"></td>
  <td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">     
  <td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
  <td align="center" class="styleEven">322</td>
  <td align="center" class="styleEven"></td>
  <td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>

我有一些输入字段，用户在其中插入了一些信息。 之后，我想将tr动态添加到表的顶部。 我的意思是我想生成：

<tr style="color: blue;" id="bankRecord310">     
  <td align="center" class="styleEven"> <input type="checkbox" value="310" name="386"></td>
  <td align="center" class="styleEven">318</td>
  <td align="center" class="styleEven"></td>
  <td align="center" class="styleEven">314</td>
</tr>

信息310（对于td 1和td 2是唯一的），318和314。您可以为tds设置ID。

我如何动态生成带有tds的表行，以设置名称，值等属性？

Answer 1

一种快速的肮脏方法是使用jquery prepend（）方法将任何html代码插入tbody的顶部，例如

$("#mytable tbody").prepend($("<tr><td>cell1</td><td>cell2</td></tr>"));

Answer 2

例如，您可以使用前置功能来做到这一点。

$('#TableName').prepend($("<tr><td>Name</td> <td>Address</td></tr>"));

Answer 3

我在这里回答了您的问题： http : //jsfiddle.net/wEVbU/

您可以添加到该函数以对表执行任何操作

这是那里的整个功能：

function addTR(id, name, value1, value2, value3, className) {
    $td = $("<td>", {
        style: "text-align: center",
        class: className
    })
    $tr = $("<tr>", {
        style: "color: blue;",
        id: id
    })
    $tr.append($td);
    $tr.append($td.clone());
    $tr.append($td.clone());
    $tr.append($td.clone());
    $($tr.children()[0]).append($("<input>", {
        type: "checkbox",
        value: value1,
        name: name
    }))
    $($tr.children()[1]).html(value2)
    $($tr.children()[3]).html(value3)
    $('#myTable').prepend($tr);
}