问题描述

我使用 jQuery 创建了一个 div，这个 div 里面放了一个 table，table 用于展示数据。
在table内容过多的时候会出现默认滚动条(因为设置了 overflow:auto)，但是我这时候想隐藏此滚动条，
在 less 文件中写好了一个类(scatter-table)，这时候我想在动态创建的 div 上添加这个类（使用的是 $.addClass("scatter-table")），但是发现超出内容后滚动条还是有显示。这个 scatter-table 对静态的 div 是有效的，但是不知道怎么给动态生成的 div 添加这个 scatter-table。

想问问我该怎么给动态生成的 div 设置这个 scatter-table?

动态生成的div直接加class或者用className属性赋值样式

div.className="scatter-table";

overflow:hidden可以隐藏滚动条，不过我建议你对table或者div不要写死高度或者宽度即可，如果设置宽度高度可以采用百分比的方式

隐藏 滚动条 就是 overflow:hidden .就行 。 addClass 审查元素 看一下，是否加上了 。

嗯 如果你的div是动态添加的 那你可以尝试在动态添加时就可以将对应的 class 就写上

如果说你是点击事件无法获取到对应的数据的话可以用此种方式 获取动态添加的属性
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});

补充

我解释下我的代码结构，这是一个 angular 项目，在主页面触发点击事件后，会传递参数到一个自定义工具类(ProjectUtils.ts)中的mapScatterClickAndGenerateTable() 方法，这个方法内就是动态生成table，然后添加到 monitor-project-component.html 中的 div.con-center，然后主页面组件结构是：monitor-project.component.html,monitor-project.component.ts,monitor-project.component.less;
// .con-center 是 monitor-project-component.html 中的元素的类
在 monitor-project.component.less 中有 scatter-table 类样式：

/** scatter table 去除下拉框 */
.scatter-table::-webkit-scrollbar {
  width: 1px;
  height: 1px;
  background-color: rgba(240, 240, 240, 0.1);
  border-radius: 10px;
}

.scatter-table::-webkit-scrollbar-track {
  background-color: rgba(4, 56, 114, 0.5);
  border-radius: 10px;
  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
}

.scatter-table::-webkit-scrollbar-thumb {
  background-color: rgba(2, 33, 54, 0.5);
  border-radius: 10px;
  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
}

 /** 散点图点击并生成table */
  mapScatterClickAndGenerateTable(e: any, head: string[], body: project[]) {
    if (e?.componentSubType == 'effectScatter') {
      // 创建遮挡层
      this.creatWrap();
      // 创建 table div容器
      var divX = this.getMousePos(e)['x'];
      var divY = this.getMousePos(e)['y'];
      var divObj = document.createElement('div');
      divObj.className = 'scatter-table';
      // var divObj2 = document.getElementById('dynamicTable');
      // console.log(divObj2?.classList[0]);
      // var divObj = document.getElementById('scatter-table');
      divObj.id = 'scatterTable';

      //动态生成表格
      let str = '<table class="scatter-table">';
      str += '<tr style="width: 100%; background-color:#191970;">';
      for (var i = 0; i < head.length; i++) {
        str += '<th style="height: 20px;width: 30%; color:gold; font-size: 14px">' + head[i] + '</th>';
      }
      str += '</tr>';
      for (var i = 0; i < body.length; i++) {
        str += '<tr>';
        str += '<td>' + body[i].serviceCenter + '</td>';
        str += '<td>' + body[i].projectName + '</td>';
        str += '<td>' + body[i].startTime + '</td>';
        str += '<td>' + body[i].endTime + '</td>';
        str += '</tr>';
      }
      str += '</table>';
      //把拼接好的html放到tbody中去
      $(divObj)
        .html(str)
        .css({
          width: '350px',
          height: '200px',
          border: '1px solid #a0c6e5',
          'border-collapse': 'collapse',
          position: 'absolute',
          // backgroundColor: 'rgba(0,0,0,.7)',
          backgroundColor: '#191970',
          top: divY - 80,
          left: divX - 500,
          'z-index': 1000,
          color: 'white',
          'font-size': '12px',
          overflow: 'auto',
          'padding-left': '2px',
          'text-align': 'center',
        })
        .addClass('scatter-table')
// .con-center 是 monitor-project-component.html 中的元素的类
        .appendTo('.con-center');
      // 添加点击事件点击遮挡层消失
      this.clearWrap('.cover', '#scatterTable');
    }
  }

结果页面

有尝试将 scatter-table 写到动态生成的 div 里面，或者写到被 appendTo 的 div.co-center 上，但是都没起效。打开控制台调试了下，发现元素上有 scatter-table 类，但是在下面的 Styles 没看到 scatter-table 被使用！

这个我上传不了图片！