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>中
<script type="text/javascript">var $ = function(id){
return document.getElementById(id)
}
//全选
function checkAll(target) {
var checkeds = document.getElementsByName("b_id")
for (var i = 0i <checkeds.lengthi++) {
checkeds[i].checked = target.checked
}
}
//刷新行号
function refreshRowNo() {
var tbody = $("tbody")
for (var i = 0i <tbody.rows.lengthi++) {
tbody.rows[i].cells[0].innerHTML = i + 1
}
}
//添加行
function AddRow() {
var tbody = $("tbody")
var row = tbody.insertRow(tbody.rows.length)
row.insertCell(row.cells.length)
row.insertCell(row.cells.length).innerHTML = '<input type="checkbox" name="b_id" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="name" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="number" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="price" />'
row.insertCell(row.cells.length).innerHTML = '<input type="text" name="sum" />'
refreshRowNo()
}
//删除行
function DelRow() {
var checkeds = document.getElementsByName("b_id")
var ischeck = false
for (var i = checkeds.length - 1i >= 0i--) {
if (checkeds[i].checked) {
ischeck = true
break
}
}
if (ischeck) {
if (confirm("确定删除选中行?")) {
for (var i = checkeds.length - 1i >= 0i--) {
if (checkeds[i].checked) {
var index = checkeds[i].parentNode.parentNode.rowIndex
$("tbody").deleteRow(index - 1)
}
}
refreshRowNo()
}
} else {
alert("请选中需要删除的行!")
}
}
//保存
function Save() {
var detail = [],
tbody = $("tbody")
for (var i = 0i <tbody.rows.lengthi++) {
var name = tbody.rows[i].cells[2].childNodes[0].value
var number = tbody.rows[i].cells[3].childNodes[0].value
var price = tbody.rows[i].cells[4].childNodes[0].value
var sum = tbody.rows[i].cells[5].childNodes[0].value
var item = name + "^" + number + "^" + price + "^" + sum
detail.push(item)
}
var detailstr = detail.join("|")
$("detail").value = detailstr
$("myform").submit()
}
</script>
<form name="myform" action="AddOrder.aspx" method="post">
<input type="hidden" id="detail" name="detail" />
<ul>
<li>采购单编号：<input type="text" id="CGDBH" name="CGDBH" /></li>
<li>
供应商名称：<input type="text" id="GYSMC" name="GYSMC" />
<input type="button" onclick="AddRow()" value="增加一行" />
<input type="button" onclick="DelRow()" value="删除" />
<input type="button" onclick="Save()" value="保存" />
</li>
</ul>
<table cellpadding="1" cellspacing="2">
<tr>
<th style="width:60px">序号</th>
<th style="width:20px"><input type="checkbox" onclick="checkAll(this)" /></th>
<th style="width:120px">名称</th>
<th style="width:120px">数量</th>
<th style="width:120px">单价</th>
<th style="width:120px">总金额</th>
</tr>
<tbody id="tbody">
<tr>
<td>1</td>
<td><input type="checkbox" name="b_id" /></td>
<td><input type="text" name="name" /></td>
<td><input type="text" name="number" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="sum" /></td>
</tr>
</tbody>
</table>
</form>
<!DOCTYPE HTML><html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<style>
* {
margin: 0
padding: 0
}
.wrap {
margin: 20px auto
width: 600px
}
table {
width: 600px
border: 1px solid black
border-collapse: collapse
}
table input[type=button] {
width: 50px
height: 25px
border: 0
cursor: pointer
}
table input[type=button]:hover {
background-color: #fd3
}
table input[type=text] {
border-color: black
border-width: 0 0 1px 0
text-align: center
}
table textarea {
width: 90%
height: 100px
resize: none
}
th,td {
border: 1px solid black
text-align: center
}
</style>
<script>
var addRow = function(btn) {
var tbody = table.tBodies[0]
var row = btn.parentElement.parentElement.rowIndex
if (btn.value == '-') {
tbody.deleteRow(row)
} else {
var tr = tbody.insertRow(tbody.rows.length - 1)
var arr = [
"<select><option>城际交通费</option></select>",
"<input type='text' onkeyup='calc(this)' name='je' />",
"<input type='text' />",
"<input type='button' value='+' onclick='addRow(this)' />"
]
for (var i = 0 i < 4 i++) {
var td = tr.insertCell(tr.cells.length)
td.innerHTML = arr[i]
}
btn.value = '-'
}
}
var calc = function (txt){
if(!/^[+-]?((\d+(\.\d*)?)|(\d*\.\d+))$/.test(txt.value)) {
txt.value = txt.value.replace(/[^\+\-\.\d]/g, "")
}
var jes = document.getElementsByName("je")
var sum = 0
for(var i = 0 i < jes.length i++) {
sum += parseFloat(jes[i].value)
}
zje.value = sum
}
onload = function (){
dt.value = new Date().toLocaleString()
}
</script>
</head>
<body>
<div class="wrap">
<table id="table">
<tbody>
<tr>
<td>填写人：</td>
<td>
<input type="text" value="双枪将" />
</td>
<td>填报时间：</td>
<td>
<input type="text" value="" id="dt" readonly />
</span>
</td>
</tr>
<tr>
<td>总金额：</td>
<td>￥
<input type="text" id="zje" readonly />
</td>
<td>状态：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<th>项目</th>
<th>金额</th>
<th>费用说明</th>
<th>操作</th>
</tr>
<tr>
<td>
<select>
<option>城际交通费</option>
</select>
</td>
<td>
<input type="text" onkeyup="calc(this)" name="je" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="button" value="+" onclick="addRow(this)" />
</td>
</tr>
<tr>
<td>事由：</td>
<td colspan=3>
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
