Dynamically change table cell with user input in Javascript

Question

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!

Bubbling.

Derek 朕會功夫
– Derek 朕會功夫

2013-02-09 22:43:35 +00:00
Commented Feb 9, 2013 at 22:43 — Derek 朕會功夫
– Derek 朕會功夫, Commented Feb 9, 2013 at 22:43

garfbradaz · Accepted Answer · 2017-08-03 16:16:12Z

12

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>

edited Aug 3, 2017 at 16:16

garfbradaz

3,5268 gold badges46 silver badges71 bronze badges

answered Feb 9, 2013 at 22:44

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Flauwekeul Over a year ago

Great! Didn't know that attribute yet.

Derek 朕會功夫 Over a year ago

@Flauwekeul - Actually contentEditable has been around since IE6, it is almost 13 years ago.

Derek 朕會功夫 Over a year ago

@user2052072 - Stupid IE, creating headaches and issues since 2001. Try this one: jsfiddle.net/DerekL/McJ4s/3

Vince Over a year ago

So, it has to be in a div element? Thanks!, I also figured it out using my method as well. Took quite a bit of time, but mission accomplished.

Vince Over a year ago

That is nice to know, I will use that for future reference. That may be a handy attribute for me later.

|

Vince · Accepted Answer · 2013-02-09 23:41:44Z

0

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

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

answered Feb 9, 2013 at 23:41

Vince

2,66611 gold badges49 silver badges77 bronze badges

2 Comments

Derek 朕會功夫 Over a year ago

Your code is a bit long and messy. jQuery might be a better option here: jsfiddle.net/DerekL/McJ4s/5

Vince Over a year ago

I'm avoiding jquery as I'm not too familiar with it. But thanks anyway!

ShinnedHawks · Accepted Answer · 2013-12-26 09:05:14Z

    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.

ShinnedHawks · Accepted Answer · 2013-12-26 09:10:29Z

Dynamically Change the Table Row Value:

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.

Collectives™ on Stack Overflow

Dynamically change table cell with user input in Javascript

4 Answers 4

Internet Explorer:

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Internet Explorer:

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related