Необходимо убрать выделение строки после выбора следующего ряда - PullRequest
Новая
       39

Необходимо убрать выделение строки после выбора следующего ряда

0 голосов
/ 06 сентября 2018

Мне нужно убрать выделение строки, когда я нажимаю на следующую строку таблицы.

Когда я использую приведенный ниже код, строка таблицы выделяется при щелчке меню в значке шестеренки. Затем, когда я нажимаю на другую строку таблицы или значок шестеренки, существующая подсветка строки таблицы не удаляется. Кто-нибудь, пожалуйста, дайте мне предложения о том, как это исправить. 

    click: function () {
label: 'Delete LMD Definition',
icon: 'delete',
   $("table tbody").on("click", "tr", function () {
  $("tr.selected")  // find any selected rows
     .not(this)  // ignore the one that was clicked
     .removeClass("selected");  // remove the selection
   $(this).toggleClass("selected");  // toggle the selection clicked row
});
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ember18549" class="ember-view content-table focus-group object-table container-view highlighted">
  <tbody>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
  </tbody>
</table>

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Это чисто jQuery, и я настоятельно рекомендую против этого. Вы должны использовать ember, если можете. Но поскольку вы уже используете jQuery для этого и не показываете свой ember код, это самое легкое для вас решение.

Просто добавьте класс css для штата. Затем используйте removeClass на всех других строках и addClass на выделенной линии. 

$(function() {
  $("table.content-table.highlighted tr.content-row").on("focusout", function() {
    $('table.content-table.highlighted tr.content-row').removeClass('my-line');
    $(this).addClass('my-line');
  });
});
.my-line {
  background: #FFFF99 none 0 0 repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="content-table highlighted">
  <tbody>
    <tr class="content-row" tabindex="0" aria-label="">
      <td>
        FOO
      </td>
      <td>
        BAR
      </td>
    </tr>
    <tr class=" content-row" tabindex="0" aria-label="">
      <td>
        BAZ
      </td>
      <td>
        BAL
      </td>
    </tr>
  </tbody>
</table>
0 голосов
/ 06 сентября 2018

Если бы вы использовали классы и правила CSS, это было бы очень просто. Используйте состояние наведения CSS для выделения и используйте clickc для добавления / удаления классов для выделения. 

$("table tbody").on("click", "tr", function () {
  $("tr.selected")  // find any selected rows
     .not(this)  // ignore the one that was clicked
     .removeClass("selected");  // remove the selection
   $(this).toggleClass("selected");  // toggle the selection clicked row
})
table{
border-collapse: collapse;
}

table tbody td {
  border: 1px solid black;
  padding: 1em;
}

table tbody tr:hover {
  background-color: #CCC;
  cursor: pointer;
}


table tbody tr.selected {
  background-color: #9999AA;
}

table tbody tr.selected:hover {
  background-color: #BBB;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td><td>Pizza</td>
    </tr>
    <tr>
      <td>2</td><td>Taco</td>
    </tr>
    <tr>
      <td>3</td><td>Burger</td>
    </tr>
    <tr>
      <td>4</td><td>Salad</td>
    </tr>
</table>
0 голосов
/ 06 сентября 2018

Попробуйте использовать 

$("table.content-table").click(function(){
  $(this).toggleClass("highlighted");
});

При каждом нажатии этой таблицы выделенный класс будет добавляться или удаляться.

Или следующий код, чтобы каждая таблица не выбиралась, пока выбирается та, которую вы нажимаете. 

$("table.content-table").click(function(){
  $("table.content-table").removeClass("highlighted");
  $(this).addClass("highlighted");
});
...