javascript 如何使用 jquery 更新 HTML 表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17786149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update HTML table cell using jquery
提问by Kanagavelu Sugumar
Team,
团队，
Could you please tell me how to update a cell using jquery?
你能告诉我如何使用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.
我想将第二行名称从 YYY 更新为 XXX。
请，答案应该基于 html 中使用的 id 和类名，而不是使用 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
回答by Lucas Willems
Try this code, which is using the html methodto update the code :
试试这个代码，它使用html 方法来更新代码：
$('#lop #2 .name').html('XXX')
You can have a look to this fiddle : http://jsfiddle.net/cWQRY/
你可以看看这个小提琴：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')
回答by bipen
make sure you don't use integers as ids use string..
确保您不使用整数，因为 ids 使用字符串..
<tr id='id2'>
why:
为什么：
1) It violates W3C specification.
1) 它违反了 W3C 规范。
2) It is detrimental to SEO.
2）对SEO不利。
3) There can be server-side scripting issues
3) 可能存在服务器端脚本问题
jquery
查询
$('#id2 .name').text('XXX')
回答by Manoj Yadav
Try this:
试试这个：
$('#2 .name).text('XXX');
回答by Goutam Pal
$('#2 .name').html('XXX');
Check the js Fiddle: http://jsfiddle.net/Xyn9e/7/
检查 js 小提琴：http: //jsfiddle.net/Xyn9e/7/
回答by Iren Patel
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
回答by Koushik Rout
In Table using ID in each tr and td is not a good practice better you use index.
在每个 tr 和 td 中使用 ID 的表中不是一个好的做法，最好使用索引。
$('#lopb tr').filter(':eq(1) td.name').text('XXX');
回答by Ganesh Rengarajan
$('#lop').each(function(){
var $row = $(this).parents('tr');
alert($row.find('td:eq(0)').html());
alert($row.find('td:eq(1)').html());
});
回答by Manikandan
Please specify when you want to do this action of changing the cell data.
请指定何时执行更改单元格数据的操作。
For changing, please try,
如需更改，请尝试，
$('#2 .name').html('XXX')
Thanks Manikandan
谢谢马尼坎丹
