我合并代码时提交按钮不起作用

时间:2016-01-18 11:47:59

标签: javascript

当我将它们分成两部分时它正在工作但是当我将它们组合时,保存按钮不起作用我尝试将document.getElementById更改为document.getElementByClassName但是它停止了这两个函数的代码是< / p>

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

1 个答案:

答案 0 :(得分:0)

在此代码中,第二个表,标识为ts2=ts.getsamples(1:300) 的表为空。当你把第一列放在它的第二行(表体)中时,你得到一个空值。然后,您尝试访问table2元素上的innerHTML属性。将一些内容添加到null并再次运行检查。

当你说table2时,问题就来了。在这里,您尝试访问连续的第5个单元格,其中只包含4个单元格。