Dynamically Change Table Cell With User Input In Javascript

July 31, 2023 Post a Comment

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

Solution 1:

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

tabletd, th{
    border: 1px solid black;
}

<tableid="confirm"><tr><th>Firstname</th><tdcontentEditable>Adan</td></tr><tr><th>Lastname</th><td>Smith</td></tr><tr><th>Username</th><td>ASmith</td></tr><tr><th>Email</th><td>abc@123.com</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 So you have to wrap your content with a <div> (taken from http://jsfiddle.net/DerekL/McJ4s/3/):

tabletd,
th {
  border: 1px solid black;
}

<tableid="confirm"><tr><th>Firstname</th><td><divcontenteditable>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>abc@123.com</td></tr><tr><th>Phone</th><td>123-456-7890</td></tr></table>

Solution 2:

<tableid = "confirm"><tr><th>Firstname</th><tdid = "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>abc@123.com</td></tr><tr><th>Phone</th><td>123-456-7890</td></tr></table><scripttype = "text/javascript">functionupdate(id){
    //Get contents off cell clickedvar content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input fielddocument.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

Added an if statement in the update() function. Changed it to:

<scripttype = "text/javascript">functionupdate(id){
    if(document.getElementById(id).firstChild != "[object HTMLInputElement]"){
      //Get contents off cell clickedvar content = document.getElementById(id).firstChild.nodeValue;
      //Switch to text input fielddocument.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
    }
  }
</script>

That works like a charm!

Solution 3:

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;
           }
       }

  TheAboveExample 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.

Solution 4:

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.

JavaScript Test