精华内容
下载资源
问答
  • 想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试用例,当使用过滤器的时候表格中测试用例的数量发生了变化,此时要重新统计表格中的测试用例个数并反馈在页面上。 这里设:表格的tbody元素的id...

    [本文出自天外归云的博客园]

    使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数。想要监听表格变化,如何做呢?

    使用场景:有一个表格里放着许多测试用例,当使用过滤器的时候表格中测试用例的数量发生了变化,此时要重新统计表格中的测试用例个数并反馈在页面上。

    这里设:表格的tbody元素的id为monitorTbody,反馈测试用例个数的div的id是caseCount。

    下面是两种实现的方法:

    // 实时监听DOM变化,方法1:jQuery监听div内容变化(使用这种方法注意id为caseCount的元素不要位于监听范围内,否则控制台会报错)
    $('#monitorTbody').bind('DOMNodeInserted', function () {
        var count = $("#monitorTbody").find("tr").length;
        $("#caseCount").html("测试用例 " + count.toString() + "条过滤结果");
    });
    
    // 实时监听select组件变化,方法2:动态绑定select的change事件
    $("select").change(function () {
        //延时两秒执行
        setTimeout(function () {
            var count = $("#monitorTbody").find("tr").length;
            $("#caseCount").html("测试用例 " + count.toString() + "条过滤结果");
        }, 2000);
    });

    使用方法一需要注意:不要让id为caseCount的元素在id为monitorTbody的元素中,否则控制台会有无限递归报错。

    转载于:https://www.cnblogs.com/LanTianYou/p/10687013.html

    展开全文
  • {# edit是固定事件名,table_lay-filter是table原始容器的属性 lay-filter="对应的值" #} ... console.log("监听事件的obj====》",obj) let value = obj.value //得到修改后的值 let data = obj.data //得到所在行.
    {# edit是固定事件名,table_lay-filter是table原始容器的属性 lay-filter="对应的值" #}
              table.on('edit(course_table)', function(obj){
                  console.log("监听事件的obj====》",obj)
                  let value = obj.value //得到修改后的值
                  let data = obj.data //得到所在行所有键值
                  let field = obj.field; //得到字段
                  console.log("当前单元格数据===》",obj.data)
                  console.log("修改后的数据是否为整数==>",Number.isInteger(parseInt(value)))
                  {#判断输入的值是不是整数#}
                  if (Number.isInteger(parseInt(value))){
                      const course_id = data.course_id
                      $.ajax({
                          url:"",
                          data:{
                              "course_id":course_id,
                              "parameter":field,
                              "new_data":value
                          },
                          type:'POST',
                          dataType:'json',
                          success:function (data) {
                              if (data.state == 200){
                                  layer.msg("修改成功!")
                              }else{
                                  layer.msg("系统出错,请联系管理员!")
                              }
                          }
                      })
                  }else {
                      layer.msg("请输入整数!")
                      let text = $(this).prev().text();//得到修改前的值
                      $(this).val(text);
                  }
              });

     

    展开全文
  • //监听表格复选框选择 table.on('checkbox(user)', function(obj){ }); var $ = layui.$, active = { getCheckData: function(){ //获取选中数据 var checkStatus = table.checkStatus('idTest') ,data = ...

    html如下:

    <div class="layui-btn-group userTable">
      <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
      <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
      <button class="layui-btn" data-type="isAll">验证是否全选</button>
    </div>
    <table class="layui-table" lay-data="{height:313, url:'/user/userJson' ,id:'idTest'}" lay-filter="user">
    </table>
    

    JavaScript:

    layui.use('table', function(){
    var table = layui.table;
      //监听表格复选框选择
      table.on('checkbox(user)', function(obj){
      });
    
      var $ = layui.$, active = {
        getCheckData: function(){ //获取选中数据
          var checkStatus = table.checkStatus('idTest')
          ,data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        }
        ,getCheckLength: function(){ //获取选中数目
          var checkStatus = table.checkStatus('idTest')
          ,data = checkStatus.data;
          layer.msg('选中了:'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
          var checkStatus = table.checkStatus('idTest');
          layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
      };
      
      $('.userTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    });
    

    转载于:https://my.oschina.net/u/2427561/blog/1531529

    展开全文
  • <el-table-column> <template slot-scope="scope"> <el-input v-model.trim="scope.row.lockDays" type="number" @change="...
  • 而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单...
  • 5-事件监听机制: 5-1概念: 某些组件被执行了某些操作后,触发某些代码的执行。 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了 事件源:组件。如: 按钮 文本输入框… 监听器:代码。 注册监听:将...

    5-事件监听机制:

    5-1概念:

    某些组件被执行了某些操作后,触发某些代码的执行。

    • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
    • 事件源:组件。如: 按钮 文本输入框…
    • 监听器:代码。
    • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

    5-2常见的事件:

    1-点击事件:

    1. onclick:单击事件
    2. ondblclick:双击事件

    2-焦点事件

    1. onblur:失去焦点
    2. onfocus:元素获得焦点。

    3-加载事件:

    onload:一张页面或一幅图像完成加载。

    //2.加载完成事件  onload
    window.onload = function(){
    	...
    }
    

    4-鼠标事件:

    onmousedown 鼠标按钮被按下。

    //3.绑定鼠标点击事件
    document.getElementById("username").onmousedown = function(event){
       // alert("鼠标点击了....");
        alert(event.button);
    }
    

    onmouseup 鼠标按键被松开。

    onmousemove 鼠标被移动。

    onmouseover 鼠标移到某元素之上。

    //3.绑定鼠标移动到元素之上事件
    document.getElementById("username").onmouseover = function(){    
    	alert("鼠标来了....");
    }
    

    onmouseout 鼠标从某元素移开。

    5-键盘事件:

    onkeydown 某个键盘按键被按下。

    document.getElementById("username").onkeydown = function(event){
        // alert("鼠标点击了....");
       // alert(event.button);
        if(event.keyCode == 13){
            alert("提交表单");
        }
    
    }
    

    onkeyup 某个键盘按键被松开。

    onkeypress 某个键盘按键被按下并松开。

    6-选择和改变

    onchange 域的内容被改变。

    document.getElementById("username").onchange = function(event){
        alert("改变了...")
    }
    
    document.getElementById("city").onchange = function(event){
        alert("改变了...")
    }
    

    onselect 文本被选中。

    7-表单事件:

    onsubmit 确认按钮被点击。

    document.getElementById("form").onsubmit = function(){
        //校验用户名格式是否正确
        var flag = false;
    
    
        return flag;
    }
    

    onreset 重置按钮被点击。

    6-案例:表格全选

    分析:全选:

    • 获取所有的checkbox
    • 遍历cb,设置每一个cb的状态为选中 checked

    6-1页面建立

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table {
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
    
        td, th {
            text-align: center;
            border: 1px solid;
        }
    
        div {
            margin-top: 10px;
            margin-left: 30%;
        }
    </style>
    </head>
        
    <body>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cb" id="firstCb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>1</td>
            <td>令狐冲</td>
            <td></td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>2</td>
            <td>任我行</td>
            <td></td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    
        <tr>
            <td><input type="checkbox" name="cb"></td>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    6-2新增js事件

    
    document.getElementById("unSelectAll").onclick = function () {
        //全选
        //1.获取所有的CheckBox
        var cbs = document.getElementsByName("cb");
        //注意:getElementsByName()这个方法
        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每个cb的状态选中:checked
            cbs[i].checked = false;
        }
    }
    
    document.getElementById("unSelectAll").onclick = function () {
        //全不选
        //1.获取所有的CheckBox
        var cbs = document.getElementsByName("cb");
        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每个cb的状态选中:checked
            cbs[i].checked = false;
        }
    }
    
    document.getElementById("selectRev").onclick = function(){
        //反选
        //1.获取所有的checkbox
        var cbs = document.getElementsByName("cb");
        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每一个cb的状态为相反
            cbs[i].checked = !cbs[i].checked;
        }
    }
    //点第一个复选框进行全选操作
    document.getElementById("firstCb").onclick = function () {
        //点击第一个cb
        //1.获取所有的checkbox
        var cbs = document.getElementsByName("cb");
        //2.遍历
        for (var i = 0; i <= cbs.length; i++) {
            //3.设置每一个cb的状态和第一个cb的状态
            cbs[i].checked = this.checked;//由于匿名事件本身就是第一个复选框引起的,本身就是this
        }
    
    }
    
    //给所有tr绑定鼠标移到元素之上和移除元素事件
    //注意:over和out在style中的定义形式
    /*
    .over{
        background-color: pink;
    }
    .out{
        background-color: white;
    }
    */
    var trs = document.getElementsByTagName("tr");
    //2.遍历
    for (var i = 0; i < trs.length; i++) {
        //移到元素之上
        trs[i].onmouseover = function () {
            this.className = "over";
        };
        //移除元素
        trs[i].onmouseout = function () {
            this.className = "out";
        };
    }
    
    
    
    document.getElementById("unSelectAll").onclick = function () {
        //全选
        //1.获取所有的CheckBox
        var cbs = document.getElementsByName("cb");
        //注意:getElementsByName()这个方法
        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每个cb的状态选中:checked
            cbs[i].checked = false;
        }
    }
    
    document.getElementById("unSelectAll").onclick = function () {
        //全不选
        //1.获取所有的CheckBox
        var cbs = document.getElementsByName("cb");
        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每个cb的状态选中:checked
            cbs[i].checked = false;
        }
    }
    
    document.getElementById("selectRev").onclick = function(){
        //反选
        //1.获取所有的checkbox
        var cbs = document.getElementsByName("cb");
        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每一个cb的状态为相反
            cbs[i].checked = !cbs[i].checked;
        }
    }
    //点第一个复选框进行全选操作
    document.getElementById("firstCb").onclick = function () {
        //点击第一个cb
        //1.获取所有的checkbox
        var cbs = document.getElementsByName("cb");
        //2.遍历
        for (var i = 0; i <= cbs.length; i++) {
            //3.设置每一个cb的状态和第一个cb的状态
            cbs[i].checked = this.checked;//由于匿名事件本身就是第一个复选框引起的,本身就是this
        }
    
    }
    
    //给所有tr绑定鼠标移到元素之上和移除元素事件
    //注意:over和out在style中的定义形式
    /*
    .over{
        background-color: pink;
    }
    .out{
        background-color: white;
    }
    */
    var trs = document.getElementsByTagName("tr");
    //2.遍历
    for (var i = 0; i < trs.length; i++) {
        //移到元素之上
        trs[i].onmouseover = function () {
            this.className = "over";
        };
        //移除元素
        trs[i].onmouseout = function () {
            this.className = "out";
        };
    }
    
    
    
    展开全文
  • Layui表格监听事件

    千次阅读 2019-07-07 21:35:20
    要实现Layui表格监听事件,首先引用Layui的CSS和JS进行引用。 使用lay-filter=””属性定义值,””里面自定义的值不可以重复,要唯一化,声明全局变量,在页面载入事件写监听事件。在控制器上将表格里的数据...
  • JS实现表格数据各种搜索功能的方法本文实例讲述了JS实现表格数据各种搜索功能。可忽略大小写,模糊搜索,多关键搜索。分享给大家供大家参考。具体实现方法如下:window.onload=function(){var oTab=document....
  • 知识点:表格监听(单击监听事件) 1、先渲染表格 获取表格数据 var tabFlight, tabFlightCabin, layerIndex = 0; var layer, layuiTable, layuiForm, laydate;//保存layui模块以便全局使用 $(document).ready...
  • 数据表格渲染与事件监听 开发工具与关键技术:VS/JQuery 作者:郑石秀 撰写时间:2019/4/28 在学习MVC项目的过程中,数据表格是引用插件完成的。第一步引用layui模板的插件,引用插件的过程很简单,将插件拷贝到...
  • 这个功能其实也是一个基本的查询功能,只不过是需要监听到某一个表格中的数据信息后,提取选中的这条数据的ID进行查询二个表格中的数据,这个功能一般的项目中是用不到的,只有少数的项目才会用到的,因为多数的项目...
  • layui数据表格渲染有三种方式: 方法渲染 自动渲染 转换静态表格 参考layui官网:https://www.layui.com/doc/modules/table.html#methodRender 官方推荐使用方法渲染,此种方法无需写过多的HTML,我自己用的也是此...
  • Layui数据表格监听单元格

    千次阅读 2020-05-02 19:12:12
    关于Layui数据表格监听单元格使用的小结 Layui数据表格监听单元格使用 优秀的前端框架有很多,当然Layui也是其中之一。相对于其他前端框架如Bootstrap、妹子UI、Vue,个人觉得Layui的样式更加小清新,但使用难度似乎...
  • 今天小编就为大家分享一篇Layui 带多选框表格监听事件以及按钮自动点击写法实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui数据表格监听行事件

    千次阅读 2019-06-09 14:59:39
    Layui数据表格中的单选框与复选框,可以通过监听行单(双)击事件,在点击行数据的时候,同时选中相应单(复)选框,不用每一次单独选中相应单(复)选框 //监听行单击事件 table.on('row(test)', function(obj){ console....
  • 设置table表格监听

    千次阅读 2017-02-28 15:16:28
     $(function(){ $("table td").click(function() { var row = $(this).parent().index() + 1; // 行位置 var col = $(this).index() + 1;...点击表格之后显示位置
  • select选择器:@change=“” <el-select v-model=...table表格:@keyup.enter.native="" <el-date-picker v-model="createTime" type="datetimerange" :picker-options="pickerOptions" value-format="yyyy-
  • Layui表格监听行单双击事件

    千次阅读 2019-07-27 14:31:49
    而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单...
  • 对象 - JS监听事件 ¶作者:KK发表日期:2016.2.21在准备讲解后面的window对象之前,这里将话题转回来事件这里平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样就实现了监听body的click事件,一旦元素被点击...
  • 找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) ...
  • {field: 'status', title: '状态', align:'center',width: 80,templet:function(d){ return "<span class="+getGoodStatus(d.status)[1]+">"+getGoodStatus(d.status)[0]+"</span>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,924
精华内容 7,569
关键字:

js监听表格