function getData() {
var listNo = document.getElementById('listNo').value
var batchNum = document.getElementById('batchNum').value
var classNo = document.getElementById('classNo').value
var exp = document.getElementById('exp').value
var number = document.getElementById('number').value
var per = [
{ listNo1: listNo, batchNum1: batchNum, classNo1: classNo, exp1: exp, number1: number },
]
var tbody = document.getElementById('tbMain')
for (var i = 0 i < per.length i++) { //遍历一下json数据
var trow = getDataRow(per[i]) //定义一个方法,返回tr数据
tbody.appendChild(trow)
}
}
function getDataRow(h) {
var row = document.createElement('tr') //创建行
var listNoCell = document.createElement('td') //创建第一列listNo
listNoCell.innerHTML = h.listNo1 //填充数据
row.appendChild(listNoCell) //加入行 ，下面类似
var batchNumCell = document.createElement('td')//创建第二列batchNum
batchNumCell.innerHTML = h.batchNum1
row.appendChild(batchNumCell)
var classNoCell = document.createElement('td')//创建第三列classNo
classNoCell.innerHTML = h.classNo1
row.appendChild(classNoCell)
var expCell = document.createElement('td')//创建第四列exp
expCell.innerHTML = h.exp1
row.appendChild(expCell)
var numberCell = document.createElement('td')//创建第五列number
numberCell.innerHTML = h.number1
row.appendChild(numberCell)
//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
var delCell = document.createElement('td')//创建第六列， *** 作列
row.appendChild(delCell)
var btnDel = document.createElement('input') //创建一个input控件
btnDel.setAttribute('type', 'button') //type="button"
btnDel.setAttribute('value', '删除')
btnDel.setAttribute('onclick', 'delete1(this)')
delCell.appendChild(btnDel) //把删除按钮加入td
//删除 *** 作
return row //返回tr数据
}
function delete1(obj) {
if (confirm("确定删除这一行嘛？")) {
//找到按钮所在行的节点，然后删掉这一行
obj.parentNode.parentNode.remove()
// obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode)
//var curRow = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.rowIndex
// tbMain.deleteRow(curRow)
//btnDel - td - tr - tbody - 删除(tr)
//刷新网页还原。实际 *** 作中，还要删除数据库中数据，实现真正删除
}
}
</script>
请采纳
给出示例：
<html><head>
<meta http-equiv="content-type" content="text/htmlcharset=GBK">
<script type="text/javascript">
function clearVal() {
// 获取文本框对象
var el = document.getElementById('num')
if (el) {
// 将文本框对象值清空
el.value = ''
}
}
</script>
</head>
<body>
<form action="Untitled-3.html" name="form" method="post">
<div>Tem<br><input type="text" name="num" id="num" value='7' /></div>
<div>
<input type="button" value="按钮" onclick="clearVal()"/>
</div>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）