📌  相关文章
📜  jquery 创建新行表 - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:14.723000             🧑  作者: Mango

Jquery 创建新行表- Javascript

Jquery是一个非常流行的Javascript库，它简化了用Javascript编写代码的过程。使用Jquery，您可以轻松地在网页中创建新的表格行，而不必手动编写HTML和CSS。在本文中，我们将探讨如何使用Jquery创建新的表格行。

步骤
1. 首先，引入Jquery

引入Jquery库是非常重要的。您可以通过CDN（内容分发网络）或从本地文件中引入Jquery。以下是引入CDN的示例代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2. 创建一个表格

在这个例子中，我们将创建一个具有两行两列的表格。请注意，我们将用“id”为“myTable”的HTML元素引用此表格，以便稍后可以将新行添加到该表格中。

以下是我们将使用的HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
  </tbody>
</table>
3. 添加新行

现在，我们将使用Jquery将新行添加到表格中。要添加新行，请使用以下代码：

//创建一个新的tr元素
var newRow = $("<tr>");
//在新行中添加两个新的td元素
var cols = "";
cols += '<td>New Row, Column 1</td>';
cols += '<td>New Row, Column 2</td>';
newRow.append(cols);

// 在表的主体中添加新行
$("#myTable").append(newRow);

此代码将创建一个新的元素，并向其中添加两个新的元素。然后，代码将它们添加到表格的主体中。

完整代码

以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
    <title>Jquery create new table row - JavaScript</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // 添加新行到表格中
            $("#btnAdd").click(function () {
                //创建一个新的tr元素
                var newRow = $("<tr>");
                //在新行中添加两个新的td元素
                var cols = "";
                cols += '<td>New Row, Column 1-1</td>';
                cols += '<td>New Row, Column 2-1</td>';
                newRow.append(cols);

                // 在表的主体中添加新行
                $("#myTable").append(newRow);
            });
        });
    </script>
</head>
<body>

    <table id="myTable">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
            </tr>
        </tbody>
    </table>

    <input type="button" id="btnAdd" value="Add Row" />

</body>
</html>
总结

使用Jquery可以轻松地在HTML表格中添加新的行。首先，您需要引入Jquery库，然后创建一个具有ID的表格。最后，使用Jquery将新行添加到表格中。