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

我在这里回答了你的问题： 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);
}

Answer 3

您可以使用前置功能来完成，例如。

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

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

3 个答案: