在所有 html 元素上交互的通用 javascript 选择器

Question

如果我添加 tables 那么 mytable1, mytable2,...

<table id="mytable1" border="1">  
 <tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
 <tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
 <tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>  
 <tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>  
 <tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</table>

<table id="mytable2" border="1">  
 <tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
 <tr class="data"><td>1st</td><td>1.1</td><td>1</td><td></td></tr>
 <tr class="data"><td>2nd</td><td>2.01</td><td>2</td><td></td></tr>  
 <tr class="data"><td>3rd</td><td>3.001</td><td>3</td><td></td></tr>  
 <tr class="data"><td>4th</td><td>4.01</td><td>4</td><td></td></tr>
</table>

我如何为所有 table 统一我的 javascript 代码？

我已经尝试通过table[div^=mytable]*，但问题是第二个函数中的选择器。

有什么想法吗？谢谢？对不起我的英语

顺便说一句，代码是为每个 table

删除带有空 td 的 th

$('#mytable2 th').each(function(i) {

    var remove = 0;

    var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
    tds.each(function(j) { if (this.innerHTML == '') remove++; });

    if (remove == ($('#mytable2 tr').length - 1)) {
         $(this).hide();
        tds.hide();
    }
});

Answer 1

一种方法是，首先选择 tables 并获取它们的 ID，然后对它们中的每一个执行 http://jsfiddle.net/DRFBG/ 的方法，如下所示：

$('table').each(function()
{
    var tb_id = $(this).attr('id');
    $('#'+tb_id+' th').each(function(i) {
        var remove = 0;

        var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
        tds.each(function(j) { if (this.innerHTML == '') remove++; });

        if (remove == ($('#'+tb_id+' tr').length - 1)) {
            $(this).hide();
            tds.hide();
        }
    });
});

这是working jsfiddle

Answer 2

要select您页面上的所有内容您都可以使用"table"select或

所以你需要使用 $('table2 th') 而不是 $('#mytable2 th')

Answer 3

一种可能的解决方案是遍历每个 table 的每一列，然后检查是否有任何非空单元格。如果没有，那么您可以安全地 remove() 该列中的所有 td 和 th。

注意移除需要最后进行，否则会影响后面的列的索引。您可以通过简单地用 class 标记要删除的单元格，然后在所有循环完成后选择 class 来做到这一点。试试这个：

$('table').each(function() {
  var $table = $(this);
  var rows = $table.find('tr').length - 1; // -1 to account for the headings

  $table.find('th').each(function(i, th) {
    var $empty = $table.find(`td:nth-child(${i + 1}):empty`);
    if ($empty.length == rows) 
      $empty.add(this).addClass('to-remove');
  })
  
  $table.find('.to-remove').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" border="1">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
  </tr>
  <tr class="data">
    <td>1st</td>
    <td>1.1</td>
    <td></td>
    <td>1</td>
  </tr>
  <tr class="data">
    <td>2nd</td>
    <td>2.01</td>
    <td></td>
    <td>2</td>
  </tr>
  <tr class="data">
    <td>3rd</td>
    <td>3.001</td>
    <td></td>
    <td>3</td>
  </tr>
  <tr class="data">
    <td>4th</td>
    <td>4.01</td>
    <td></td>
    <td>4</td>
  </tr>
</table>

<table id="mytable2" border="1">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
  </tr>
  <tr class="data">
    <td>1st</td>
    <td>1.1</td>
    <td>1</td>
    <td></td>
  </tr>
  <tr class="data">
    <td>2nd</td>
    <td>2.01</td>
    <td>2</td>
    <td></td>
  </tr>
  <tr class="data">
    <td>3rd</td>
    <td>3.001</td>
    <td>3</td>
    <td></td>
  </tr>
  <tr class="data">
    <td>4th</td>
    <td>4.01</td>
    <td>4</td>
    <td></td>
  </tr>
</table>

在所有 html 元素上交互的通用 javascript 选择器

universal javascript selector to interact on all html element

html

javascript

jquery

selector