Выделите поле с помощью jquery

Question

Выделите поле с помощью jquery

0

Например, у меня есть эта таблица

<table class="table">
    <tr>
        <td>123</td>
        <td>456</td>
        <td>123</td>
        <td>456</td>
    </tr>
</table>

и этот список

<ul>
    <li>123</li>
    <li>456</li>
</ul>

Можно ли добавить style="background: yellow" в элемент <td> с тем же значением, что и элемент <li> используя jQuery. Это должно быть событие onclick или onhover.

Axxess 18 апр. 2014, в 16:22

Источник

3

Да, это возможно.
adeneo 18 апр. 2014, в 13:31
0

На каком событии или взаимодействии?
David Thomas 18 апр. 2014, в 13:33

Теги:

jquery

html

css

xhtml

5 ответов

0

Попробуй это:

$elements = $('td, li');
$elements.on('click, mouseover', function () {
    var elem = this;
    $elements.each(function () {
        this.style.backgroundColor = (this !== elem && this.innerHTML === elem.innerHTML && this.tagName !== elem.tagName) ? "green" : "";
    });
});

Рабочий скрипт

Mr_Green 18 апр. 2014, в 12:45

0

Пожалуйста, проверьте это демо, и я считаю, что вы ожидаете этого

$ (document).ready(function() {

$( "#ulList li" ).mouseover(function() {
    var selectedText = $( this ).text();
    $('#tableList tr td').each(function(i, val) {
       if(selectedText == $(val).text()){
          $( val ).css( "background-color", "yellow" );
       }
    });    });
    $( "#ulList li" ).mouseout(function() {
    $('#tableList tr td').each(function(i, val) {
       $( val ).css( "background-color", "white" );

    });    });
 });

демонстрация

Asik 18 апр. 2014, в 12:31

0

Вы можете использовать:

$('ul li').click(function() {
    $('.table tr td').css('background','none');
    var val = $.trim($(this).text());
    $('.table tr td').filter(function() {
        return $.trim($(this).text()) == val    
    }).css('background','yellow');
});

Демо-версия скрипта

Felix 18 апр. 2014, в 10:53

0

Шаг 1: найдите все значения от li на загрузке страницы

  var values;
  $("li").each(function(){
     values.push($(this).text());
  });

Шаг 2: Проверьте, содержит ли td эти значения для любого желаемого события

  $(".table tr").each(function(){
      var val = $(this).text();
      if($.inArray(val,values)){
         // apply style
         $(this).css("background","yellow")
      }
  });

xyz 18 апр. 2014, в 10:48

Ещё вопросы

На каком событии или взаимодействии?

Hüseyin BABAL · Accepted Answer · 2014-04-18T10-49-00.000Z

Вы можете использовать следующее;

$("td").on("mouseover", function () {
    var tdVal = $(this);
    $("li").each(function() {
        if ($(this).text() == tdVal.text()) {
            tdVal.css("background", "yellow");    
        }
    });   
}).on("mouseleave", function() {
    $(this).css("background", "white");    
});

Вот рабочая демонстрация: jsFiddle