动态附加html表格单元格 [英] Dynamically append html table cell
本文介绍了动态附加html表格单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个响应表：
I am creating a responsive table:
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
<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-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-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="3">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Button Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">Created</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Description</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Pedecessors</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Priority</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Related Items</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Start Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Task Group</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Created By</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified By</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><a href="#"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
在附加特定输入时，我使用此脚本循环遍历表格单元格：
While appending specific inputs, I am cycling through the table cells with this script:
$(document).ready(function(){
$('table.tablesaw tbody tr').each(function(){
$('tr td').each(function(){
$('.title').append().html('<input type="text" />')
.next().append().html('<input type="text" />')
.next().append().html('<select><option></option><option></option><option></option></select>')
.next().append().html('<select><option></option><option></option><option></option></select>')
.next().append().html('<input type="datetime" value="Select Date" />')
.next().append().html('<select><option></option><option></option><option></option></select>')
.next().append().html('<input type="datetime" value="Select Date" />')
.next().append().html('<input type="text" />')
.next().append().html('<input type="datetime" value="Date" />')
.next().append().html('<input type="text" />')
.next().append().html('<select><option></option><option></option><option></option></select>')
.next().append().html('<input type="text" />')
.next().append().html('<input type="datetime" value="Date" />')
.next().append().html('<input type="text" />')
.next().append().html('<input type="text" />')
.next().append().html('<input type="text" />')
.next().append().html('<input type="range" />');
});
});
}）;
我的问题：
这是否是添加表行时动态修改单元格的最有效和最有效的方法？
My question: Is this essentially the most effective and efficient method to accomplish dynamically modifying the cells whenever table rows are added?
推荐答案
我的建议是：
$(function () {
var rowTamplate = $('table.tablesaw tbody tr').eq(0);
var rowContent = ['<input type="text" />','<input type="text" />','<select><option></option><option></option><option></option></select>',
'<select><option></option><option></option><option></option></select>', '<input type="datetime" value="Select Date" />',
'<select><option></option><option></option><option></option></select>', '<input type="datetime" value="Select Date" />',
'<input type="text" />', '<input type="datetime" value="Date" />', '<input type="text" />', '<select><option></option><option></option><option></option></select>',
'<input type="text" />', '<input type="datetime" value="Date" />', '<input type="text" />', '<input type="text" />', '<input type="text" />', '<input type="range" />'];
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)');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
<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-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-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="3">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Button Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">Created</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Description</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Pedecessors</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Priority</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Related Items</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Start Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Task Group</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Created By</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified By</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><a href="#"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="title"><a href="#"></a><input type="text" value="1"></td>
<td><input type="text" value="1"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="datetime" value="Select Date"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="datetime" value="Select Date"></td>
<td><input type="text"></td>
<td><input type="datetime" value="Date"></td>
<td><input type="text"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="text"></td>
<td><input type="datetime" value="Date"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="range"></td>
</tr>
<tr>
<td class="title"><a href="#"></a><input type="text" value="2"></td>
<td><input type="text" value="2"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="datetime" value="Select Date"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="datetime" value="Select Date"></td>
<td><input type="text"></td>
<td><input type="datetime" value="Date"></td>
<td><input type="text"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="text"></td>
<td><input type="datetime" value="Date"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="range"></td>
</tr>
<tr>
<td class="title"><a href="#"></a><input type="text" value="3"></td>
<td><input type="text" value="3"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="datetime" value="Select Date"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="datetime" value="Select Date"></td>
<td><input type="text"></td>
<td><input type="datetime" value="Date"></td>
<td><input type="text"></td>
<td><select><option></option><option></option><option></option></select></td>
<td><input type="text"></td>
<td><input type="datetime" value="Date"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="range"></td>
</tr>
</tbody>
</table>
这篇关于动态附加html表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
