Блог

Главная - Вопросы по программированию - Выделите строки выбранного идентификатора источника строки строками таблицы идентификаторов назначения

Выделите строки выбранного идентификатора источника строки строками таблицы идентификаторов назначения

#javascript #jquery

#javascript #jquery

Вопрос:

Если я установил флажок левой таблицы id и соответствует ли он идентификатору или идентификаторам таблицы назначения (один или несколько). Необходимо выделить соответствующие правильные строки таблицы. Я пытался и не смог выделить строки таблицы с правой стороны. введите описание изображения здесь

   $(function(){

  $(":checkbox").change(function() {
        $(this).closest("tr").toggleClass("highlight", this.checked)
    })

    $('#btn').on('click', function(e){
        $('#left_table tbody tr').each(function(){
            var row=$(this).html();
            $('#right_table tbody tr').each(function(){
                if(row==$(this).html())
                //$(this).remove();
                $(this).css("background","red");
            });
        });
    });
});

Скрипка

Ответ №1:

1 . Используйте .text() вместо .html() для сравнения

2 . Во многих местах отсутствуют теги, такие как open close tr и td , поэтому исправьте это.

3. найдите установленный флажок и сравните, если он установлен, затем добавьте условие

Примечание: вместо css("background","red") , вы можете присвоить style некоторым class , и add/remove этот класс

 $(function(){

  $(":checkbox").change(function() {
        $(this).closest("tr").toggleClass("highlight", this.checked)
    })

    $('#btn').on('click', function(e){
            $('#right_table tbody tr').css("background","#fff");
        $('#left_table tbody tr').each(function(){
        
            var row=$(this).text();
            var isChecked = $(this).find("input:checkbox").is(":checked");
           
            $('#right_table tbody tr').each(function(){
                    var _t = $(this);
                
                if(row==_t.text() amp;amp; isChecked){
                    _t.css("background","red");
                }
                //$(this).remove();
                
            });
        });
    });
});  
 table{float:left;margin:5px;}
label { display: block; }
.highlight { background-color: yellow; }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="left_table" border='1'>
    <thead><tr><th></th><th>Column One</th><th>Column Two</th></tr></thead>
    <tbody>
        <tr><td><input type="checkbox" id="chkbox1"/></td><td>One</td><td>Two</td></tr>
        <tr><td><input type="checkbox" id="chkbox2"/></td><td>Three</td><td>Four</td></tr>
    </tbody>
</table>

<table id="right_table" border='1'>
    <thead><tr><th>Column One</th><th>Column Two</th></tr></thead>
    <tbody>
          <tr><td>One</td><td>Two</td></tr>
        <tr><td>Three</td><td>Four</td></tr>
        <tr><td>Five</td><td>Six</td></tr>
         <tr><td>Three</td><td>Four</td></tr>
        <tr><td>Five</td><td>Six</td></tr>
         <tr><td>Three</td><td>Four</td></tr>
        <tr><td>Five</td><td>Six</td></tr>
        <tr><td>One</td><td>Two</td></tr>
    </tbody>
</table>

<br /><br /><br /><br />

<button id="btn">Highlight Rows</button>

Ответ №2:

Я думаю, что это более элегантно

 $(function() {
  const $leftTBody = $('#left_table tbody');
  const $rightTBody = $('#right_table tbody');
  $leftTBody.on("change", ":checkbox", function() { 
    $(this).closest("tr").toggleClass("highlight", this.checked)
  });

  $('#btn').on('click', function(e) {
    $('tr',$rightTBody).toggleClass("red", false); // turn off

    $(':checkbox:checked', $leftTBody).each(function() {
      const text = $(this).closest("tr").text().replace(/s /g,"");
      $("tr", $rightTBody).filter(function() {
          return $(this).text().replace(/s /g,"") == text;
        })
        .toggleClass("red")
    });
  });
});  
 table {
  float: left;
  margin: 5px;
}

label {
  display: block;
}

.highlight {
  background-color: yellow;
}

.red {
  background-color: red;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="left_table" border='1'>
  <thead>
    <tr>
      <th></th>
      <th>Column One</th>
      <th>Column Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" id="chkbox1" /></td>
      <td>One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="chkbox2" /></td>
      <td>Three</td>
      <td>Four</td>
    </tr>
  </tbody>
</table>

<table id="right_table" border='1'>
  <thead>
    <tr>
      <th>Column One</th>
      <th>Column Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
  </tbody>
</table>

<br /><br /><br /><br />

<button id="btn">Highlight Rows</button>