CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
Sredny M Casanova
Sredny M Casanova

Reputation: 5053

modify column based on the row ID with JQuery

I have table, I'm using datatables, inside I have rows like this one:

<tr id="tr.12" data-id="12" role="row" class="odd">
    <td class="sorting_1">Ana O</td>
    <td>[email protected]</td>
    <td>2017-02-15 15:54:23</td>
    <td>Active</td>
    <td>User</td>
    <td style="padding-left:3px">
        <a href="#" class="btn-delete" data-toggle="tooltip" title="Delete!">
          <i class="fa fa-trash-o" aria-hidden="true"></i>
       </a>
       <a href="#" class="btn-update" data-toggle="tooltip" title="Edit!">
          <i class="fa fa-pencil" aria-hidden="true"></i>
       </a>
       <a href="#" data-toggle="tooltip" title="View details!">
          <i class="fa fa-eye" aria-hidden="true"></i>
       </a>
  </td>

Then, I'm trying to get the rows by the ID, and modify for example the first column like this:

$("#tr.12 td:nth-child(1)").text("new name");

But nothing changes, before I was trying to delete the row (again based on the id) but it's not working. So, what am I missing?

Upvotes: 0

Views: 46

Answers (1)

Barmar
Barmar

Reputation: 781058

You need to escape the . in the ID, because . in a selector means to look for a class.

$("#tr\\.12 td:nth-child(1)").text("new name");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="tr.12" data-id="12" role="row" class="odd">
    <td class="sorting_1">Ana O</td>
    <td>[email protected]</td>
    <td>2017-02-15 15:54:23</td>
    <td>Active</td>
    <td>User</td>
    <td style="padding-left:3px">
      <a href="#" class="btn-delete" data-toggle="tooltip" title="Delete!">
        <i class="fa fa-trash-o" aria-hidden="true"></i>
      </a>
      <a href="#" class="btn-update" data-toggle="tooltip" title="Edit!">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </a>
      <a href="#" data-toggle="tooltip" title="View details!">
        <i class="fa fa-eye" aria-hidden="true"></i>
      </a>
    </td>
  </tr>
</table>

Either that, or don't use characters that have special meaning in CSS selectors in your ID.

Upvotes: 1

Related Questions