当我将它们分成两部分时它正在工作但是当我将它们组合时,保存按钮不起作用我尝试将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>
答案 0 :(得分:0)
在此代码中,第二个表,标识为ts2=ts.getsamples(1:300)
的表为空。当你把第一列放在它的第二行(表体)中时,你得到一个空值。然后,您尝试访问table2
元素上的innerHTML
属性。将一些内容添加到null
并再次运行检查。
当你说table2
时,问题就来了。在这里,您尝试访问连续的第5个单元格,其中只包含4个单元格。