JS 点击按钮增加文本框

一、增加到指定表格ID

id="tab" cellpadding="0" cellspacing="0" >

<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript">
  添加一行、删除一行封装方法///
  /**
   * 为table指定行添加一行
   *
   * tab 表id
   * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
   * trHtml 添加行的html代码
   *
   */
  function addTr(tab, row, trHtml){
     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
    // var $tr=$("#"+tab+" tr").eq(row);
  //var $tr=$("#tab tr").eq(row);
   var tr=$("#tab tbody").eq(row);
     if(tr.size()==0){
        alert("指定的table id或行数不存在！");
        return;
     }
     tr.after(trHtml);
  }

  function delTr(ckb){
     //获取选中的复选框，然后循环遍历删除
     var ckbs=$("input[name="+ckb+"]:checked");
     if(ckbs.size()==0){
        alert("要删除指定行，需选中要删除的行！");
        return;
     }
     ckbs.each(function(){
        $(this).parent().parent().remove();
     });
  }

  /**
   * 全选
   *
   * allCkb 全选复选框的id
   * items 复选框的name
   */
  function allCheck(allCkb, items){
   $("#"+allCkb).click(function(){
      $('[name='+items+']:checkbox').attr("checked", this.checked );
   });
  }

  添加一行、删除一行测试方法///
  $(function(){
   //全选
   allCheck("allCkb", "ckb");
  });

  function addTr2(tab, row){
    var trHtml="<tr align='center'><td><input type='hidden' name='u_id[]' value='a'><input type='checkbox' name='ckb'  value=''/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100%;' value='' placeholder='学生姓名'><i style='display:none' class='fa fa-spinner fa-pulse' aria-hidden='true' ></i><span style='color:red;font-size:12px;display:none'>可以注册！</span><span style='color:green;font-size:12px;display:none'>不可以注册！</span></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100%;' value='' placeholder='登录密码'></td>></tr>";
    addTr(tab, row, trHtml);
  }

  function delTr2(){
     delTr('ckb');
  }
  </script>
                                <span class="tips"><a href='javascript:;' οnclick="addTr2('tab', -1)" style=" height:34px"class="layui-btn"><i class='fa fa-plus-circle'></i>添加</a>
                <input name="submit" type="button" value="删除" class="submit li-submit" style="margin-right:20px;" οnclick="delTr2()">
                                 <table class='display dataTable' id="tab" cellpadding="0" cellspacing="0" >
                    <thead>
                      <tr>
                        <th width='10%'><input type="checkbox" id="quanxuan"><label for="quanxuan">全选</label></th>
                        <th width='50%'>学生姓名</th>
                        <th width='40%'>登录密码</th>

                      </tr>
                    </thead>
                    <tbody>

                    </tbody>
                    <tfoot>
                      <tr>
                        <th colspan='3' class='formsubmit'>
                        </th>
                      </tr>
                    </tfoot>
                  </table>
<script>
          //点击全选
          var qx=true;
         $("#quanxuan").on("click",function(){
          if(qx){
              $("input[type='checkbox']").each(function(){
                $(this).prop("checked",true);
              })
              qx=false;
          }else{
             $("input[type='checkbox']").each(function(){
                $(this).prop("checked",false);
              })
              qx=true;
          }

         })
         
</script>

二、动态指定

