How can I dynamically generate a table row with it's tds?

Question

I have a table like this:

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

I have some input fields and user inserts some information there. After that, I want to dynamically add a tr to the top of my table. I mean I want to generate that:

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

with information of 310(is unique for td 1 and td 2), 318 and 314. You can set ids for tds.

How can I generate dynamiacally a table row with it's tds that I will set the name, value and etc. attributes?

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

I made an answer to you problem here: http://jsfiddle.net/wEVbU/

you can add on to that function to do whatever you want to whatever table

here is the whole function that is there:

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);
}