Update table row based on cell value jquery

Question

I have a contacts table that contains a column for contact_id. Can someone help me update a table row based on contact_id? For example, I have the following table:

<table class="table table-condensed" id="company_contacts_table">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Phone #</th>
        <th>Notes</th>
        <th></th>
        <th></th>
      <th hidden></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jake</td>
        <td>Dang</td>
        <td>[email protected]</td>
        <td>7032669955</td>
        <td>contact_notes</td>
        <td><button type="update" class="btn btn-primary update_contact" href="#update_contact_modal" data-toggle="modal" id="some_contact_id">Update</button></td>
        <td><button type="update" class="btn btn-danger delete_contact" id="some_contact_id">Delete</button></td>
        <td hidden>some_contact_id</td>
      </tr>
      <tr>
        <td>Harrison</td>
        <td>WElls</td>
        <td>[email protected]</td>
        <td>7039998888</td>
        <td>contact_notes</td>
        <td><button type="update" class="btn btn-primary update_contact" href="#update_contact_modal" data-toggle="modal" id="some_contact_id2">Update</button></td>
        <td><button type="update" class="btn btn-danger delete_contact" id="some_contact_id2">Delete</button></td>
        <td hidden>some_contact_id2</td>
      </tr>
      <tr>
        <td>Mason</td>
        <td>Hanley</td>
        <td>[email protected]</td>
        <td>7032669855</td>
        <td>contact_notes</td>
        <td><button type="update" class="btn btn-primary update_contact" href="#update_contact_modal" data-toggle="modal" id="some_contact_id3">Update</button></td>
        <td><button type="update" class="btn btn-danger delete_contact" id="some_contact_id3">Delete</button></td>
        <td hidden>some_contact_id3</td>
      </tr>
    </tbody>
</table>

Each row contains a hidden contact_id column. I want to update the first name, last name, email, phone #, notes based on the contact id. Sample pseudocode:

var my_contact_id = some_contact_id

var new_first_name = 'george'
var new_last_name = 'henry'
var new_email = '[email protected]'
var new_phone = 999-333-4444

- Find row that contains `some_contact_id`
- Set first name, last name, email, phone to new first name, new last name, new email, new phone

Can someone help?

Thanks in advance!!

Which jQuery selectors have you tried that aren't working?

Matt
– Matt

2016-03-01 02:21:30 +00:00
Commented Mar 1, 2016 at 2:21 — Matt
– Matt, Commented Mar 1, 2016 at 2:21

Alon · Accepted Answer · 2016-03-01 13:58:49Z

2

var new_first_name = 'george'
var new_last_name = 'henry'
var new_email = '[email protected]'
var new_phone = 999-333-4444

var tr = $("#company_contacts_table td:contains("+some_contact_id+")").closest("tr").find("td");
tr[0].innerHTML = new_first_name;
tr[1].innerHTML = new_last_name;
tr[2].innerHTML = new_email;
tr[3].innerHTML = new_phone;

edited Mar 1, 2016 at 13:58

answered Mar 1, 2016 at 2:28

Alon

12.2k28 gold badges106 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trung Tran Over a year ago

Hi - I just tried this, but tr is returning [].. My exact code was: var tr = $("#company_contacts_table").find('66fa33a1-1f7f-43f7-b524-de2cac543b4e').closest("tr").find("td"); console.log(tr) returns []

Alon Over a year ago

@user1547174 OK I fixed it. Now it will work for you.

Collectives™ on Stack Overflow

Update table row based on cell value jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related