我有通过添加和删除行动态创建的表。我需要使用JavaScript在另一个HTML页面上打印此表。有人可以帮忙吗？
以下是我创建表格的HTML文件：
<!DOCTYPE html>
<html>
<head>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/home.css" rel="stylesheet" type="text/css" />
<!--<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">-->
<meta charset=utf-8 />
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CLIST</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span>Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="profile.html"><span class="glyphicon glyphicon-user"></span>Profile</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
<li><a href="list.html"><span class="glyphicon glyphicon-list-alt"></span>Orders</a></li>
<li class="divider"></li>
<li><a href="index.html"><span class="glyphicon glyphicon-off"></span>Logout</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-comment"></span>Chats <span class="label label-primary">42</span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="label label-warning">7:00 AM</span>Hi :)</a></li>
<li><a href="#"><span class="label label-warning">8:00 AM</span>How are you?</a></li>
<li><a href="#"><span class="label label-warning">9:00 AM</span>What are you doing?</a></li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-envelope"></span>Notifications<span class="label label-info">32</span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a></li>
<li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a></li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Settings</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle">
Chat
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle">
Notification
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table id="dataTable" class="table table-bordered table-hover">
<thead>
<tr>
<th class="text-center">Select</th>
<th class="text-center">Item</th>
<th class="text-center">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><INPUT type="checkbox" name="chk"/></td>
<td><INPUT type="text" name="text1" class="form-control" placeholder="Item"/></td>
<td><INPUT type="text" name="txt2" class="form-control" placeholder="Quantity"/></td>
</tr>
</tbody>
</table>
<div id="Input">
<INPUT class="btn btn-default pull-left" id="AddRow" type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT class="pull-right btn btn-default" id="DeleteRow" type="button" value="Delete Row(s)" onclick="deleteRow('dataTable')" />
</div>
</div>
<div class="text-center center-block">
<button type="button" class="btn btn-fresh text-uppercase btn-lg" onclick="startExec()" >Save</button>
<a href="order.html" class="btn btn-lg btn-primary">ORDER NOW</a>
</div>
<script src="js/bootstrap.js"></script>
<script src="func.js"></script>
<!--<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>-->
</body>
以下是我用来创建添加行和删除行的javascript中的函数
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
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) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
答案 0 :(得分：-1)
试试这个
$.ajax({
url: 'somefile.html',
success: function(data) {
data=$(data).find('table#dataTable');
$('#mydiv').html(data);
alert('Done.');
}
});