精华内容
下载资源
问答
  • JS 点击按钮增加文本框

    千次阅读 2018-03-30 17:34:57
    一、增加到指定表格ID <table class='display dataTable' id="tab" cellpadding="0" cellspacing="0" ><meta charset="utf-8"> <...

    一、增加到指定表格ID

     <table class='display dataTable' 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');
    ?>

    展开全文
  • JS 点击按钮增加文本框.rar
  • js点击按钮后,增加文本框

    千次阅读 2018-02-06 18:46:00
    <script type="text/javascript"> $('.dj') .click(function () { $('.box') .append( " </br><input type='text' name='' id=''> " ); }); 转载于:https://www.cnblogs.com/gmsmile/p/8423720.html
    静态html:

    <div class="box">
    <input type="text" name="" id=""><span class="dj" style="width:20px;height: 20px;background: orange;margin-right: 10px;">&nbsp;+ &nbsp;</span>
    </div>

    方法一:
    <script type="text/javascript">
    $('.dj').click(function () {
    $('.box').append( " </br><input type='text' name='' id=''> " );
    });
    </script>


    转载于:https://www.cnblogs.com/gmsmile/p/8423720.html

    展开全文
  • javascript点击按钮增加文本框

    千次阅读 2017-10-10 09:16:11
    div style="width:300px; height:400px; clear:both" id="Content"> div> input type="button" value="添加" onclick="addBotton()" /> ...script type="text/javascript"> var cont = document
    
    
    html与css
    <div style="width:300px; height:400px; clear:both" id="Content">
    </div>
    <input type="button" value="添加" οnclick="addBotton()" />
    
    
    script
    <script type="text/javascript">
        var cont = document.getElementById("Content")
        var i = 1;
        function addBotton(){
            var NewInput = document.createElement("input");
            NewInput.setAttribute("size",20);
            NewInput.setAttribute("type","text");
            NewInput.setAttribute("name","new" + i);
            cont.appendChild(NewInput);
            i++;
        }
    </script>
    展开全文
  • script type="text/javascript"> var count = 1; ... //用来判断是删除 还是增加按钮 以便count值进行计算 function checkCount(boolOK, coun) { if (boolOK == true) { return count++; } e
    <script type="text/javascript">
        var count = 1;
    
        //用来判断是删除 还是增加按钮 以便count值进行计算
        function checkCount(boolOK, coun) {
           if (boolOK == true) {
                return count++;
            }
           else {
            count--;
         }
        }
        //添加一个input标签 同时也对它的ID和Name进行赋值。
        function AddInput() {
        countAA = checkCount(true, count);
           var question = document.getElementById("question");
          //创建input
            var input = document.createElement("input");
            input.type = "text";
            input.id = "questions[" + count + "]";
            input.name = "questions[" + count + "].name";
            question.appendChild(input);                                     //向元素增加子节点 最为最后一个子节点
    
    
            var input = document.createElement("input");
            input.type = "button";
            input.id = "questions[" + count + "]";
            input.name = "questions[" + count + "].name";
            input.value="按钮";
    
            question.appendChild(input);
    
            //创建一个空格
            var br = document.createElement("br");
            question.appendChild(br);
        }
    
    

    </script>

    <body οnmοusemοve="initEvent()">
    <div style="width: 500px; margin-left: 200px;">
        <div id="question" style="border: 1px solid yellow;">
            <input id="Text1" type="text" /><input id="btnAddInput" type="button" value="新增一个Input" οnclick="AddInput()" /><br />
        </div>
    </div>
    </body>



    展开全文
  • 主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
  •    ...点击复制按钮,进行文本框内容的复制。使用js实现这一功能:        1、HTML部分: <label>id:</label><input type="...
  • 点击按钮后,文本框变为Select下拉列表框 ASP ASP.NET PHP JAVA [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • <... <head> <script type="text/javascript"> function setFocus() { document.getElementById('password1').focus() } function loseFocus() { document.getElemen...
  • 主要介绍了JS实现点击复选框将按钮文本框变为灰色不可用的方法,涉及javascript动态修改页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • !... <head> <meta charset=”UTF-8″> <meta name=”Generator” content=”EditPlus:registered:”>...meta name=”Author” content=””>...script type=”text/javascript” src=”jquery-1.8
  • 主要介绍了JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转,本文给大家分享实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一款比较简单的js点击文本框内容互换代码,点击中间的切换按钮,城市内容对调互换,除了地点互换,当然还可以用作其它方面。
  • javascript实现点击按钮删除一个文本框 给删除按钮添加点击事件: onclick="delInput()"; js这样写: function deleInput(){ var el = document.getElementById('aaa'); el.parentNode.removeChild(el); }
  • 主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head>...input type="button" value="禁用文本框" id=...
  • js实现点击按钮复制文本框中的内容

    千次阅读 2017-07-31 18:46:56
    <script type="text/javascript"> window.onload = function () { var btn = document.getElementById("btn"); var url = document.getElementById("url"); btn.onclick = function (){ url.select()...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...script type="text/javascript"> function clickMe() { //得到input标签对象 var...
  • jquery点击按钮删除文本框的内容

    千次阅读 2018-06-02 21:13:24
    点击按钮删除文本框的内容,很简单,关键代码如下 $(document).ready(function(){ $("#quxiaobtn").click(function(){ $("#text").val(''); });注意val括号里的是单引号。还要引入...
  • 点击按钮复制文本框内容

    千次阅读 2019-07-13 16:03:44
    点击按钮复制文本框内容 复制文本框内容的方法如下: function Copy(){ var e=document.getElementById("content");//对象是content if (e.value != "") { e.select();//选择对象 document.execCommand("Copy...
  • 点击按钮获得文本框里面的值

    千次阅读 2015-05-12 18:57:00
    script type="text/javascript"> window.onload = function(){ var obtn=document.getElementById("Button2"); obtn.onclick = function(){ alert(document.getElementsById("Text2"...
  • <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> var count = 0; function addByScript() { var tab...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...script type="text/javascript"> window.onload = function(){ var copybtn =...
  • C#点击按钮输出文本框输入的内容

    千次阅读 2020-04-18 18:33:19
    网页包含一个文本框,一个按钮。单击按钮可以在网页中输出文本框中输入的内容。 效果: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> &...
  • 功能:点击第一个按钮生成文字,第二个按钮清除文字 事件:onclick 属性:input的value <!DOCTYPE html> <html> <head> <meta charset="utf-...
  • < input type = "text" name = "" id = ...点击复制按钮即可复制input中的内容...如上JS代码貌似只能复制文本框中的内容(如input,textarea标签),如果需要复制普通标签中的内容,则代码需要稍微的进行改造一下。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,251
精华内容 23,300
关键字:

js点击按钮增加文本框