数据输入表,希望添加“新建单元格”按钮,每次单击时生成一个新行

时间:2017-08-15 11:06:25

标签: javascript jquery html css bootstrap-4

<body>

  <div id="wrapper">
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">

            <h1 align="center">Controls Page</h1>
            </br>
            <main>
              <section id="with-container-example">
                <!-- table -->
                <div class="container">
                  <div class="row">
                    <div class="table-responsive">

                      <!-- Table Titles -->
                      <table class="table table-hover">
                        <thead>
                          <tr class="alert-info">
                            <!-- <button type="button" class="btn" onclick="alert('All information saved!')">Save All</button><br></br> -->
                            <input type="button" class="btn" value="Save" style="float: right;" onclick="alert('All information saved!')"><br></br>
                            <th>TEXT:</th>
                            <th>~</th>
                            <th>~</th>
                            <th>DROPDOWN</th>
                            <th>DROPDOWN</th>
                            <th>TEXT:</th>
                            <th>TEXT:</th>
                            <th>TEXT:</th>
                            <th> ADD CELL(+)
                              </>
                          </tr>
                        </thead>

                        <!-- Tables -->
                        <tbody id="myTable">
                          <tr>
                            <td>A65.1</td>
                            <td>Table Cell</td>
                            <td>Control <br> Conflictin duties and area of responsibilities .......</td>
                            <td align="center">
                              <select id="selectbasic" name="selectbasic" class="selectpicker">
                                                        <option>-</option>
                                                        <option>Yes</option>
                                                        <option>No</option>
                                                    </select>
                            </td>
                            <td align="center">
                              <select id="selectbasic" name="selectbasic" class="selectpicker">
                                                        <option>-</option>
                                                        <option>Yes</option>
                                                        <option>No</option>
                                                        <option>Partially</option>
                                                    </select>
                            </td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                          </tr>
                          <tr>

                            <td>2</td>
                            <td>Table cell</td>
                            <td>Control <br><textarea rows="3" cols="60">Conflictin duties and area of responsibilities .......
                                                    </textarea></td>
                            <td align="center">
                              <select id="selectbasic" name="selectbasic" class="selectpicker">
                                                        <option>-</option>
                                                        <option>Yes</option>
                                                        <option>No</option>
                                                    </select>
                              <td align="center">
                                <select id="selectbasic" name="selectbasic" class="selectpicker">
                                                        <option>-</option>
                                                        <option>Yes</option>
                                                        <option>No</option>
                                                        <option>Partially</option>
                                                    </select>
                              </td>
                              <td>Table cell</td>
                              <td>Table cell</td>
                              <td>Table cell</td>
                          </tr>
                          <tr>

                            <td>3</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td align="center">
                              <select id="selectbasic" name="selectbasic" class="selectpicker">
                                                        <option>-</option>
                                                        <option>Yes</option>
                                                        <option>No</option>
                                                    </select>
                              <td align="center">
                                <select id="selectbasic" name="selectbasic" class="selectpicker">
                                                        <option>-</option>
                                                        <option>Yes</option>
                                                        <option>No</option>
                                                        <option>Partially</option>
                                                    </select>
                              </td>
                              <td>Table cell</td>
                              <td>Table cell</td>
                              <td>Table cell</td>
                          </tr>
                          <tr>

Demo

我可以提供的完整开放代码将在代码笔链接中。

我设计这个项目的目的是添加“文本字段”所在的文本框,然后放置“新单元格”按钮,我希望在下面构建另一列。如果可以在文本框中放置帮助或添加爵士乐,请听取所有建议!

谢谢

1 个答案:

答案 0 :(得分:0)

我确实做到了这一点。一种方法是在单击某个元素后使用jQuery append一个新行。请参阅以下代码:

jQuery(document).ready(function(){
    var i = 1;
    jQuery(".addRow").on('click', function(){
        i++; 
        jQuery('tbody').append('<tr><td><input type="file" name="'+i+'" id="attachment"></td></tr>');
    });
});

请注意,您需要在要点击的元素上添加ClassID以添加新行。