How to update HTML table cell using jquery

Question

Team,

Could you please tell me how to update a cell using jquery?

<table id='lop'>
    <thead id='loph'>
        <tr>
            <td class='type'>Type</td>
            <td class='name'>Name</td>
        </tr>
    </thead>
    <tbody id='lopb'>
        <tr id='1'>
            <td class='type'>W</td>
            <td class='name'>ZZZ</td> 
        <tr>
        <tr id='2'>
            <td class='type'>W</td>
            <td class='name'>YYY</td> 
        <tr>        
    </tbody>
</table>

I would like to update second row name to XXX from YYY.
Please, The answer should be based on id and class name used in the html, not number/order based while using the jquery.

Also the below solution is not working,

$('#lop #2 .name').html('XXX')  //Working

in the case of

var rowID = '#2';
$('#lop rowID .name').html('XXX') //Not Working

Lucas Willems · Accepted Answer · 2013-07-22 11:49:47Z

4

Try this code, which is using the html method to update the code :

$('#lop #2 .name').html('XXX')

You can have a look to this fiddle : http://jsfiddle.net/cWQRY/

If you want to do it with a variable, you can try this code :

var rowID = '#2';
$('#lop '+rowID+' .name').html('XXX')

edited Jul 22, 2013 at 11:49

answered Jul 22, 2013 at 11:15

Lucas Willems

7,1135 gold badges32 silver badges48 bronze badges

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

8 Comments

Kanagavelu Sugumar Over a year ago

What is the benefit if i use .html than .text ??

Lucas Willems Over a year ago

In you case, there is no benefit. But with html method, you can edit the text and html code if there is.

Kanagavelu Sugumar Over a year ago

Thanks!. Could you please also give me link for the syntax for $('#id1 #id2 .className), Is this only applicable to the table or can use it in some other dom structure.

Lucas Willems Over a year ago

Yes you can use it for some other dom structure.

Kanagavelu Sugumar Over a year ago

This is not helping; in the case like; var rowId = '#2'; $('#lop rowId .name').html('XXX')

|

bipen · Accepted Answer · 2013-07-22 11:16:32Z

3

make sure you don't use integers as ids use string..

 <tr id='id2'>

why:

1) It violates W3C specification.

2) It is detrimental to SEO.

3) There can be server-side scripting issues

jquery

$('#id2 .name').text('XXX')

answered Jul 22, 2013 at 11:16

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Manoj Yadav · Accepted Answer · 2013-07-22 11:16:44Z

0

Try this:

$('#2 .name).text('XXX');

answered Jul 22, 2013 at 11:16

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

Comments

Goutam Pal · Accepted Answer · 2013-07-22 11:19:45Z

0

$('#2 .name').html('XXX');

Check the js Fiddle: http://jsfiddle.net/Xyn9e/7/

answered Jul 22, 2013 at 11:19

Goutam Pal

1,7531 gold badge10 silver badges14 bronze badges

Comments

Iren Patel · Accepted Answer · 2013-07-22 11:23:48Z

0

Try this:

* {
    font-family:Consolas
}

.editableTable {
    border:solid 1px;
    width:100%
}

.editableTable td {
    border:solid 1px;
}

.editableTable .cellEditing {
    padding: 0;
}

.editableTable .cellEditing input[type=text]{
    width:100%;
    border:0;
    background-color:rgb(255,253,210); 
}

Example: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425

answered Jul 22, 2013 at 11:23

Iren Patel

7771 gold badge10 silver badges22 bronze badges

Comments

Koushik Rout · Accepted Answer · 2013-07-22 11:25:10Z

0

In Table using ID in each tr and td is not a good practice better you use index.

$('#lopb tr').filter(':eq(1) td.name').text('XXX');

answered Jul 22, 2013 at 11:25

Koushik Rout

1791 gold badge5 silver badges13 bronze badges

Comments

Ganesh Rengarajan · Accepted Answer · 2013-07-22 11:26:20Z

0

 $('#lop').each(function(){
                var $row = $(this).parents('tr');                  
                alert($row.find('td:eq(0)').html());
                alert($row.find('td:eq(1)').html());
            });

answered Jul 22, 2013 at 11:26

Ganesh Rengarajan

2,00613 silver badges26 bronze badges

Comments

Manikandan · Accepted Answer · 2013-07-22 12:20:49Z

0

Please specify when you want to do this action of changing the cell data.

For changing, please try,

$('#2 .name').html('XXX')

Thanks Manikandan

edited Jul 22, 2013 at 12:20

answered Jul 22, 2013 at 11:27

Manikandan

6291 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to update HTML table cell using jquery

8 Answers 8

8 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related