应请求向HTML表中添加更多行
Adding more rows to a HTML table on request
我目前正在用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>
相关文章:
- 向多维数组添加值和从多维数组请求值
- Angular js-尚未添加PUT请求到服务的URL
- 只需添加一个'允许跨来源请求'到我的节点应用程序工作
- 如果我对一个文件发出ajax GET请求,我会得到什么以及如何将其添加到页面中
- 在 JavaScript 上添加请求标头
- 添加好友 Ajax,然后更改为好友请求
- 在 http 请求中添加事件侦听器 ( request.on ) 是什么意思?而笏就是它的用途
- 如何将头添加到ActiveResource以创建API请求
- 如何添加api令牌作为我向api发出的每个HTTP请求的用户名
- 如何将客户端进度侦听器添加到 JSF 2.2 ajax 请求中
- 微风-向请求添加标头
- 如何在Node.js中向Post请求添加查询
- 向ajax json请求添加缓存
- 在提交表格时IE8赢得了't将来自输入的属性以外的属性添加到请求中
- 将ajax请求添加到上一个ajax请求所附加的元素中
- 尝试向 jQuery AJAX 请求添加延迟
- 如何在 angularjs 中的简单获取请求 json 之后添加事件侦听器
- 添加请求头到XmlHttpRequest与剑道UI上传控件
- 使用jQuery添加请求头的正确方法
- angular js在每个http请求$http上添加请求参数