無法使用javascript編輯html表格

我想使用javascript編輯我的html表格的內容。我收到的內容在編輯按鈕的點擊的形式，但是當我點擊保存按鈕時不更新該行的值，請幫助我，因爲它會很感激..無法使用javascript編輯html表格

<HTML> 
<HEAD> 
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
    <SCRIPT language="javascript"> 
     function addRow(myTable) { 

      var table = document.getElementById("myTable"); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      element1.name="chkbox[]"; 
      cell1.appendChild(element1); 

      var cell2=row.insertCell(1); 
      var cell3=row.insertCell(2); 
      var cell4=row.insertCell(3); 
      cell2.innerHTML=document.getElementById('txtname').value; 
      cell3.innerHTML=document.getElementById('txtauthor').value; 
      cell4.innerHTML=document.getElementById('txtcdate').value; 



     } 

     function deleteRow(myTable) { 
      try { 
      var table = document.getElementById(myTable); 
      var rowCount = table.rows.length; 

      for(var i=0; i<rowCount; i++) { 
       var row = table.rows[i]; 
       var chkbox = row.cells[0].childNodes[0]; 
       if(null != chkbox && true == chkbox.checked) { 
        table.deleteRow(i); 
        rowCount--; 
        i--; 
       } 


      } 
      }catch(e) { 
       alert(e); 
      } 
     } 

     function edt(myTable) { 
    try { 
     var table = document.getElementById(myTable); 
     var rowCount = table.rows.length; 

     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) { 
       document.getElementById("txtname").value = table.rows[i].cells["1"].innerHTML; 
       document.getElementById("txtauthor").value = table.rows[i].cells["2"].innerHTML; 
       document.getElementById("txtcdate").value = table.rows[i].cells["3"].innerHTML; 
       //document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML; 
       //document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML; 

       document.getElementById("crw").value = i; 

      } 
     } 
     }catch(e) { 
      alert(e); 
     } 
} 
function savedit(myTable){ 
if(null != chkbox && true == chkbox.checked) { 

var table = document.getElementById("myTable"); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      element1.name="chkbox[]"; 
      cell1.appendChild(element1); 

      var cell2=row.insertCell(1); 
      var cell3=row.insertCell(2); 
      var cell4=row.insertCell(3); 
      cell2.innerHTML=document.getElementById('txtname').value; 
      cell3.innerHTML=document.getElementById('txtauthor').value; 
      cell4.innerHTML=document.getElementById('txtcdate').value; 
} 


} 




    </SCRIPT> 
</HEAD> 

HTML 

<BODY> 

    <INPUT type="button" value="Add Row" onClick="addRow('myTable')" /> 

    <INPUT type="button" value="Delete Row" onClick="deleteRow('myTable')" /> 
    <INPUT type="button" value="Edit Row" onClick="edt('myTable')" /> 
    <INPUT type="button" value="Save" onClick="savedit('myTable')" /> 


    <table id="myTable" border="1"> 
<thead> 
<th id="name"><input type="checkbox" id="chkbox" /></th> 
<th id="name">Name</th> 
<th id="author">Author</th> 
<th id="cdate">Date</th> 
</thead> 

<tbody> 
    <tr> 
    <td><input type="checkbox" id="chkbox1" /></td> 
    <td>cell 1</td> 
    <td>cell 2</td> 
    <td>cell 3</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="chkbox2" /></td> 
    <td>cell 4</td> 
    <td>cell 5</td> 
     <td>cell 6</td> 
    </tr> 
    </tbody> 
</table> 

<form name="create"2 style="width:80px;"> 
Name:<input type="text" id="txtname" /><br/> 
Author<input type="text" id="txtauthor" name="txtauthor" /><br/> 
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/> 
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " /> 
</form> 
<input type="hidden" id="crw"> 

</BODY> 
</HTML>

來源

2013-10-07 Syed Ali Ahmed

更換用下面的代碼編輯功能（你的附加功能反之亦然）

function savedit(myTable){ 
    var table = document.getElementById(myTable); 
      var rowCount = table.rows.length; 
      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) { 
        table.rows[i].cells["1"].innerHTML = document.getElementById("txtname").value ; 
        table.rows[i].cells["2"].innerHTML = document.getElementById("txtauthor").value; 
        table.rows[i].cells["3"].innerHTML = document.getElementById("txtcdate").value ; 
        //document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML; 
        //document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML; 
         document.getElementById("txtname").value = ''; 
         document.getElementById("txtauthor").value = ''; 
         document.getElementById("txtcdate").value  = '' ; 
         chkbox.checked = false; 
        document.getElementById("crw").value = i; 
       } 
      } 
    }

我強烈建議你使用一些插件或網格狀劍道在已經測試和工作

來源

2013-10-07 17:20:16

謝謝。其實這是我的學術測試項目，所以我必須使用只有JavaScript，因爲它是由我的老師推薦..非常感謝你解決我的概率.. –

阿倫你能告訴我一件事情，編輯後我想要讓我的表單和複選框爲空，那麼你能告訴我，我該怎麼做？ –

我會加上代碼 –

無法使用javascript編輯html表格

回答

相關問題