使用 Javascript 中的用户输入动态更改表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14792431/
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
Dynamically change table cell with user input in Javascript
提问by Vince
This is what I'm trying to do: I have a table, created from Javascript with user input in each cell. This table is just to confirm that the data entered by the user is correct. If the user sees an error, they click on the cell which needs editing, and it puts a textbox in the table cell with the current cell data. The user will then be able to submit changes or discard the changes if they clicked on the wrong cell. This is currently what I have:
这就是我想要做的：我有一个表格，用 Javascript 创建，每个单元格中都有用户输入。此表只是为了确认用户输入的数据是正确的。如果用户看到错误，他们点击需要编辑的单元格，它会在包含当前单元格数据的表格单元格中放置一个文本框。如果用户点击了错误的单元格，他们将能够提交更改或放弃更改。这是目前我所拥有的：
<table id = "confirm">
<tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
<tr><th>Lastname</th><td>Smith</td></tr>
<tr><th>Username</th><td>ASmith</td></tr>
<tr><th>Email</th><td>[email protected]</td></tr>
<tr><th>Phone</th><td>123-456-7890</td></tr>
</table>
<script type = "text/javascript">
function update(id){
//Get contents off cell clicked
var content = document.getElementById(id).firstChild.nodeValue;
//Switch to text input field
document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
}
</script>
This is what my current code does: When user clicks on the cell, it replaces it with the current text inside a textbox, which is great, but when you try to edit the text, it calls the function over again replacing the text with "null". Please help me figure this out!
这就是我当前的代码所做的：当用户单击单元格时，它会用文本框中的当前文本替换它，这很棒，但是当您尝试编辑文本时，它会再次调用该函数，将文本替换为“空值”。请帮我解决这个问题！
回答by u283863
It is caused by event bubbling. You didn't want onclickto apply to input, but unfortunately this is not the case. To solve this problem, simply do this (taken from http://jsfiddle.net/DerekL/McJ4s/)
它是由事件冒泡引起的。您不想onclick申请input，但不幸的是，情况并非如此。要解决此问题，只需执行此操作（取自http://jsfiddle.net/DerekL/McJ4s/）
table td, th{
border: 1px solid black;
}<table id="confirm">
<tr>
<th>Firstname</th>
<td contentEditable>Adan</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
</tr>
<tr>
<th>Username</th>
<td>ASmith</td>
</tr>
<tr>
<th>Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th>Phone</th>
<td>123-456-7890</td>
</tr>
</table>Why do it with JavaScript when simple HTMLcan do the same thing? ;)
当简单的 HTML可以做同样的事情时，为什么要用 JavaScript来做呢？;)
Internet Explorer:
IE浏览器：
There is a strange "bug" in IE that it won't allow a table cell to be editable (why, Microsoft?)So you have to wrap your content with a <div>(taken from http://jsfiddle.net/DerekL/McJ4s/3/):
IE 中有一个奇怪的“错误”，它不允许表格单元格可编辑（为什么，微软？）所以你必须用一个<div>（取自http://jsfiddle.net/DerekL/McJ4s /3/）：
table td,
th {
border: 1px solid black;
}<table id="confirm">
<tr>
<th>Firstname</th>
<td>
<div contenteditable>Adan</div>
</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
</tr>
<tr>
<th>Username</th>
<td>ASmith</td>
</tr>
<tr>
<th>Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th>Phone</th>
<td>123-456-7890</td>
</tr>
</table>回答by Vince
<table id = "confirm"> <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr> <tr><th>Lastname</th><td>Smith</td></tr> <tr><th>Username</th><td>ASmith</td></tr> <tr><th>Email</th><td>[email protected]</td></tr> <tr><th>Phone</th><td>123-456-7890</td></tr> </table> <script type = "text/javascript"> function update(id){ //Get contents off cell clicked var content = document.getElementById(id).firstChild.nodeValue; //Switch to text input field document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>"; } </script>
<table id = "confirm"> <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr> <tr><th>Lastname</th><td>Smith</td></tr> <tr><th>Username</th><td>ASmith</td></tr> <tr><th>Email</th><td>[email protected]</td></tr> <tr><th>Phone</th><td>123-456-7890</td></tr> </table> <script type = "text/javascript"> function update(id){ //Get contents off cell clicked var content = document.getElementById(id).firstChild.nodeValue; //Switch to text input field document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>"; } </script>
Added an if statement in the update() function. Changed it to:
在 update() 函数中添加了一个 if 语句。改为：
<script type = "text/javascript">
function update(id){
if(document.getElementById(id).firstChild != "[object HTMLInputElement]"){
//Get contents off cell clicked
var content = document.getElementById(id).firstChild.nodeValue;
//Switch to text input field
document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
}
}
</script>
That works like a charm!
这就像一个魅力！
回答by ShinnedHawks
var table = document.getElementById('');
var rowCount = table.rows.length;
var noRowSelected = 1;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
break;
}
document.getElementById("").value = row.cells[1].innerHTML;
document.getElementById("").value = row.cells[2].innerHTML;
document.getElementById("").value = row.cells[3].innerHTML;
document.getElementById("").value = row.cells[4].innerHTML;
}
}
The Above Example the checkbox must be need for the each row.then we used this check box to get the current edit row values in the dynamic table. then to use the id for edit field to set valued got from the table.
回答by ShinnedHawks
Dynamically Change the Table Row Value:
动态更改表格行值：
var table = document.getElementById('');
var table = document.getElementById('');
var rowCount = table.rows.length;
var noRowSelected = 1;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
break;
}
document.getElementById("").value = row.cells[1].innerHTML;
document.getElementById("").value = row.cells[2].innerHTML;
document.getElementById("").value = row.cells[3].innerHTML;
document.getElementById("").value = row.cells[4].innerHTML;
}
}
The Above Example the checkbox must be need for the each row.then we used this check box to get the current edit row values in the dynamic table.
上面的例子中每一行都必须需要复选框。然后我们使用这个复选框来获取动态表中的当前编辑行值。
