CODEWITHSUNDEEP
javascriptjqueryhtml
SantiBailors
SantiBailors

Reputation: 1634

Referencing with Javascript/jQuery the rows of a table that has no id while holding an instance of one of its rows

I have several tables in my page and none of them has an id attribute.

I retrieve with Javascript or jQuery a row of one of these tables. Then I want to do things to all the rows of that table but not to any row of any other table. Selecting such rows through jQuery would do, and also doing that with Javascript would be ok.

So I need to identify a table and the only thing I know about it is that this row belongs to it. Is it possible ?

Runnable example:

<html>

<head>

<script src="jquery-1.11.3.js"></script>

<style>

.myYellow
{
    background-color: yellow;
}

</style>

<script type="text/javascript">

function doStuff() {

  var jqRow = jQuery("#r1t1"); if (jqRow.length !== 1) throw "ERROR";

  var htmlRow = jqRow.get(0); // How do I restrict the jqSelectedRows below to only the table this row belongs to ?

  var jqSelectedRows = jQuery("tr.myYellow"); // But I only want the yellow rows of the table containing htmlRow .

  jqSelectedRows.each(function(index) {

    this.setAttribute("style", "background-color: blue");

  });
}

</script>

</head>

<body>

  <table border="1">

    <tr id="r1t1"                 ><td>r1 t1</td></tr>

    <tr id="r2t1" class="myYellow"><td>r2 t1</td></tr>

    <tr id="r3t1" class="myYellow"><td>r3 t1</td></tr>

    <tr id="r4t1"                 ><td>r4 t1</td></tr>

  </table>

  <br><br>

  <table border="2">

    <tr id="r1t2" class="myYellow"><td>r1 t2</td></tr>

    <tr id="r2t2" class="myYellow"><td>r2 t2</td></tr>

    <tr id="r3t2"                 ><td>r3 t2</td></tr>

  </table>

  <br><br>

  <input type="button" value="Do" onclick="doStuff()">

  <br>The button selects the first row of the first table ("r1 t1") and then it
  <br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>;
  no other table must be affected.

</body>

</html>

Upvotes: 2

Views: 219

Answers (1)

zer00ne
zer00ne

Reputation: 43910

Use .siblings(). See comment in snippet.

Note: Changed button slightly which of course can easily be converted back to the original way by deleting the code around the doStuff() function and adding the onclick="doStuff();" back to the <input> button.

$(function() {
  $('#do').on('click', doStuff);

  function doStuff() {

    var jqRow = $("#r1t1");
    if (jqRow.length !== 1) throw "ERROR";

    var jqSelectedRows = jqRow.siblings(); // How do I restrict the jqSelectedRows below to only the table this row belongs to? | Use .siblings() to collect all <tr>s within the table (excluding the referenced tr#r1t1). 

    jqSelectedRows.each(function(index) {

      this.setAttribute("style", "background-color: blue");

    });
  }
});
.myYellow {
  background-color: yellow;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>32721615</title>
</head>

<body>

  <table border="1">

    <tr id="r1t1">
      <td>r1 t1</td>
    </tr>

    <tr id="r2t1" class="myYellow">
      <td>r2 t1</td>
    </tr>

    <tr id="r3t1" class="myYellow">
      <td>r3 t1</td>
    </tr>

  </table>

  <br>
  <br>

  <table border="2">

    <tr id="r1t2" class="myYellow">
      <td>r1 t2</td>
    </tr>

    <tr id="r2t2" class="myYellow">
      <td>r2 t2</td>
    </tr>

    <tr id="r3t2">
      <td>r3 t2</td>
    </tr>

  </table>

  <br>
  <br>

  <input id="do" type="button" value="Do">

  <br>The button selects the first row of the first table ("r1 t1") and then it
  <br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>; no other table must be affected.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>

</html>

Upvotes: 1

Related Questions