0

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
4

8 回答 8

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')
于 2013-07-22T11:15:15.687 回答
3

确保您不使用整数，因为 ids 使用字符串..

 <tr id='id2'>

为什么：

1) 它违反了 W3C 规范。

2）不利于SEO。

3) 可能存在服务器端脚本问题

jQuery

$('#id2 .name').text('XXX')
于 2013-07-22T11:16:32.607 回答
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
于 2013-07-22T11:23:48.850 回答
0

尝试这个：

$('#2 .name).text('XXX');
于 2013-07-22T11:16:44.017 回答
0 
$('#2 .name').html('XXX');

检查 js 小提琴：http: //jsfiddle.net/Xyn9e/7/

于 2013-07-22T11:19:45.640 回答
0

在表中，在每个 tr 和 td 中使用 ID 不是一个好习惯，最好使用索引。

$('#lopb tr').filter(':eq(1) td.name').text('XXX');
于 2013-07-22T11:25:10.867 回答
0 
 $('#lop').each(function(){
                var $row = $(this).parents('tr');                  
                alert($row.find('td:eq(0)').html());
                alert($row.find('td:eq(1)').html());
            });
于 2013-07-22T11:26:20.323 回答
0

请指定何时执行更改单元格数据的操作。

如需更改，请尝试，

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

谢谢曼尼坎丹

于 2013-07-22T11:27:15.773 回答