универсальный селектор javascript для взаимодействия со всеми элементами html - PullRequest
Новая
       10

универсальный селектор javascript для взаимодействия со всеми элементами html

0 голосов
/ 29 мая 2018

Я начал с этого http://jsfiddle.net/DRFBG/

И если я добавлю таблицы так 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>

Как я могу унифицировать мой код JavaScript для всех таблиц?

Я уже пробовал проходить мимо таблицы [div ^ = mytable ] *, но проблема в том, что второй селектор в функции.

Так что есть идеи, пожалуйста?Спасибо?Извините за мой английский

Кстати, код для удаления 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();
    }
});

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Чтобы выбрать все на своей странице, вы можете использовать "table" селектор.

Так что вам нужно будет использовать $('table2 th') вместо $('#mytable2 th')

0 голосов
/ 29 мая 2018

Одним из возможных решений будет цикл по каждому столбцу каждой таблицы, а затем проверка наличия непустых ячеек.Если нет, тогда вы можете безопасно remove() все td и th в этом столбце.

Обратите внимание, что удаление должно быть выполнено последним, иначе это повлияет на индексирование следующихколонны.Вы можете сделать это, просто пометив ячейки для удаления классом, а затем выбрав этот класс после завершения всех циклов.Попробуйте это: 

$('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>
0 голосов
/ 29 мая 2018

Один из подходов состоит в том, чтобы сначала выбрать table s и получить их идентификатор, а затем выполнить 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();
        }
    });
});

Вот рабочий jsfiddle

...