JS代码

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript">
  添加一行、删除一行封装方法///
  /**
   * 为table指定行添加一行
   *
   * tab 表id
   * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
   * trHtml 添加行的html代码
   *
   */
  function addTr(tab, row, trHtml,tbResponse){
     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
     // var $tr=$("#"+tab+" tr").eq(row);
   //var $tr=$("#tab tr").eq(row);
   var tr=$("#tab"+tbResponse+" tbody").eq(row);
     if(tr.size()==0){
        alert("指定的table id或行数不存在！");
        return;
     }
     tr.after(trHtml);
  }

  function delTr(ckb){
     //获取选中的复选框，然后循环遍历删除
     var ckbs=$("input[name="+ckb+"]:checked");
     if(ckbs.size()==0){
        alert("要删除指定行，需选中要删除的行！");
        return;
     }
     ckbs.each(function(){
        $(this).parent().parent().remove();
     });
  }

  /**
   * 全选
   *
   * allCkb 全选复选框的id
   * items 复选框的name
   */
  function allCheck(allCkb, items){
   $("#"+allCkb).click(function(){
      $('[name='+items+']:checkbox').attr("checked", this.checked );
   });
  }

  添加一行、删除一行测试方法///
  $(function(){
   //全选
   allCheck("allCkb", "ckb");
  });

  function addTr2(tab, row,tbResponse){
    var trHtml="<tr align='center'><td><input type='hidden' name='u_id[]' value='a'><input type='checkbox' name='ckb'  value=''/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100%;' value='' placeholder='学生姓名'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100%;' value='' placeholder='登录密码'></td></tr>";
    addTr(tab, row, trHtml,tbResponse);
  }


  function delTr2(){
     delTr('ckb');
  }


  </script>

全选代码：

<script>
  //点击全选
        //  var qx=false;
      function isQuanxuan(qxNum){
         var qx=$("#quanxuan"+qxNum).prop("checked");
       console.log(qx)
        if(qx){
          $("#tab"+qxNum+" input[type='checkbox']").each(function(){
          $(this).prop("checked",true);
          })
          //qx=false;
        }else{
         $("#tab"+qxNum+" input[type='checkbox']").each(function(){
          $(this).prop("checked",false);
          })
          //qx=true;
        }
      }
         
</script>

html代码：

<a href='javascript:;' οnclick="addTr2('tab', -1,{$val['id']})" style=" height:34px" class="layui-btn"><i class='fa fa-plus-circle'></i>添加</a><input name="submit" type="button" value="删除" class="layui-btn" style="margin-right:20px;" οnclick="delTr2()">
        <table class="layui-table" id="tab{$val['id']}">
          <colgroup>
          <col width="150">
          <col width="200">
          <col>
          </colgroup>
          <thead>
          <tr>
            <th><input type="checkbox" id="quanxuan{$val['id']}" value="{$val['id']}" οnclick="isQuanxuan({$val['id']})">全选</th>
            <th>标题</th>
            <th>开始时间</th>
            <th>课时</th>
          </tr> 
          </thead>
          <tbody>
          </tbody>
        </table>

<a href='javascript:;' οnclick="addTr2('tab', -1,{$val['id']})" style=" height:34px"class="layui-btn"><i class='fa fa-plus-circle'></i>添加</a>

<table class="layui-table" id="tab{$val['id']}">

完全案例代码：

<!--<?php
defined('IN_MET') or exit('No permission');
//require $this->template('ui/head');
echo <<<EOT
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>排课</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="{$_M['url']['pub']}layui/layui.js"></script>
<link rel="stylesheet" href="{$_M['url']['pub']}layui/css/layui.css">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript">
  添加一行、删除一行封装方法///
  /**
   * 为table指定行添加一行
   *
   * tab 表id
   * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
   * trHtml 添加行的html代码
   *
   */
  function addTr(tab, row, trHtml,tbResponse){
     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
     // var $tr=$("#"+tab+" tr").eq(row);
   //var $tr=$("#tab tr").eq(row);
   var tr=$("#tab"+tbResponse+" tbody").eq(row);
     if(tr.size()==0){
        alert("指定的table id或行数不存在！");
        return;
     }
     tr.after(trHtml);
  }

  function delTr(ckb){
     //获取选中的复选框，然后循环遍历删除
     var ckbs=$("input[name="+ckb+"]:checked");
     if(ckbs.size()==0){
        alert("要删除指定行，需选中要删除的行！");
        return;
     }
     ckbs.each(function(){
        $(this).parent().parent().remove();
     });
  }

  /**
   * 全选
   *
   * allCkb 全选复选框的id
   * items 复选框的name
   */
  function allCheck(allCkb, items){
   $("#"+allCkb).click(function(){
      $('[name='+items+']:checkbox').attr("checked", this.checked );
   });
  }

  添加一行、删除一行测试方法///
  $(function(){
   //全选
   allCheck("allCkb", "ckb");
  });

  function addTr2(tab, row,tbResponse){
    var trHtml="<tr align='center'><td><input type='hidden' name='u_id[]' value='a'><input type='checkbox' name='ckb'  value=''/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100%;' value='' placeholder='标题'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100%;' value='' placeholder='登录密码'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100%;' value='' placeholder='登录密码'></td></tr>";
    addTr(tab, row, trHtml,tbResponse);
  }


  function delTr2(){
     delTr('ckb');
  }


  </script>
