jQuery根据数据动态创建表格：列固定，行超出滚动条，绑定td点击事件等

 示例如图，代码如下:

 html:

        <div class="layui-row" id="avTableulL">
          <ul></ul>
        </div>
        <div id="avTableulR">
          <div id="avTableulT">
            <ul></ul>
          </div>
          <div id="avTableDiv">
            <div id="avNoData" srxyuyan="NoData"></div>
          </div>
        </div>

css： 

  #avTableulL {
    width: 100px;
    float: left;
    li {
      width: 100px;
      height: 44px;
      line-height: 44px;
      color: #fff;
      text-align: center;
      font-size: 13px;
    }
  }
  #avTableulR {
    margin-left: 100px;
    overflow: auto;
    #avTableulT {
      height: 44px;
      ul {
        width: 100%;
        height: 100%;
        li {
          float: left;
          width: 102px;
          height: 44px;
          line-height: 44px;
          color: #fff;
          text-align: center;
          font-size: 13px;
        }
      }
    }
    #avTableDiv {
      td {
        width: 100px;
        height: 42px;
        border: 2px solid #111;
        color: #fff;
        background: #787f86;
        cursor: pointer;
        text-align: center;
        min-width: 100px;
      }
      #avNoData {
        height: 260px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        margin-top: 100px;
        margin-left: -100px;
      }
    }
  }

js:

//模拟数据
let avList = [{"name" : "OUT1-1", "en" : 1, "outs" : 1, "outp" :1, "ins" : 1, "inp" :2 }, {"name" : "OUT1-2", "en" : 0, "outs" : 1, "outp" :2 , "ins" : 1, "inp" :2}, 
{"name" : "OUT1-3", "en" : 0, "outs" : 1, "outp" :3 , "ins" : 1, "inp" :2}, {"name" : "OUT1-4", "en" : 0, "outs" : 1, "outp" :4, "ins" : 1, "inp" :2 }];
let inList = [{"name" : "IN1-1", "ins" : 1, "inp" :1 }, {"name" : "IN1-2", "ins" : 1, "inp" :2}, 
{"name" : "IN1-3", "ins" : 1, "inp" :3}, {"name" : "IN1-4",  "ins" : 1, "inp" :4 },{"name" : "IN1-5", "ins" : 1, "inp" :5}, {"name" : "IN1-6",  "ins" : 1, "inp" :6}];

//表格行列头
function displayAvTableUl() {
    $("#avTableulL ul").empty();
    $("#avTableulT ul").empty();
    if(avList.length > 0) {
        $("#avTableulL ul").append("<li><img src='images/tableH.png'></li>");
        for (let i = 0; i < avList.length; i++) {
            let html = `<li>${avList[i].name}</li>`;
            $("#avTableulL ul").append(html);
            
        }
        for (let i = 0; i < inList.length; i++) {
            let item = inList[i];
            let html = `<li>${item.name}</li>`;
            $("#avTableulT ul").append(html);
            // dom.id = "audioTabIn" + item.ins + "_" + item.inp;
            // dom.onclick = audioInClick;
        }
    }
}

//表格td
function createAvTable() {
    $("#avTableDiv").empty();
    if(avList.length == 0) {
        $("#avTableDiv").append('<div id="avNoData">暂无数据</div>');
        return;
    }
    let tableNode = document.createElement("table");//获得对象 
    tableNode.setAttribute("id", "avTable");
    for (let x = 0; x < avList.length; x++) {
        let item = avList[x];
        let s = item.outs;
        let p = item.outp;
        let tr = document.createElement('tr');
        for (var y = 0; y < inList.length; y++) {
            let td = document.createElement('td');
            let ins = inList[y].ins;
            let inp = inList[y].inp;
            td.id = "avTd" + s + "-" + p + "_in" + ins + "-" + inp;
            td.setAttribute("outs", s);
            td.setAttribute("outp", p);
            td.setAttribute("ins", ins);
            td.setAttribute("inp", inp);
            td.setAttribute("en", 0);
            // let td = `<td id=${"avTableTd" + x + "_" + y} slot=${avList[x].slot} port=${avList[x].port} inslot=${wsAvSIGList[y].slot} port=${wsAvSIGList[y].port}></td>`;
            // $("#avTable").append(td);
            tr.appendChild(td);
        }
        tableNode.appendChild(tr);
    
    }
    document.getElementById("avTableDiv").appendChild(tableNode);

    $("#avTableulT").css("width" , $("#avTable").width());

    for (let i = 0; i < avList.length; i++) {
        let sub = avList[i];
        if(sub.en == 1) {
            let item = $("#avTd" + sub.outs + "-" + sub.outp + "_in" + sub.ins + "-" + sub.inp);
            item.css("background-image", "linear-gradient(#211919,#57e4ea)");
            item.attr("en", 1);
        }
    }

    $("#avTable td").on("click", function (e) {
        console.log($(e.currentTarget).attr("en"));
        let en = $(e.currentTarget).attr("en");
        let outS = parseInt($(e.currentTarget).attr("outs"));
        let outP = parseInt($(e.currentTarget).attr("outp"));
        let inS = parseInt($(e.currentTarget).attr("ins"));
        let inP = parseInt($(e.currentTarget).attr("inp"));
        if (en == 0) {//选中
            let inItem = inList.filter(function (item) {
                return item.ins == inS && item.inp == inP;
            });

            let outItem = avList.filter(function (item) {
                return item.en == 1 && item.outs == outS && item.outp == outP;
            });
            if (outItem.length > 0) {//控制每行只能选中一个td
                $("#avTd" + outS + "-" + outP + "_in" + outItem[0].ins + "-" + outItem[0].inp).css("background-image", "initial").attr("en", 0);
            }

            $(e.currentTarget).css("background-image", "linear-gradient(#211919,#57e4ea)");
            $(e.currentTarget).attr("en", 1);

            let aitem = avList.filter(function (item) {
                return item.outs == outS && item.outp == outP;
            });
            aitem[0].en = 1;
            aitem[0].ins = inS;
            aitem[0].inp = inP;
            aitem[0].name = inItem[0].name;

        } else {//取消选中
            for (let i = 0; i < avList.length; i++) {
                if (avList[i].outs == outS && avList[i].outp == outP) {
                    avList[i].en = 0;
                    break;
                }
            }
            $(e.currentTarget).css("background-image", "initial");
            $(e.currentTarget).attr("en", 0);
        }
    });
}