文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >动态追加html表单元格

问动态追加html表单元格
EN

Stack Overflow用户
提问于 2016-01-15 15:30:59
回答 1查看 535关注 0票数 0

我正在创建一个响应性的桌子：

代码语言：javascript
复制
<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>

在追加特定输入时，我使用以下脚本循环遍历表单元格：

代码语言：javascript
复制
$(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" />');
    });
});

})；

我的问题是:在添加表行时，这基本上是实现动态修改单元格的最有效和最有效的方法吗？

jquery
html
html-table
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-15 15:50:35

我的建议是：

​

代码语言：javascript
复制
$(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)');
  }
});
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34814497

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档