</head>

<body style="margin: 20px;">
<fieldset  class="layui-elem-field">
      <legend>增加/修改章节</legend>
    <div class="layui-field-box">
      <form class="layui-form layui-form-pane" action="{$_M[url][own_form]}a=do_class_course_save&pid={$_M['form']['pid']}&cid={$_M['form']['cid']}&id={$_M['form']['id']}" method="post">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                <input name="title" lay-verify="title|required" autocomplete="off" placeholder="请输入章节标题" class="layui-input" type="text" value="{$c_rs['title']}">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                <input name="no_order" lay-verify="required|number" autocomplete="off" placeholder="请输入数字" class="layui-input" type="text" value="{$c_rs['no_order']}">
                </div>
                <div class="layui-form-mid layui-word-aux">越大越前</div>
              </div>
              <div class="layui-inline">
                 <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              </div>
            </div>
      </form>
  </div>
</fieldset>
<div class="layui-collapse">
<!--
EOT;
$rs=DB::get_all("SELECT id,title,no_order FROM ".$_M['table']['my_live_course']." WHERE classtype=1 and pid='$pid' and class_id='$cid' ORDER BY no_order desc,id desc");
foreach($rs as $key => $val){
echo <<<EOT
-->
    <div class="layui-colla-item">
    <h2 class="layui-colla-title">{$val['title']} <button class="layui-btn layui-btn-primary layui-btn-xs">排序{$val['no_order']}</button><a href="{$_M[url][own_form]}a=do_class_course&pid={$_M['form']['pid']}&cid={$_M['form']['cid']}&id={$val['id']}" class="layui-btn layui-btn-normal layui-btn-xs">修改</a> </h2>
    <div class="layui-colla-content layui-show">
       <a href='javascript:;' οnclick="addTr2('tab', -1,{$val['id']})" style=" height:34px" class="layui-btn"><i class='fa fa-plus-circle'></i>添加</a><input name="submit" type="button" value="删除" class="layui-btn" style="margin-right:20px;" οnclick="delTr2()">
        <table class="layui-table" id="tab{$val['id']}">
          <colgroup>
          <col width="150">
          <col width="200">
          <col>
          </colgroup>
          <thead>
          <tr>
            <th><input type="checkbox" id="quanxuan{$val['id']}" value="{$val['id']}" οnclick="isQuanxuan({$val['id']})">全选</th>
            <th>标题</th>
            <th>开始时间</th>
            <th>课时</th>
          </tr> 
          </thead>
          <tbody>
          </tbody>
        </table>
    </div>
    </div>
<!--
EOT;
}
echo <<<EOT
-->
</div>
<script>
  //点击全选
        //  var qx=false;
      function isQuanxuan(qxNum){
         var qx=$("#quanxuan"+qxNum).prop("checked");
       console.log(qx)
        if(qx){
          $("#tab"+qxNum+" input[type='checkbox']").each(function(){
          $(this).prop("checked",true);
          })
          //qx=false;
        }else{
         $("#tab"+qxNum+" input[type='checkbox']").each(function(){
          $(this).prop("checked",false);
          })
          //qx=true;
        }
      }
         
</script>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use(['layer', 'form','element', 'laydate'], function(){
     var element = layui.element,
     $ = layui.jquery,
     laydate = layui.laydate,
   form = layui.form,
     layer = layui.layer;
   
    //日期
    laydate.render({
    elem: '#starttime'
    ,type: 'datetime'
    });
    
    
          
<!--
EOT;
if($turnovertext){
echo <<<EOT
-->
  layer.msg('{$turnovertext}');
<!--
EOT;
}
echo <<<EOT
-->
});
</script>
</body>
</html>
<!--
EOT;
//require $this->template('ui/foot');
?>