Проверьте, существует ли переменная в таблице html с javascript

Question

У меня есть две таблицы на данный момент. То, что я хочу достичь, - это выбрать строку в одной таблице, получить поле «имя файла», а затем проверить, существует ли это имя файла в другой таблице. Если файл существует в обеих таблицах, я хочу изменить цвет моего отслеживания хода. Сейчас у меня есть выбор строки, но я не могу проверить ее против другой таблицы. Любая помощь будет принята с благодарностью.

HTML:

<table id="table"> 
    <tr> 
    <td>--</td> 
    <td>Filename</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>Example1</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>Example2</td> 
    </tr> 
</table> 

<table id="table2"> 
    <tr> 
    <td>--</td> 
    <td>Filename</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td>Example1</td> 
    </tr> 
</table> 

<div id="words"> 
</div> 

JavaScript: снова

$("#table").find("tr").click(function(){ 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    var value=$(this).find('td:nth-child(2)').html(); 
    //alert(value); 
    document.getElementById("words").innerHTML = value; 
}); 

Спасибо за помощь!

Answer 1

Как прокомментировал @Pete, вы можете использовать if ($('#table2 td:contains(' + value + ')').length) следующим

$("#table").find("tr").click(function(){ 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    var value=$(this).find('td:nth-child(2)').html(); 
    //alert(value); 
    if ($('#table2 td:contains(' + value + ')').length) { 
     document.getElementById("words").innerHTML = value; 
    } else { 
     document.getElementById("words").innerHTML = "false"; 
    } 
}); 

Смотрите JSFiddle для рабочего примера: https://jsfiddle.net/v14L4bqr/

Answer 2

$("#table").on('click','tr',function(){     // <-- #1 
    var $this = $(this),        // <-- #2 
     filename = $this.find('td:nth-child(2)').text(), // <-- #3 
     $words = $('#words'); 

    $this.addClass('selected').siblings().removeClass('selected'); 
    $words.html(filename).css('color','black'); 

    if (valueInTable('table2', 1, filename)){   // <-- #4 
    $words.css('color', 'blue'); 
    } 

}); 

function valueInTable(tableID, columnNum, searchString){ 
    var found = false; 
    $('#' + tableID + ' tr td:nth-child(' + columnNum + ')').each(function(){ 
    if ($(this).text() == searchString){ 
     found = true; 
     return false; 
    } 
    }); 

    return found; 
} 

1. Это важно, это связывает событие в таблицу. Когда щелчок происходит где-то внутри таблицы, он проверяет реестр событий, в этом случае он проверяет, был ли нажат TR. Это как увеличение производительности, так как вы не создаете событие для каждой строки таблицы, но также при динамическом создании новых строк вам не нужно создавать новое событие, когда вы это делаете. Вы создаете это событие один раз и устанавливаете для всех новых/старых строк таблицы

2. Кэш $(this) в переменную. Вы используете его более одного раза, и, скорее всего, вы будете использовать его еще больше. Вы не должны создать новый JQuery объект каждый раз, когда вы хотите, чтобы обратиться к $(this), поэтому придерживаться его в переменной и использовать повторно, что

3. Хотя .html() может работать для вас, если у вас есть другой встроенный HTML, вы можете получить значения, которые вы не собирались (например, <span>filename</span>), по этой причине вам нужно .text() только, что будет просто дать вам текстовое значение и сдирать всю вложенную HTML (оставляя вам только filename)

4. Использование функции входит штраф, но хорошо поставить длинную логику в другом месте, если вы делаете что-то более активное. Например, ваша таблица может расширяться по ширине (количество столбцов), и вы также можете искать их для значения, или у вас может быть больше таблиц, которые вы хотите посмотреть; эта же функция может использоваться для обоих этих случаев.

как уже отмечалось, селектор :contains() был построен для того, что вы после Однако, есть один нюанс. Проблема с содержит в том, что ему не хватает настройки. Если вы хотите изменить свое сравнение как RegEx, или если вы хотите выполнять другие манипуляции с помощью обрезки или усечения, вы не можете сделать это с помощью contains. Вы можете легко изменить код, приведенный ниже, чтобы сделать: $.trim($(this).text()) == $.trim(searchString)