Как я могу динамически генерировать строку таблицы с ее TDS? - PullRequest
Новая
       11

Как я могу динамически генерировать строку таблицы с ее TDS?

1 голос
/ 03 марта 2011

У меня есть такая таблица: 

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

Как я могу динамически сгенерировать строку таблицы с ее tds, чтобы я установил атрибуты name, value и т. Д.?

Ответы [ 3 ]

3 голосов
/ 03 марта 2011

быстрый грязный способ заключается в использовании метода jquery prepend () для вставки любого html-кода в верхнюю часть tbody, например 

$("#mytable tbody").prepend($("<tr><td>cell1</td><td>cell2</td></tr>"));
1 голос
/ 09 сентября 2017

Вы можете сделать это с помощью функции prepend, например. 

$('#TableName').prepend($("<tr><td>Name</td> <td>Address</td></tr>"));
1 голос
/ 03 марта 2011

Я сделал ответ на вашу проблему здесь: 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);
}
...