用Javascript中的用戶輸入動態改變表格單元格

Question

這就是我想要做的：我有一個表格，用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>abc@123.com</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> 

這是我當前的代碼所做的：當用戶點擊該細胞，它具有一個文本框裏面的當前文本，這是偉大的替換它，但是當你嘗試編輯文本，它調用函數再次用「null」替換文本。請幫我弄清楚這一點！

Answer 1

它是由event bubbling造成的。您不希望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>abc@123.com</td> 
 
    </tr> 
 
    <tr> 
 
     <th>Phone</th> 
 
     <td>123-456-7890</td> 
 
    </tr> 
 
</table>

爲什麼用JavaScript做時，simple HTML可以做同樣的事情？ ;)

---

Internet Explorer中：

有一個奇怪的 「錯誤」 在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>abc@123.com</td> 
 
    </tr> 
 
    <tr> 
 
    <th>Phone</th> 
 
    <td>123-456-7890</td> 
 
    </tr> 
 
</table>

Answer 2

<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>abc@123.com</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> 

加入，如果在update（）函數聲明。更改爲：

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

這就像一個魅力！

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

    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. 

Answer 4

動態地改變表的行值：

變種表=的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; 
     } 
    } 

上面的例子複選框必須爲每一行需要，然後我們用這個複選框來獲取動態表中的當前編輯行值。