复选框隐藏多级表单的列

复选框隐藏多级表单的列，遇到问题是前两个复选框有作用，打点第一个for循环两次之后会报错（ cell.style.display = 'table-cell';cell.style.display = 'none';）或者跳转其他js，

 function showcategory(){
        var category = document.getElementsByName("running");//复选框name=running
        var tab = document.getElementById("editable-sample");//表格id
        var leng = category.length;
        for(var j = 0;j<leng;j++){
            console.log(category[j].checked);
            if(category[j].checked){//判断是否选中
                var trs = tab.rows;//获取表格单元格
                for(var i = 0, len = trs.length; i < len; i++){
                    var cell = trs[i].cells[j];
                    cell.style.display = 'table-cell';
                }
            }else{
                var trs = tab.rows;
                for(var i = 0, len = trs.length; i < len; i++){
                    var cell = trs[i].cells[j];
                    cell.style.display = 'none';
                }

            }

        }
    }
    showcategory();
    $("input[name='running']") .click(function(){
        showcategory();
    })

在 el-table-column 上绑定v-if就可以控制隐藏了吧？

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答由chatgpt基于相关博客总结生成:

  优化以上代码的方法有： 1. 将JavaScript代码中的循环遍历部分提取出来，减少重复代码。 2. 使用事件委托的方式来添加点击事件，避免每次点击都要调用一次showcategory函数。 3. 使用classList属性来添加和移除类，而不是直接修改样式的display属性。 4. 将代码封装成一个可以复用的函数。

  以下是优化后的JavaScript代码：

  function toggleColumns() {
      var category = document.getElementsByName("running");    // 获取所有复选框
      var tab = document.getElementById("editable-sample");    // 获取表格
      var trs = tab.rows;    // 获取所有表格行
  
      for(var i = 0, len = trs.length; i < len; i++){
          for(var j = 0; j < category.length; j++){
              var cell = trs[i].cells[j];
              if (category[j].checked) {    // 判断复选框是否选中
                  cell.classList.remove('hidden');    // 移除'hidden'类
              } else {
                  cell.classList.add('hidden');    // 添加'hidden'类
              }
          }
      }
  }
  
  toggleColumns();
  
  document.addEventListener('click', function(event) {
      if (event.target.name === 'running') {
          toggleColumns();
      }
  });
  

  在以上代码中，我们将循环遍历部分提取出来变为嵌套循环，用于遍历所有表格行和所有复选框。然后使用classList属性来添加或移除名为'hidden'的类，来隐藏或显示相应的表格列。

  我们还使用事件委托的方式来添加点击事件，当点击的目标元素是复选框时，调用toggleColumns函数。这样做可以避免每次点击都要调用一次showcategory函数。

  请注意，在上述代码中，我们假设存在一个名为'hidden'的CSS类，用于隐藏表格列。您需要定义并添加适当的CSS样式。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^