应请求向HTML表中添加更多行

Adding more rows to a HTML table on request

本文关键字：添加 请求 HTML      更新时间：2023-09-26

我目前正在用HTML/jQuery/CSS制作一个类似excel的网格。

我想知道是否有办法在用户请求上添加更多行(单击按钮或其他东西)。

我在JS上看到过一些HTML DOM的例子，但我不知道它是否可以在jQuery中使用。如果能给我一个简单的例子，我就很感激了。

使用下面的代码来理解并根据您的需要进行修改

function addRow(){
  
  var str ="<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr>";
  
  $('#mytable tbody').append(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="mytable" border="1">
  <thead>
    <tr>
    <th>Head 1</h1>
    <th>Head 1</h1>
    <th>Head 1</h1>
   </tr>
   
</thead>
<tbody>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  </tbody>
    </table>
      
    <input type="button" value="Add" onclick="addRow()" />

我会给你一些起点朋友，首先你可能需要学习/使用ajax，所以你可以沟通到你的服务器端语言，如果你需要通过mysql或任何数据库获取数据。

然后你可以使用javascript通过DOM操作附加ajax响应。

阅读jquery DOM操作。

编辑

你的流程应该是这样的。

  • 通过jquery .click()为button onclick事件添加处理程序，该处理程序应包含ajax请求$.ajax()。
  • 通过$.ajax()上的"success"参数检测ajax成功
  • 然后通过DOM将响应数据附加到容器中append。

HTML

<table id="someTable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>
<button id="newrow">+</button>

JS 

$(document).ready(function()
                  {
                      var table = $('#someTable'), 
                          newRow = '<tr><td>New Row Val</td><td>New Row Val</td></tr>';
                     $('#newrow').on('click', function(e)
                                     {
                                         table.find('tbody').append(newRow);
                                     });
                  });

http://jsfiddle.net/vw437k03/1/展示了一个非常非常基本的例子，我认为你想要的。

使用提供的代码从AJAX或表单加载数据。

p。S look @ slikgrid—http://mleibman.github.io/SlickGrid/examples/example-spreadsheet.html

尝试遵循本教程。我认为你正在尝试做同样的事情，在这个教程。它提供了关于在表中创建、编辑和删除行的详细信息。

下面是使用jQuery轻松添加新行到表的代码。

function Add(){
	$("#tblData tbody").append(
		"<tr>"+
		"<td><input type='text' /></td>"+
		"<td><input type='text'/></td>"+
		"<td><input type='text'/></td>"+
		"</tr>");
}; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAddd" onclick="Add()">New</button>
<table id="tblData">
	<thead>
		<tr>
			<th>Name</th>
			<th>Phone</th>
			<th>Email</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

相关文章：