Найти совпадающие данные между 2 таблицами разных столбцов в jQuery или Javascript - PullRequest
Новая
       1

Найти совпадающие данные между 2 таблицами разных столбцов в jQuery или Javascript

1 голос
/ 13 февраля 2020

У меня есть 2 таблицы разных столбцов, и я пытаюсь сопоставить данные между 2 и найти совпадающие имя и фамилию. Я продолжаю сталкиваться с проблемами, когда общие имена совпадают в других строках. Смотрите мою скрипку для структуры таблицы и моей попытки. https://jsfiddle.net/0e3moacu/1/

jQuery('#attendee02 tr td:nth-child(n+2):nth-child(-n+3)').each(function(){
        var row=jQuery(this).html();
        jQuery('#attendee01 tr td:nth-child(n+3):nth-child(-n+4)').each(function(){
            if(row==jQuery(this).html()) jQuery(this).css('background-color', 'lightblue');
        });
    });

1 Ответ

1 голос
/ 14 февраля 2020

Это можно сделать, изменив код jQuery и найдя текущий индекс элемента (), а затем проверив следующее () ... 

jQuery('#attendee02 tr td:nth-child(n+2):nth-child(-n+3)').each(function(){
            var row=jQuery(this).html();
            var next=jQuery(this).next().html();
            jQuery('#attendee01 tr td:nth-child(n+3):nth-child(-n+4)').each(function(){
                if(row==jQuery(this).html() && next==jQuery(this).next().html()){
                		jQuery(this).css('background-color', 'lightblue');
                    jQuery(this).next().css('background-color', 'lightblue');
                } 
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="attendee01" class="table01">
  <thead>
    <tr>
      <th>Role</th>
      <th>Org</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Title</th>
      <th>Reg Status Details</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>CIO</td>
      <td> Health</td>
      <td class="edituser" >Andy</td>
      <td class="edituser">Tom</td>
      <td>SVP</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">15080</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Northern</td>
      <td class="edituser" >John</td>
      <td class="edituser">Brd</td>
      <td>VP</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">680</td>
    </tr>

    <tr>
      <td>CIO</td>
      <td> Life </td>
      <td class="edituser">Brean</td>
      <td class="edituser">Lghman</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">462</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>John</td>
      <td> Thompson</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>John</td>
      <td> Travolta</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr> 
    
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>Maria</td>
      <td> Thompson</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr> 
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>Cindy</td>
      <td> Beiss</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>Alan</td>
      <td> Hendel</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr>    

  </tbody>
  <tfoot>
  </tfoot>
</table>
<br>
<table id="attendee02" style="display:non">
  <thead>
    <tr>
      <th>Organization</th>
      <th> FName</th>
      <th> LName</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>  System</td>
      <td>Alan</td>
      <td> Beiss</td>

    </tr>
    <tr>
      <td> Institute</td>
      <td>Cindy</td>
      <td> Hendel</td>

    </tr>
    <tr>
      <td> Health </td>
      <td>John</td>
      <td> Thompson</td>

    </tr>


    
  </tbody>
</table>

Я не был уверен, что вам нужно раскрасить их в обеих таблицах, потому что в случае использования массивов javascript мне кажется проще, и я ' я не уверен, что это быстрее в этом случае.

Что здесь сделано, так это отображение этих ячеек, сохраняя те же логики c, которые использовались в ваших jQuery селекторах, при этом те же индексы, что и jQuery, найденные в документ. 

t1=[];
t2=[];

//Mapping all cell values by keeping the same rows indexes
//That we use later for jquery
$('#attendee01 tr').each(function(index, tr) {
    var tab1 = $('td', tr).map(function(index, td) {
        return $(td).text();
    });
    t1.push(tab1);
});
$('#attendee02 tr').each(function(index, tr) {
    var tab2 = $('td', tr).map(function(index, td) {
        return $(td).text();
    });
    t2.push(tab2);
});

//Nested Loop to look for similar values in two sibling cells
for (var i = 1, length = t1.length; i < length; i++) {          
    for (j=2,lim=t1[i].length; j<lim-4;j++){
            for (var k = 1, lim2 = t2.length; k < lim2; k++) {
                for (var z = 1, lime = t2[k].length; z < lime; z++) {
                        if(t2[k][z]==t1[i][j] && t2[k][z+1]==t1[i][j+1]){
                        //console.log(t2[k][z]);
                        $('#attendee01 tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', 'lightblue');
                        $('#attendee01 tr:eq(' + i + ') td:eq(' + (j+1) + ')').css('background-color', 'lightblue');
                        $('#attendee02 tr:eq(' + k + ') td:eq(' + z + ')').css('background-color', 'lightblue');
                        $('#attendee02 tr:eq(' + k + ') td:eq(' + (z+1) + ')').css('background-color', 'lightblue');
                        }
                }
            }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="attendee01" class="table01">
  <thead>
    <tr>
      <th>Role</th>
      <th>Org</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Title</th>
      <th>Reg Status Details</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>CIO</td>
      <td> Health</td>
      <td class="edituser" >Andy</td>
      <td class="edituser">Tom</td>
      <td>SVP</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">15080</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Northern</td>
      <td class="edituser" >John</td>
      <td class="edituser">Brd</td>
      <td>VP</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">680</td>
    </tr>

    <tr>
      <td>CIO</td>
      <td> Life </td>
      <td class="edituser">Brean</td>
      <td class="edituser">Lghman</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">462</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>John</td>
      <td> Thompson</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>John</td>
      <td> Travolta</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr> 
    
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>Maria</td>
      <td> Thompson</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr> 
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>Cindy</td>
      <td> Beiss</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr>
    <tr>
      <td>CIO</td>
      <td>Health</td>
       <td>Alan</td>
      <td> Hendel</td>
      <td>CIO</td>
      <td class="nowrap status"></td>
      <td class="notes"> </td>
      <td class="edituser_id" style="display:none;">369</td>
    </tr>    

  </tbody>
  <tfoot>
  </tfoot>
</table>
<br>
<table id="attendee02" style="display:non">
  <thead>
    <tr>
      <th>Organization</th>
      <th> FName</th>
      <th> LName</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>  System</td>
      <td>Alan</td>
      <td> Beiss</td>

    </tr>
    <tr>
      <td> Institute</td>
      <td>Cindy</td>
      <td> Hendel</td>

    </tr>
    <tr>
      <td> Health </td>
      <td>John</td>
      <td> Thompson</td>

    </tr>


    
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...