动态添加table列表以及行、按钮点击事件

动态添加table列表

获取并遍历数据

.done(function (data) {
dom = '';
data.list.forEach(function (pre) {
   
   //拼接列表
   dom += '<tr>';
       dom += '<td>'+ pre.presetPointIndex +'</td>';
       dom += '<td>'+ pre.presetPointName +'</td>';
       dom += '<td style="width:45px"><button type="button" class="btn btn-default btn-xs select" id='+pre.cameraIndexCode+' name='+pre.presetPointIndex+'>选择</button></td>';
   dom += '</tr>';
   
})
$("#presetBody").html(dom);

添加行点击事件及样式

var _table = document.getElementById('presetBody');
var trs = _table.getElementsByTagName('tr');

for (let j = 0; j < trs.length; j++) {
    trs[j].ondblclick = function(){
        //设置选中样式
        var _table1 = document.getElementById('presetBody');
        var tr = _table1.getElementsByTagName('tr');
        $(tr).each(function(){
            $(this).css("background-color","");
        });
        $(this).css("background-color","red");

        //获取参数
        var cameraIndexCode= this.getAttribute("id"),
            presetIndex = this.getAttribute("name");

        //执行其它操作
        PTZOperate(cameraIndexCode,presetIndex)
    }

选择按钮点击事件及样式

$(document).on("click", ".select", function() {
var _table1 = document.getElementById('presetBody');
var tr = _table1.getElementsByTagName('tr');
$(tr).each(function(i){
    $(this).children('td').each(function(j){  // 遍历 tr 的各个 td
        if(j==2){
            $(this).find('button')[0].innerHTML="选择";
        }
    });
});
$(this)[0].innerHTML="已选";
//获取参数
var cameraIndexCode= this.getAttribute("id")
    presetIndex = this.getAttribute("name");

    //执行其它操作
    PTZOperate(cameraIndexCode,presetIndex)
})
发布了12 篇原创文章 · 获赞 4 · 访问量 4204
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览