如何使用jQuery更新HTML表格單元格

Question

球隊，

您能否告訴我如何使用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>

我想將第二行名稱從YYY更新為XXX。
請，答案應基於html中使用的ID和類名，而不是基於使用jquery時的數字/順序。

另外下面的解決方案不起作用，

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

如果是

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

Answer 1

試試下面的代碼，它使用html方法更新代碼：

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

您可以看一下這個小提琴： http : //jsfiddle.net/cWQRY/

如果要使用變量，可以嘗試以下代碼：

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

Answer 2

確保您不使用整數，因為id使用字符串。

 <tr id='id2'>

為什么：

1）違反W3C規范。

2）這對SEO有害。

3）可能存在服務器端腳本問題

jQuery的

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

Answer 3

嘗試這個：

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

Answer 4

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

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

Answer 5

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

Answer 6

在Table中，在每個tr和td中使用ID並不是一個好習慣，最好使用index。

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

Answer 7

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

Answer 8

請指定您何時要執行更改單元格數據的操作。

如需更改，請嘗試，

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

謝謝Manikandan