想要根据项目选择和项目大小选择创建行和列想要动态创建与下面的 HTML 表相同

【问题标题】：Want create rows and columns based on item selection and item size selection want to create same as below HTML table dynamically想要根据项目选择和项目大小选择创建行和列想要动态创建与下面的 HTML 表相同
【发布时间】：2014-04-24 06:58:34
【问题描述】： 
    <!DOCTYPE html>
    <html>
    <head>
        <title>table</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    </head>
    <style>
    .err{border:1px solid red; outline:none;}
    .txtfld:readonly{border:none;}
    .txtfld{ width:50px;}
    </style>
    <body>
                    <div><span>Items:<br>
                    <select class="items">
                    <option value="">Select Items</option>
                    <option value="">Items 6356</option>
                    <option value="">Items 5700</option>
                    <option value="">Items 500</option>
                    </select>
                    </div>
                    <input type="button" value="Add Items"/>
                    <hr>
                    <div>Item sizes:<br>
                    <p><input type="checkbox"> 8x10 in</p>
                <p><input type="checkbox"> 8x10 in Mammo</p>
                <p><input type="checkbox"> 10x12 in</p>
                <p><input type="checkbox"> 10x12 in Memmo</p>
                <p><input type="checkbox"> 11x14 in</p>
                <p><input type="checkbox"> 14x14 in</p>
                <p><input type="checkbox"> 14x17 in</p>
                    </div>
                    </span>
                    <table width="580" border="1" class="printer-row">
                                       <tbody><tr>
                                         <td>&nbsp;</td>
                                         <td>8X10 in</td>
                                         <td>10X12 in</td>
                                         <td>8X10 in Memmo</td>
                                         <td>10X12 in Memmo</td>
                                         <td>11X14 in</td>
                                         <td>14X14 in</td>
                                         <td>14X17 in</td>
                                         <td>Total sheets/year</td>
                                       </tr>
                                       <tr>
                                         <td>Item 5700</td>
                                         <td><input type="text" class="txtfld" placeholder="edit" readonly=""></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td>&nbsp;</td>
                                       </tr>
                                       <tr>
                                         <td>Item 5700</td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td>&nbsp;</td>
                                       </tr>
                                       <tr>
                                         <td>Item 400</td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td>&nbsp;</td>
                                       </tr>
                                       <tr>
                                         <td>Item 3000</td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td><input type="text" class="txtfld" placeholder="edit"></td>
                                         <td>&nbsp;</td>
                                       </tr>
                                       <tr>
                                         <td>Total sheets/year</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                         <td>&nbsp;</td>
                                       </tr>
                                     </tbody></table>

    </body

> Blockquote

    </html>

我想根据项目选择选项创建表格行和列“添加更多”按钮将根据我想创建具有所选项目名称的行的所选项目附加“新项目”。在第二种情况下，基于“项目大小”复选框，我需要创建具有各自名称的列”，您可以参考 HTML 表进行更多说明

【问题讨论】：

  • 您已经尝试过的代码忘记粘贴了，请也粘贴一下。
  • 我只发布了 html。我需要 js 功能来满足需求，请帮忙。

标签： javascript jquery html css


【解决方案1】：

检查此代码，我已添加该功能

检查点： - 我添加了一个 javascript 函数 add_row() 并在单击添加按钮时调用。

  • 我为选择下拉菜单添加了价值。

    表

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
function  add_row() {
      var row_name = $('select').val();

      if (row_name != "") {
            var row = $('<tr><td>' + row_name + '</td></tr>');

            $('input[type="checkbox"]').each(function() {

              if ($(this).is(':checked')) {
                 row.append('<td><input class="txtfld" type="text" placeholder="edit"></td>')
              } else {
                   row.append('<td></td>')
              }

          })
          row.append('<td></td>')
        $("table.printer-row tbody tr:last").before(row)
      }
    }

</script>
</head>
<style>
.err{border:1px solid red; outline:none;}
.txtfld:readonly{border:none;}
.txtfld{ width:50px;}
</style>


<body>
                <div><span>Items:<br>
                <select class="items">
                <option value="">Select Items</option>
                <option value="Items 6356">Items 6356</option>
                <option value="Items 5700">Items 5700</option>
                <option value="Items 500">Items 500</option>
                </select>
                </div>
                <input type="button" value="Add Items" onclick="add_row();">
                <hr>
                <div>Item sizes:<br>
                <p><input type="checkbox"> 8x10 in</p>
            <p><input type="checkbox"> 8x10 in Mammo</p>
            <p><input type="checkbox"> 10x12 in</p>
            <p><input type="checkbox"> 10x12 in Memmo</p>
            <p><input type="checkbox"> 11x14 in</p>
            <p><input type="checkbox"> 14x14 in</p>
            <p><input type="checkbox"> 14x17 in</p>
                </div>
                </span>
                <table width="580" border="1" class="printer-row">
                                   <tbody><tr>
                                     <td>&nbsp;</td>
                                     <td>8X10 in</td>
                                     <td>10X12 in</td>
                                     <td>8X10 in Memmo</td>
                                     <td>10X12 in Memmo</td>
                                     <td>11X14 in</td>
                                     <td>14X14 in</td>
                                     <td>14X17 in</td>
                                     <td>Total sheets/year</td>
                                   </tr>
                                   <tr>
                                     <td>Item 5700</td>
                                     <td><input type="text" class="txtfld" placeholder="edit" readonly=""></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td>&nbsp;</td>
                                   </tr>
                                   <tr>
                                     <td>Item 5700</td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td>&nbsp;</td>
                                   </tr>
                                   <tr>
                                     <td>Item 400</td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td>&nbsp;</td>
                                   </tr>
                                   <tr>
                                     <td>Item 3000</td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td><input type="text" class="txtfld" placeholder="edit"></td>
                                     <td>&nbsp;</td>
                                   </tr>
                                   <tr>
                                     <td>Total sheets/year</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                     <td>&nbsp;</td>
                                   </tr>
                                 </tbody></table>

</body> Blockquote

</html>

【讨论】：

猜你喜欢
  • 2019-02-06
  • 1970-01-01
  • 1970-01-01
  • 2012-04-30
  • 2018-01-11
  • 1970-01-01
  • 2015-02-19
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode