1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2.在javascript中写添加表格的语句
若在当前html文件中，则写在<script>标签内部，如
复制代码 代码如下:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
复制代码 代码如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
复制代码 代码如下:
<script type="text/javascript" src="test.js"></script>
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
复制代码 代码如下:
<table>
<thead></thead>
<tfoot><tfoot>//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下
[code]
row=document.createElement("tr")//创建行
td1=document.createElement("tr")//创建单元格
td1.appendChild(document.createTextNode("content"))//为单元格添加内容
row.appendChild(td1)//将单元格添加到行内
document.getElementById("rows").append(row)//将行添加到<tbody>中
方式：
1.把网页中的表格插入到excel中并定时更新的方法很简单，首先小编打开一个空白的excel表格。
2.在excel中选择数据-自网站。
3.在excel新建web查询中粘贴带有表格的网址，然后点击转到。
4.点击表格左上角的符号会自动选中表格，然后点击导入。
5.在excel导入数据中我们点击选择属性。
6.在外部数据区域属性中我们可以对excel数据刷新进行设置。
7.点击确定后返回到导入数据窗口再次点击确定，等几秒钟就网页中的表格就插入到excel中了。
Microsoft Excel：是微软公司的办公软件Microsoft office的组件之一，是由Microsoft为Windows和Apple Macintosh *** 作系统的电脑而编写和运行的一款试算表软件。Excel 是微软办公套装软件的一个重要的组成部分，它可以进行各种数据的处理、统计分析和辅助决策 *** 作，广泛地应用于管理、统计财经、金融等众多领域。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>RunJS</title>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/289/za0sqcyf/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var html = "<tr><td style='border:1px solid white'>添加一行</td><td style='border:1px solid white'>添加一行</td></tr>" //自己定义好要添加的信息
$("table").append(html) //添加对应的内容到table
})
})
</script>
</head>
<body>
<button>Hello </button>
<table style="border:1px solid yellow">
</table>
</body>
</html>
这个是简单的例子。。。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）