单击按钮时添加带有附加数据的表行
Add Table Row With Appended Data On Button Click
这是对上一个问题的扩展 动态附加 html 表格单元格,并且 html 略有更改。
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<select id="e1">
<option value="1">Name 1</option>
<option value="2">Name 2</option>
<option value="3">Name 3</option>
</select>
</td>
<td>
<select id="e2">
<option value="#00ff00">Complete</option>
<option value="#ffff00">In Progress</option>
<option value="#ff0000">Incomplete</option>
</select>
</td>
<td>
<input type="datetime" />
</td>
<td>
<input type="text" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Add Row" />
更新后的 jsfiddle 是 https://jsfiddle.net/marcwebdude/48ng08tq/13/。问题是第 47-64 行的追加函数会自动追加一行。
$(function () {
var rowTamplate = $('table.tablesaw tbody tr').eq(0);
var rowContent = [
'<input type="text" value="Name" />',
'<input type="text" value="Title" />',
'<select><option>Name 1</option><option>Name 2</option><option>Name 3</option></select>',
'<select><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select>',
'<input type="datetime" value="Select Date" />',
'<input type="text" />'
];
var rowToadd = rowTamplate.clone();
rowToadd.find('td').each(function (index, element) {
$(element).append(rowContent[index]);
});
rowToadd.insertAfter('table.tablesaw tr:eq(2)');
for (var i = 0; i < 10; i++) {
rowToadd.clone().insertAfter('table.tablesaw tr:eq(2)');
}
我正在寻找一种解决方案,当单击按钮时,它会添加一行并附加 html。不要在当前存在的行之后自动添加它。例如,如果此表为空,则单击按钮将添加一行,其中包含这 6 个指定列以及与每个单元格重合的输入。
我现有脚本的第二个问题是它没有格式化附加的 html,当手动将一行添加到 html 文件中时,它的格式正确,但如果通过 jquery 附加它,则不会。
更新的
jsfiddle 与修订的 jquery 是 https://jsfiddle.net/marcwebdude/48ng08tq/73/,到目前为止,它正确地将内容附加到表中。这是 html
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Add Row" id="button" />
</div>
这是jquery。
$(document).ready(function () {
$('#button').on('click', function(){
$('.tablesaw').find('tbody').append($('<tr><td><input type="text" value="Name" /></td><td class="title"><input type="text" value="Title" /></td><td><select class="e1"><option value="0">-- User --</option><option>Name 1</option><option>Name 2</option><option>Name 3</option></select></td><td><select class="e2"><option value="#fff">-- Status --</option><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select></td><td><input type="datetime" value="Select Date" /></td><td><input type="text" /></td></tr>'));
$('.e1').select2();
$('.e2').select2().on('change', function () {
$(this).next()
.find('.select2-selection')
.css({ backgroundColor: this.value });
}).trigger('change');
});
});
这会将正确的数据附加到每个单元格中,并在创建行后继承样式。
相关文章:
- 如何将数据从onclick按钮传递到变量
- 单击按钮时加载数据
- 当使用ajax并将html数据保存为对象时,收听浏览器返回按钮.好的或坏的
- 创建按钮,根据表单字段中的数据获取特定的URL
- 解耦按钮(两个按钮同时切换),并根据数据显示相应的按钮
- HTML按钮刷新页面而不是将数据发送到数据库
- 数据切换=“;按钮”;在JavaScript中无法识别引导程序单选按钮
- 数据应该只显示与我单击的按钮有关的信息
- 如何根据某些条件向可编辑的jquery数据表添加或删除按钮
- 如何将按钮的数据属性设置为输入[type=text]中设置的任何值
- 单击按钮即可显示带有提取的json数据的表
- 基于单选按钮和复选框的数据表排序
- 美国地图插件,具有状态数据/悬停功能的新按钮
- 如何在单击按钮时将页面中所有文本字段中的数据更改为大写
- 在“加载更多”按钮函数中包含 JSON 数据
- 当文本框中包含数据时禁用按钮
- 按钮在第一次成功的 ajax 数据加载后不起作用
- 当我单击它时,没有检查带有数据切换=选项卡的单选按钮
- 输入文件-更改数据按钮文本的文本按钮
- 加载更多数据按钮主干