Javascript 编辑 HTML 表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2041648/
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
Editing an HTML table cell
提问by user248011
I have a table with a few rows... I want to be able to select a row and click on modify and I should be able to make all the cells of that row editable...
我有一个包含几行的表格......我希望能够选择一行并单击修改，我应该能够使该行的所有单元格都可编辑......
How would I make a cell editable in Javascript? And is it better to use Jquery?
如何在 Javascript 中使单元格可编辑？使用 Jquery 更好吗？
回答by Tatu Ulmanen
回答by Sampson
Here's a quick conceptI just worked up for you:
这是我刚刚为您制定的一个快速概念：
$(function(){
$("button[name='doModify']").click(function(){
// disable out modify button
$(this).attr("disabled","disabled");
// enable our save button
$("button[name='save']").removeAttr("disabled");
// cycle through each row having marked for modification
$(":checkbox[name='modify']:checked").each(function(){
$(this).closest("tr").find("td:gt(0)").each(function(){
// convert each cell into an editable region
$(this).wrapInner("<textarea name='"+$(this).attr("rel")+"'></textarea>");
});
});
});
});
--
——
<table border="1" cellspacing="1" cellpadding="5">
<tbody>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jon.doe</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jonathan.sampson</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">yellow.05</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td colspan="3" align="right">
<button name="doModify">Modify</button>
<button name="save" disabled="disabled">Save</button>
</td>
</tr>
</tbody>
</table>
回答by alemjerus
Setcontent-editableproperty of each element you want to edit.
http://html5demos.com/contenteditable
设置content-editable要编辑的每个元素的属性。
http://html5demos.com/contenteditable
回答by rahul
You can insert textboxes inside each cell and set the values to be that of the table cell.
您可以在每个单元格内插入文本框并将值设置为表格单元格的值。
Something like this
像这样的东西
$(function(){
$("#tbl1 tr").click ( function(){
if ( !$(this).hasClass('clicked') )
{
$(this).children('td').each ( function() {
var cellValue = $(this).text();
$(this).text('').append ( "<input type='text' value='" + cellValue + "' />" );
});
$(this).addClass('clicked');
}
});
});
<table id="tbl1">
<tr>
<td>1</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You can then place an update button and fetch the values from the textboxes and update.
然后，您可以放置一个更新按钮并从文本框中获取值并进行更新。
