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>

<!--<?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');
?>

JS 點選按鈕增加文本框

繼續閱讀

趕工心得（一）

jQuery實作百度搜尋框

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

2010年終總結--技術篇

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo