0
点赞
收藏
分享

微信扫一扫

js 批量赋值

小编 2022-07-27 阅读 21
icohtmlcss编程语言


js 批量赋值_ico


<!DOCTYPE html>
<html>        
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>saa</title>
  <link rel="stylesheet" href="layui/css/layui.css">
<!--   <link rel="stylesheet" href="css/jiaowu.css"> -->

</head>
<!-- 加在body标签中屏蔽右键 οncοntextmenu="return false" -->
<body >
<!--表单区域-->
<div class="layui-fluid">

<form class="layui-form" action="/admin/student/indexallsave.html" method="post">
  <div class="demoTable" style="margin:15px 0">
        <div class="layui-inline layui-form">
            <button class="layui-btn" type="submit">提交修改</button>
        </div>
       <div class="layui-inline layui-form">
            <select lay-verify="" id="searchtype" lay-search="">
              <option value="">请选择费用:</option>
              <option value="entryFee[]">报名费</option>
              <option value="xuefei1[]">第1年学费</option>
              <option value="xuefei2[]">第2年学费</option>
              <option value="xuefei3[]">第3年学费</option>
              </select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择费用:" id="fy" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择费用:</dd><dd lay-value="entryFee[]" class="">报名费</dd><dd lay-value="xuefei1[]" class="">第1年学费</dd><dd lay-value="xuefei2[]" class="">第2年学费</dd><dd lay-value="xuefei3[]" class="">第3年学费</dd></dl></div> 
        </div>
        <div class="layui-inline">
          <input class="layui-input" id="input-search">
        </div>      
      <button class="layui-btn" id="sear" data-type="reload">搜索</button>
      <button class="layui-btn" type="button" id="revise">修改</button> 
    </div>

        <table class="layui-table" lay-even="" lay-size="sm">
          <colgroup>
            <col width="50">
            <col width="100">
            <col width="100">
            <col width="100">
            <col width="100">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>全选</th>
              <th data-nama="xm">姓名</th>
              <th data-nama="bmf">报名费</th>
              <th data-nama="yinian">第1年学费</th>
              <th data-nama="ernian">第2年学费</th>
              <th data-nama="sannian">第3年学费</th>
            </tr> 
          </thead>
          <tbody>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="29" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>顶替</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="540" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="4210" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="7458" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="1221" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="28" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>枯叶叶叶</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="1" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="2" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="3" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="4" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="25" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>奇才</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="5" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="6" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="7" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="8" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="23" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>克林霉素</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="22" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>身份证</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="21" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>hgjgjg</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="20" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>hgjgjg</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="19" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>fdgdg</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
           </tbody>
        </table>

</form>
</div>
<!--表单区域结束-->
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'form','element','jquery','layer'], function(){
      var layer = layui.layer
      ,form = layui.form
      ,element = layui.element
      ,$= layui.$
      ,layer=layui.layer;


      $("#revise").click(function(){
          revise('entryFee[]',$("input[name='entryFee[]']"));
          revise('xuefei1[]',$("input[name='xuefei1[]']"));
          revise('xuefei2[]',$("input[name='xuefei2[]']"));
          revise('xuefei3[]',$("input[name='xuefei3[]']"));
      })

      function revise(value,obj){ //参数说明,value为要修改的td的属性名,obj为要修改元素
          var searchtype=$("#searchtype").val();
          var inputSearch=$("#input-search").val();
          if(searchtype==value){
            obj.val(inputSearch);
          }
      }
    });
</script>
</body>
</html>



改进版：增加撤销，增加已经存在数据就不修改

js 批量赋值_ico_02

<!DOCTYPE html>
<html>        
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>saa</title>
  <link rel="stylesheet" href="layui/css/layui.css">
<!--   <link rel="stylesheet" href="css/jiaowu.css"> -->

</head>
<!-- 加在body标签中屏蔽右键 οncοntextmenu="return false" -->
<body >
<!--表单区域-->
<div class="layui-fluid">

<form class="layui-form" action="/admin/student/indexallsave.html" method="post">
  <div class="demoTable" style="margin:15px 0">
        <div class="layui-inline layui-form">
            <button class="layui-btn" type="submit">提交修改</button>
        </div>
       <div class="layui-inline layui-form">
            <select lay-verify="" id="searchtype" lay-search="">
              <option value="">请选择费用:</option>
              <option value="entryFee[]">报名费</option>
              <option value="xuefei1[]">第1年学费</option>
              <option value="xuefei2[]">第2年学费</option>
              <option value="xuefei3[]">第3年学费</option>
              </select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择费用:" id="fy" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择费用:</dd><dd lay-value="entryFee[]" class="">报名费</dd><dd lay-value="xuefei1[]" class="">第1年学费</dd><dd lay-value="xuefei2[]" class="">第2年学费</dd><dd lay-value="xuefei3[]" class="">第3年学费</dd></dl></div> 
        </div>
        <div class="layui-inline">
          <input class="layui-input" id="input-search">
        </div>      
      <button class="layui-btn" type="button" id="revise">修改</button> 
      <button class="layui-btn" type="button" id="cancel">撤销</button> 
    </div>

        <table class="layui-table" lay-even="" lay-size="sm">
          <colgroup>
            <col width="50">
            <col width="100">
            <col width="100">
            <col width="100">
            <col width="100">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>全选</th>
              <th>姓名</th>
              <th>报名费</th>
              <th>第1年学费</th>
              <th>第2年学费</th>
              <th>第3年学费</th>
            </tr> 
          </thead>
          <tbody>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="29" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>顶替</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="540" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="4210" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="7458" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="1221" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="28" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>枯叶叶叶</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="2" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="3" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="4" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="25" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>奇才</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="6" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="7" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="8" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="23" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>克林霉素</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="22" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>身份证</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="21" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>hgjgjg</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="20" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>hgjgjg</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
             <tr>
              <td><input type="checkbox" name="checkbox[]" value="19" lay-skin="primary" checked=""><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div></td>
              <td>fdgdg</td>
              <td><input type="text" name="entryFee[]" placeholder="报名费" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei1[]" placeholder="第1年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei2[]" placeholder="第2年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
              <td><input type="text" name="xuefei3[]" placeholder="第3年" autocomplete="off" class="layui-input" value="" style="width: 60px;"></td>
            </tr>
           </tbody>
        </table>

</form>
</div>
<!--表单区域结束-->
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'form','element','jquery','layer'], function(){
      var layer = layui.layer
      ,form = layui.form
      ,element = layui.element
      ,$= layui.$
      ,layer=layui.layer;

      //修改点击事件
      $("#revise").click(function(){
          revise('entryFee[]',$("input[name='entryFee[]']"),'a');
          revise('xuefei1[]',$("input[name='xuefei1[]']"),'b');
          revise('xuefei2[]',$("input[name='xuefei2[]']"),'c');
          revise('xuefei3[]',$("input[name='xuefei3[]']"),'d');
      })
      
      //撤销点击事件
      $("#cancel").click(function(){
        cancel('entryFee[]',$("input[name='entryFee[]']"),'a');
        cancel('xuefei1[]',$("input[name='xuefei1[]']"),'b');
        cancel('xuefei2[]',$("input[name='xuefei2[]']"),'c');
        cancel('xuefei3[]',$("input[name='xuefei3[]']"),'d');
      })

      //修改函数
      function revise(value,obj,newValue){ //参数说明,value为要修改的td的属性名,obj为要修改元素,newValue为撤销所添加的属性值
          var searchtype=$("#searchtype").val();
          var inputSearch=$("#input-search").val();
          if(searchtype==value){
            var i=0;
            obj.each(function(){
              if($(this).val()==''){
                $(this).attr(newValue,i)
                //$(this).attr('newValue').val(inputSearch);
                $("["+newValue+"]").val(inputSearch);
                i++;
              }
            })
            
          }
      }

      //撤销函数
      function cancel(value,obj,newValue){ //参数说明,value为要修改的td的属性名,obj为要修改元素,newValue为撤销所撤销的属性值
          var searchtype=$("#searchtype").val();
          var inputSearch=$("#input-search").val();
          if(searchtype==value){
            obj.each(function(){
              $("["+newValue+"]").val('');
            }) 
          }
      }
    
    
    
    });
</script>
</body>
</html>




layui插件：http://www.layui.com/doc/element/color.html



举报

相关推荐

js异步赋值

jspromise异步初始化嵌套前端开发

JS解构赋值

javascript

mysql新增列并批量赋值

赋值MySQLsql数据库

Java二维数组批量赋值

二维数组赋值初始化Java后端开发

js 取值&赋值-form表单

JAVASCRIPTform表单元素单选框form表单自定义属性Python后端开发

js的list赋值问题

javascriptlist前端

js笔记-对象解构赋值

javascript前端vue.js

对象之间，属性批量赋值（替换）/declaredFields /field

kotlinandroidjava

实现Map批量赋值，我只需24秒搞定！

键值对赋值数据Java后端开发

使用Map批量赋值进行表单验证的实践

赋值键值对Java程序员AIGC软件研发
0 条评论