2016-01-18 69 views
-1

它正在處理時,我將它們分成兩個,但是當我結合他們保存按鈕不工作我試圖更改document.getElementByIddocument.getElementByClassName,但它停止這兩個函數是代碼提交按鈕不工作,當我結合我的代碼

<html> 
<head> 
<body> 
<div class="container">   
<table class="table table-hover table-bordered" id = "table1"> 
<thead> 
    <tr> 
     <th><center>Item Name</center> </th> 
     <th><center>Brand</center> </th> 
     <th><center>Selling Price</center> </th> 
     <th><center>Quantity</center> </th> 
    </tr> 
</thead> 
<tbody id = tbody1> 
    <tr> 
     <td>Cake</td> 
     <td>Pastry</td> 
     <td>100</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>Wat</td> 
     <td>But</td> 
     <td>100</td> 
     <td>5</td> 
    </tr> 
</tbody> 

</table> 
</div> 

<div class="container">   
<table class="table table-hover table-bordered" id = "table2"> 
<thead> 
    <tr> 
     <th><center>Item Name</center> </th> 
     <th><center>Brand</center> </th> 
     <th><center>Selling Price</center> </th> 
     <th><center>Quantity</center> </th> 
</tr> 
</thead> 
<tbody id = "myNewTableBody" class = "tbody2"> 
<tr class = "tr2"> 
</tr> 
</tbody> 
</table> 
</div> 
    <input type = "submit" value = "save" name = "btnsave" onclick = "myFunction()" style = "position : absolute; top : 550px; left : 20px; font-size: 20px;"/></input> 


</body> 
    <script> 
    var table = document.getElementsByTagName("table")[0]; 
    var tbody = table.getElementsByTagName("tbody")[0]; 
    tbody.onclick = function (e) { 
     e = e || window.event; 
     var data = []; 
     var target = e.srcElement || e.target; 
     while (target && target.nodeName !== "TR") { 
      target = target.parentNode; 
     } 
     if (target) { 
      var cells = target.getElementsByTagName("td"); 
      for (var i = 0; i < cells.length; i++) { 
       data.push(cells[i].innerHTML); 
      } 
     } 
     var trnode = document.createElement("tr"); 

     for(var i = 0; i < data.length; i++){ 
      var tdnode = document.createElement("td"); 
      var textnode = document.createTextNode(data[i]); 
      tdnode.appendChild(textnode); 
      trnode.appendChild(tdnode); 
     } 

     document.getElementById("myNewTableBody").appendChild(trnode); 
    }; 
    function myFunction() { 
    var rows =  document.getElementById("table2") 
    .getElementsByClassName("tbody2") 
    [0].getElementsByClassName("tr2").length; 
    var a = 1; 
    var b = 1; 
    for(var i = 0; i < rows; i++){ 
    var x = 
    document.getElementById("table2").rows[a].cells.item(0).innerHTML 
    var y = 
    document.getElementById("table2").rows[a].cells.item(4).innerHTML 
    var a = a + 1; 
    var b = b + 1; 
    alert(x); 
    alert(y); 
    } 
    } 

    </script> 
    <html> 
    <head> 

繼承人的保存按鈕的單獨代碼的工作

 <html> 
    <head> 

    <body> 
    <div class="container">   
    <table id = "table1"> 
    <thead> 
    <tr> 
     <th><center>ID</center> </th> 
     <th><center>Item Name</center> </th> 
     <th><center>Category</center> </th> 
     <th><center>Selling Price</center> </th> 
     <th><center>Quantity</center> </th> 
    </tr> 
    </thead> 
    <tbody class = "tbody2"> 
    <tr class = "tr2"> 
     <td>1</td> 
     <td>Cake</td> 
     <td>Pastry</td> 
     <td>100</td> 
     <td>5</td> 
    </tr> 
    <tr class = "tr2"> 
     <td>2</td> 
     <td>Bread</td> 
     <td>Pastry</td> 
     <td>5</td> 
     <td>100</td> 
    </tr> 
    </tbody> 
    </table> 
    </div> 
    <input type = "submit" value = "save" name = "btnsave" 
    onclick = "myFunction()" /></input> 


</body> 
<script> 
function myFunction() { 
var rows = document.getElementById("table1") 
.getElementsByClassName("tbody2")[0] 
.getElementsByClassName("tr2").length; 
var a = 1; 
var b = 1; 
for(var i = 0; i < rows; i++){ 
var x = document.getElementById("table1").rows[a].cells.item(0).innerHTML 
var y = document.getElementById("table1").rows[a].cells.item(4).innerHTML 
var a = a + 1; 
var b = b + 1; 
alert(x); 
alert(y); 
} 
} 

</script> 
</html> 
+0

好神人,請標點和大寫! – Roman

+3

這兩段代碼都有一個名爲'myFunction'的函數 - 如果您嘗試「合併代碼」,它們將相互覆蓋! –

+0

最上面的一個是已組合的一個 – SonicFreak

回答

0

在這段代碼中,第二個表,表ID table2是空的。當你把第一列,在第二行(表體)中,你會得到一個空值。然後,您嘗試訪問null元素上的innerHTML屬性。將一些內容添加到table2並運行再次檢查。

當你說,document.getElementById("table2").rows[a].cells.item(4).innerHTML再次出現同樣的問題。在這裏,您嘗試訪問只包含4個單元格的行的第5個單元格。