通用javascript选择器，可在所有html元素上进行交互

Question

I started on that http://jsfiddle.net/DRFBG/

And if I add tables so 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>

How could I uniform my javascript code for all tables?

I've already tried passing by table[div^=mytable ]*, but the problem is the second selector in the function.

So any ideas please? Thank you? Sorry for my english

By the way, the code is to remove th with empty td for each table

$('#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

One approach is, selecting table s first and get their id and after that, doing the approach of http://jsfiddle.net/DRFBG/ on each of them like the following:

$('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();
        }
    });
});

Here is the working jsfiddle

Answer 2

To select all on your page you can use "table" selector.

So you'd need to use $('table2 th') instead of $('#mytable2 th')

Answer 3

One possible solution would be to loop through each column of each table, then check if there are any non-empty cells. If there is not, then you can safely remove() all the td and th within that column.

Note that the removal needs to be done last, otherwise it will affect the indexing of the following columns. You can do that by simply marking the cells to be removed with a class, and then selecting that class once all loops complete. Try this:

 $('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>