双层的表格动态加减嵌套

摘要:动态加减table、同时里面动态加减tr

代码如下


<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="post.php" method="POST">
  <div class="form-group col-md-10 container">
<table class="table table-bordered">
    <caption style="text-align: center;"><strong>OKR</strong><a class="btn btn-info btn-xs" onclick="add_big_table(this)" title="Add">[+]</a>
             </caption>
      <thead>
        <tr class="danger">
          <th>Objective</th>
          <th>Percent(%)</th>
          <th>Self-Score</th>
          <th>Self-Remark</th>
          <th>    Score</th>
          <th>    Remark</th>
          <th>    ADD/DEL</th>

        </tr>
      </thead>
      <tbody id='ini_t_body'>
                <tr class="info">
                  <td><b><input type="text" class="form-control"  name="obj_name[0][]" value="Manager Review" readonly="true"></b></td>
                  <td><b><input type="text" class="form-control"  name="percent[0][]" value="20" readonly="true"></b></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>
                  <a class="btn btn-info btn-xs" onclick="add_split_table(this)" title="Add">[+]</a>
                  </td>
                </tr>
        <tr>
          <td><textarea type='text' class="form-control" name="okr_content[0][]"></textarea></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>
                  <a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>
          </td>
        </tr>
      </tbody>
      
    </table>
  </div>
  <script>
    var e_okr_num = 0;
    function add_split_table(obj){
                  var table_html = '        <tr>\n'
                + '          <td><textarea type=\'text\' class="form-control" name="okr_content['+ e_okr_num + '][]"></textarea></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td>\n'
                + '              <a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>\n'
                + '          </td>\n'
                + '        </tr>';
                $(obj).parent().parent().parent().append(table_html);
    }
    function del_split_table(obj){
      $(obj).parent().parent().remove();
    }
        function add_big_table(obj){
            e_okr_num++;
            var html='      <tbody id=\'ini_t_body\'>\n'
                + '                <tr class="info">\n'
                + '                  <td><b><input type="text" class="form-control" value="" name="obj_name['+ e_okr_num + '][]"></b></td>\n'
                + '                  <td><b><input type="text" class="form-control" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,\'\');}).call(this)" maxlength="5" name="percent['+ e_okr_num + '][]"></b></td>\n'
                + '                  <td></td>\n'
                + '                  <td></td>\n'
                + '                  <td></td>\n'
                + '                  <td></td>\n'
                + '                  <td>\n'
                + '          \t\t<a class="btn btn-info btn-xs" onclick="add_split_table(this)" title="Add">[+]</a>\n'
                + '          \t\t<a class="btn btn-danger btn-xs" onclick="del_big_table(this)" title="Delete">[x]</a>\t</td>\n'
                + '                </tr>\n'
                + '        <tr>\n'
                + '          <td><textarea type=\'text\' class="form-control" name="okr_content['+ e_okr_num + '][]"></textarea></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td></td>\n'
                + '          <td>\n'
                + '          \t\t<a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>\n'
                + '          </td>\n'
                + '        </tr>\n'
                + '      </tbody>';
                $('tbody:last').after(html);
        }
        function del_big_table(obj){
          $(obj).parent().parent().parent().remove();
        }
  </script>
  <input type="submit">
评论
  • 2018-11-21 18:31:21 by Eric Guo
    核心思想是使用name='字段【自增数字】【】'