jquery - Check if variable exists in a html table with javascript - Stack Overflow

admin管理员组

文章数量:1430708

I have two tables at the moment. What Im looking to achieve is to select a row in one table, obtain the "filename" field from that and then check if that filename exists in the other table. If the file exists in both tables I want to change the colour of my progress tracker. Right now I have the selecting of the row working, but I can't seem to check it against the other table. Any help would be greatly appreciated.

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;
});

Thanks again for the help!

I have two tables at the moment. What Im looking to achieve is to select a row in one table, obtain the "filename" field from that and then check if that filename exists in the other table. If the file exists in both tables I want to change the colour of my progress tracker. Right now I have the selecting of the row working, but I can't seem to check it against the other table. Any help would be greatly appreciated.

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;
});

Thanks again for the help!

• javascript
• jquery
• html-table

Share Improve this question Follow edited Feb 23, 2016 at 15:35 Kishor 2,67744 gold badges1818 silver badges3434 bronze badges asked Feb 23, 2016 at 15:12 useruser 39522 gold badges1212 silver badges2828 bronze badges 5

• 3 Posting the actual HTML would be helpful to provide a better answer, or post a link to a JSFiddle of what you've got so far. – omninonsense Commented Feb 23, 2016 at 15:18
• 1 if ($('#table2 td:contains(' + filename + ')').length) // do stuff – Pete Commented Feb 23, 2016 at 15:20
• Sorry I just added the HTML, the fields are being populated from files using php so I can't really show a lot of whats happening – user Commented Feb 23, 2016 at 15:36
• I'll upvote your question, since it's difficult to do certain things when you're new, but this site is set up to protect from spammers/scammers. You can also think about changing your username. A few upvotes should be all you need to ment and do other things. – vol7ron Commented Feb 23, 2016 at 17:48
• Thanks a lot @vol7ron! – user Commented Feb 24, 2016 at 9:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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. This is important, this binds the event to the table. When a click occurs somewhere inside the table it checks the event registry, in this case, it checks to see if a TR was clicked. This is both a performance gain, since you're not creating an event for each row of the table, but also if you create new rows dynamically, you don't have to create a new event when you do. You create this event once and it's in place for all new/old rows of the table

2. Cache $(this) into a variable. You use it more than once and chances are you'll use it even more. You should not create a new jQuery object every time you want to refer to $(this), so stick it in a variable and reuse that

3. While .html() may work for you, if you have other embedded HTML, you might get values you were not intending (e.g., <span>filename</span>), for that reason, you only need .text(), which will just give you the text value and strip off all the nested HTML (leaving you with only filename)

4. Using a function es with a penalty, but it's good to put long-logic elsewhere, in case you're doing anything more involved. For instance, your table could expand in width (number of columns) and you might also want to search them for a value, or you might have more tables you want to look in; this same function can be used for both of those cases.

as noted, the :contains() selector was built for what you're after However, there is one caveat. The problem with contains is that it lacks customization. If you want to modify your parison to be a RegEx, or if you want to perform other manipulation using trim or truncate, you can't do that with contains. You could easily modify the code below to do: $.trim( $(this).text() ) == $.trim( searchString )

As @Pete mented, you can use if ($('#table2 td:contains(' + value + ')').length) as follows

$("#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";
    }
});

See the JSFiddle for working example: https://jsfiddle/v14L4bqr/

本文标签： jqueryCheck if variable exists in a html table with javascriptStack Overflow