怎么用jQuery给Table添加行

可以使用jQuery的`append()`方法来添加表格行。

假设我们有一个表格：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

我们可以使用以下代码来添加一行数据：

// 创建一个新的表格行
var newRow = $("<tr>");
// 创建新的单元格并添加到行中
var nameCell = $("<td>").text("小刚");
var ageCell = $("<td>").text("22");
newRow.append(nameCell);
newRow.append(ageCell);
// 将新行添加到表格中
$("#myTable tbody").append(newRow);

这将在表格的最后添加一行，其中包含姓名为“小刚”，年龄为“22”的数据。

相关问题

jquery 动态往table添加行

### 回答1：
使用jQuery可以通过以下步骤动态往table添加行：

1. 创建一个新的行元素，可以使用jQuery的`$('<tr>')`方法来创建一个新的行元素。

2. 在新的行元素中添加需要显示的数据，可以使用jQuery的`append()`方法来添加数据。

3. 将新的行元素添加到table中，可以使用jQuery的`append()`方法将新的行元素添加到table中。

示例代码如下：

// 获取table元素
var table = $('#myTable');

// 创建新的行元素
var newRow = $('<tr>');

// 在新的行元素中添加数据
newRow.append($('<td>').text('John'));
newRow.append($('<td>').text('Doe'));
newRow.append($('<td>').text('25'));

// 将新的行元素添加到table中
table.append(newRow);

以上代码会在名为`myTable`的table中添加一行数据，该行数据包含三列，分别为`John`、`Doe`和`25`。

### 回答2：
jQuery是一种非常流行的JavaScript库，它为网页开发带来了许多便利，包括动态向HTML表格中添加行。下面将介绍如何使用jQuery动态添加表格行。

首先，我们需要创建一个空的HTML表格，并指定一个ID。例如：

<table id="myTable">
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <th>列名3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

接下来，在JavaScript中使用jQuery选择器来选择我们新建的表格：

var table = $("#myTable");

然后，我们可以使用jQuery的append()方法向表格中添加行。例如，下面代码将向表格中添加一行：

table.find('tbody').append('<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>');

在这个例子中，我们使用了jQuery的find()方法来选择表格的tbody元素，因为我们只想向表格的主体中添加行（即忽略表头）。然后，使用append()方法来向tbody元素添加一个包含三个单元格的行，每个单元格中包含一些内容。

如果我们需要每次添加多行，可以使用一个for循环来迭代添加：

for (var i = 0; i < data.length; i++) {
  table.find('tbody').append('<tr><td>' + data[i].value1 + '</td><td>' + data[i].value2 + '</td><td>' + data[i].value3 + '</td></tr>');
}

在这个例子中，我们假设data是一个包含多行数据的数组，并迭代使用一个for循环将每个数据行添加到表格中。

最后，我们可以把所有这些代码放在一个函数中，以方便随时调用：

function addTableRow(table, rowData) {
  table.find('tbody').append('<tr><td>' + rowData.value1 + '</td><td>' + rowData.value2 + '</td><td>' + rowData.value3 + '</td></tr>');
}

现在，每当我们需要向表格中添加新行，只需调用这个函数，并将tabe和rowData作为参数传入即可。

总之，使用jQuery动态向表格中添加行非常容易，只需使用jQuery的append()方法即可实现。但是，我们需要指定正确的表格和行数据，在此之前请确保正确地理解了以上例子。

### 回答3：
jQuery是一种非常流行的JavaScript库，可以方便地操作HTML文档，动态地向table添加行也是jQuery的强项之一。

动态往table添加行通常分为两个步骤：首先是创建一行添加到table中，然后是设置这行中单元格的内容。

首先，我们可以使用jQuery的append()方法，将一个新的行添加到table中。具体步骤如下：

1. 选择table标签的jQuery对象。
例如，如果我们的表格id为“myTable”，可以使用如下代码选择它：

var table = $('#myTable');

2. 创建一个新的行元素。
我们可以使用jQuery的.createElement()方法来创建一个新的tr元素：

var row = $('<tr>');

3. 将该行元素添加到table中。
可以使用jQuery的.append()方法，将这个新行添加到表格中：

table.append(row);

这样就完成了添加新行的第一步，接下来我们需要向表格中的新行添加单元格。

1. 创建一个新的单元格元素。
可以使用jQuery的.createElement()方法来创建一个新的td元素：

var cell1 = $('<td>');
var cell2 = $('<td>');

2. 设置单元格内的内容。
使用jQuery的.text()方法设置单元格内的文本，例如：

cell1.text('This is cell 1');
cell2.text('This is cell 2');

3. 将单元格元素添加到行元素中。
可以使用jQuery的.append()方法将单元格元素添加到行元素中：

row.append(cell1);
row.append(cell2);

现在，我们已经完成了动态往table添加行的全部步骤。完整的代码如下所示：

var table = $('#myTable');
var row = $('<tr>');
var cell1 = $('<td>');
var cell2 = $('<td>');
cell1.text('This is cell 1');
cell2.text('This is cell 2');
row.append(cell1);
row.append(cell2);
table.append(row);

通过这些简单的操作，我们可以轻松地向table添加任意数量的行和单元格。当然，我们也可以在代码中使用循环来动态地生成多个行，从而更加灵活地应对不同的需求。

jquery table 行添加单击高亮展示事件

可以通过以下代码实现：

$(document).ready(function() {
  // 给表格的每一行添加单击事件
  $('table tr').click(function() {
    // 移除其他行的高亮效果
    $('table tr').removeClass('highlight');
    // 给当前行添加高亮效果
    $(this).addClass('highlight');
  });
});

其中，我们给表格的每一行添加了一个单击事件，当点击某一行时，先移除其他行的高亮效果，再给当前行添加高亮效果。我们可以通过 CSS 样式来定义高亮效果，例如：

.highlight {
  background-color: yellow;
}

这样，当点击某一行时，该行的背景颜色就会变成黄色。