Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
55
rated 0 times [  59] [ 4]  / answers: 1 / hits: 71079  / 11 Years ago, sat, february 9, 2013, 12:00:00

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:



    <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!


More From » input

 Answers
54

It is caused by event bubbling. You didn't want onclick to apply to input, but unfortunately this is not the case. To solve this problem, simply do this (taken from 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 HTML can do the same thing? ;)






Internet Explorer:



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/):





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>




[#80323] Friday, February 8, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
anthonyw

Total Points: 589
Total Questions: 117
Total Answers: 117

Location: Dominican Republic
Member since Sun, Sep 4, 2022
2 Years ago
;