Locate row in php table without id

Navigation
0

As you would to place a row in a table that is armed in the following way: 

<table cellpadding="0" cellspacing="0" border="0" style="width:740px !IMPORTANT; overflow:scroll; border:1px solid #FF6600;" class="display2">
  <tr style="background:yellow">
    <td align="center">9045</td>
    <td style="padding:2px 6px; width:15%; text-align:center;" class="jugador6275">Sr contreras</td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp5</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">3</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp8</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">3</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp5</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:red">0</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp3</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">3</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp5</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:red">0</span></td>
        </tr>
      </table>
    </td>
    <td align="center">
      <table class="puntos">
        <tr>
          <td align="left" style="padding-right:14px;border-width:1px; width:50%; border:none;"><b style="font-size:14px">&nbsp8</b></td>
          <td align="right" style="padding-left:14px; width:50%; border:none; "><span style="color:blue">1</span></td>
        </tr>
      </table>
    </td>
    <td align="center" style="color: #fff; background:#0099FF;"><b style="color: #fff; font-size:13px">10</td></b></tr>
  <tr>
</table>

the result is the following:

I want to locate the row based on the result of the first column, which in this case is 9045 but it can be another. I usually place them with document.getElementById adding an id to each row, but this table is armed with a query from the database and I can not modify it. What I'm looking for is to locate a series of elements to paint the rows related to the user I entered.

    
asked by Yoel Mendoza 07.03.2018 в 16:51
source

2 answers

1

You can use the first child selector of css: :first-child or :nth-child(1) and ask if it has the value equal to the one you need and if it is positive, add a class using the selector .parent of jquery :

like this: 

var celda1ra = $('td:nth-child(1)');

celda1ra.each(function() {
    if ($(this).text() == '456') {
        $(this).parent().addClass('highlight');
    }
});

Here is a visual example: 

$('td:nth-child(1)').each(function() {
    if ($(this).text() == '456') {
        $(this).parent().addClass('highlight');
    }
});
table, table *{
  border: solid 1px gray;
}

.highlight{
  background-color: yellow;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<table>
 <tr>
   <td>456</td>
   <td>212</td>
   <td>87</td>
   <td>39</td>
 </tr>
 <tr>
   <td>25</td>
   <td>45</td>
   <td>978</td>
   <td>25</td>
 </tr>
 <tr>
   <td>87</td>
   <td>456</td>
   <td>98</td>
   <td>12</td>
 </tr>
</table>

If you notice, I'm asking for the value 456 and although it is located in two rows, only the row selects me when the first cell is the one that contains the value.

Now if you have other nests or tables in the first cell, you can use the parents selector and specify a criteria that is fulfilled only once, for example:

.parents ('table'). parents ('tr')

The above means that you will select the table nearest ancestor and from this, select a tr nearest. Example: 

$('td:first-child td').each(function() {
    if ($(this).text() == '456') {
        $(this).parents('table').parents('tr').addClass('highlight');
    }
});
table, table *{
  border: solid 1px gray;
}

.highlight{
  background-color: yellow;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<table>
 <tr>
   <td>456</td>
   <td>212</td>
   <td>
    <table>
      <tr>
        <td>456</td>
        <td>25</td>
      </tr>
    </table>
   </td>
   <td>39</td>
 </tr>
 <tr>
   <td>25</td>
   <td>45</td>
   <td>978</td>
   <td>25</td>
 </tr>
 <tr>
   <td>
    <table>
      <tr>
        <td>456</td>
        <td>25</td>
      </tr>
    </table>
   </td>
   <td>87</td>
   <td>98</td>
   <td>12</td>
 </tr>
 <tr>
   <td>21</td>
   <td>768</td>
   <td>09</td>
   <td>356</td>
 </tr>
</table>

Is this what you needed?

    
answered by 07.03.2018 в 21:08
0

I can think of something like adding a class to td and iterating over the class, doing the search, something like that 

$('.td_class').each(function(i, obj) {
    var val = $(this).text();
    if (val == "id") {
        $(this).css("background-color", "blue");
    }
});

I think it could work

    
answered by 07.03.2018 в 17:59
Problem with Printf and Scanf Join while with for to fill in html table for working hours