Добавить строку таблицы в jQuery - PullRequest
Новая
       225

Добавить строку таблицы в jQuery

2251 голосов
/ 05 октября 2008

Какой лучший способ в jQuery добавить дополнительную строку в таблицу в качестве последней строки?

Это приемлемо? 

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Существуют ли ограничения на то, что вы можете добавить в таблицу, подобную этой (например, ввод, выбор, количество строк)?

Ответы [ 35 ]

1 голос
/ 12 мая 2019

Ответы выше очень полезны, но когда учащийся ссылается на эту ссылку, чтобы добавить данные из формы, ему часто требуется образец.

Я хочу добавить пример, получить входные данные от и использовать .after() для вставки tr в таблицу, используя строку interpolation. 

function add(){
  let studentname = $("input[name='studentname']").val();
  let studentmark = $("input[name='studentmark']").val();

  $('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}


function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();

$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick="add()" value="Add new" />
</form>
<table id='student'>
  <thead>
    <th>Name</th>
    <th>Mark</th>
  </thead>
</table>
</body>
</html>
1 голос
/ 26 марта 2019

Попробуйте это: очень простой способ 

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>
1 голос
/ 05 февраля 2019

Добавить строку таба с помощью JQuery:

если вы хотите добавить строку после последней дочерней строки таблицы , вы можете попробовать это 

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

если вы хотите добавить строку 1-й дочерний элемент таблицы , вы можете попробовать это 

$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
0 голосов
/ 18 августа 2018

СОВЕТ: Вставка строк в html table через innerHTML or .html() недопустима в некоторых браузерах (аналогично IE9), и использование .append("<tr></tr>") не является хорошим предложением в любом браузере. лучший и самый быстрый способ использует коды pure javascript.

для объединения таким образом с jQuery, добавьте только новый плагин, подобный этому jQuery: 

$.fn.addRow=function(index/*-1: add to end  or  any desired index*/, cellsCount/*optional*/){
    if(this[0].tagName.toLowerCase()!="table") return null;
    var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
    for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
    return $(r);
};

А теперь используйте весь проект, подобный этому: 

var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);
0 голосов
/ 30 марта 2017

Это также можно сделать: 

$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
Страница:
...