CODEWITHSUNDEEP
jquery
ketom
ketom

Reputation: 2444

How to get table row by id and then change it's value / html

I have a table its generated by jquery.

<table id="redTable" class="rwd-table table-centered">
  <thead>
    <tr>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
      <th>ddd</th>
      <th>eee</th>
      <th>fff</th>
    </tr>
  </thead>
  <tbody>

    <tr id="46603693">
      <td><span>Image cell</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
    </tr>
    <tr id="30041170">
      <td><span>Image cell</span></td>
      <td><span>Change it to Image</span></td>
      <td><span>Loading</span></td>
      <td><span>Change it to 10</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
    </tr>
  </tbody>
</table>

I want to search a row where id equal 30041170; Than i want to change the cells value. I tried $('#id').find('30041170') it. Maybe i got the row with this.

Its fine? If fine, how can i change the cells?

Sorry about this, I am newbie in frontend jq, and its so hard for me. I hope someone can help me. Thanks so much!

Upvotes: 0

Views: 2050

Answers (3)

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Try following snippet.

//To change all the td values 
$('#30041170 > td > span').html("new image");

//To change first td value
$('#30041170 > td:eq(0) > span').html("first td");

//To change last td value
$('#30041170 > td:last() > span').html("last td");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="redTable" class="rwd-table table-centered">
  <thead>
    <tr>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
      <th>ddd</th>
      <th>eee</th>
      <th>fff</th>
    </tr>
  </thead>
  <tbody>
    <tr id="46603693">
      <td><span>Image cell</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
    </tr>
    <tr id="30041170">
      <td><span>Image cell</span></td>
      <td><span>Change it to Image</span></td>
      <td><span>Loading</span></td>
      <td><span>Change it to 10</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

jafarbtech
jafarbtech

Reputation: 7015

$('#30041170 td span').eq(1).html('Image');
$('#30041170 td span').eq(3).html('10');

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074505

I tried $('#id').find('30041170')

No, that will throw an error, you're trying to use a number as a tag selector.

If you can, change the code generating the table to put a letter in front of those numeric IDs, e.g. id="x30041170" rather than id="30041170". Then use $("#x30041170") to get the row.

If you can't, you can use $("#redTable [id='30041170']) to get the row. (If you used $("#30041170") it would work with current versions of jQuery, but it's an invalid selector and not guaranteed.)

Once you have a selector for the row, you can add to it to select a specific cell via :eq and the span within it. For instance, to set the third cell's span's contents to "10":

$("#redTable [id='30041170'] > td:eq(2) span").text("10");

Or get the row:

var row = $("#redTable [id='30041170']);

...and then address the cells in it:

row.children().eq(2).find("span").text("10");

Live Example:

$("#button").click(function() {
  $("#redTable [id='30041170'] > td:eq(2) span").text("10");
});
<input type="button" id="button" value="Click To Change">
<table id="redTable" class="rwd-table table-centered">
  <thead>
    <tr>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
      <th>ddd</th>
      <th>eee</th>
      <th>fff</th>
    </tr>
  </thead>
  <tbody>

    <tr id="46603693">
      <td><span>Image cell</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
    </tr>
    <tr id="30041170">
      <td><span>Image cell</span></td>
      <td><span>Change it to Image</span></td>
      <td><span>Loading</span></td>
      <td><span>Change it to 10</span></td>
      <td><span>Loading</span></td>
      <td><span>Loading</span></td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions