<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>test</title>
<script language="javascript">
var trno = 1
function del(tNme,rNme){
var mytable = document.getElementById(tNme)
var myrow = document.getElementById(rNme)
mytable.deleteRow(myrow.rowIndex)
}
function add(tNme){
var tabNme = document.getElementById(tNme)
var rowlen=tabNme.rows.length
if(rowlen==0){
trno = 1
}
var mytr = tabNme.insertRow()
mytr.setAttribute("id","tr"+trno) //设置id
var mytd_1=mytr.insertCell()//第1列
var mytd_2=mytr.insertCell()//第2列
mytd_1.innerHTML="输入值<input type='text' name='name1' value='望采纳!'/>"
mytd_2.innerHTML="<input name='b' type='button' value='删除该行' onClick=\"javascript:del('tab','tr"+trno+"')\">"
trno++
}
</script>
</head>
<body>
<table id="tab" >
<tr>
<td>
<input name="b" type="button" value='添加行' onClick="javascript:add('tab')">
</td>
</tr>
<tr height="30px" id = "tr1">
<td>输入值
<input type="text" name="name1" value="望采纳!"/>
</td>
<td>
<input name="b" type="button" value='删除该行' onClick="javascript:del('tab','tr1')">
</td>
</tr>
</table>
</body>
</html>
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="tab" width="400px" border="1px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th> *** 作</th>
</tr>
</table>
<hr>
<form name="myform" action="" onsubmit="return false">
姓名： <input type="text" name="user"><br>
年龄： <input type="number" name="age"><br>
性别： <input type="text" name="sex"><br>
<br>
<button onclick="getMessage()">提交</button>
</form>
<script>
var tab = document.getElementById('tab')
var user = document.myform.user
var age = document.myform.age
var sex = document.myform.sex
function getMessage(){
//创建行
var tr = tab.insertRow(tab.rows.length)
tr.insertCell(0).innerHTML = user.value
tr.insertCell(1).innerHTML = age.value
tr.insertCell(2).innerHTML = sex.value
tr.insertCell(3).innerHTML = '<button onclick="del(this)">删除</button>'
}
function del(n){
var index = n.parentNode.parentNode.rowIndex
console.log(index)
tab.deleteRow(index)
}
</script>
</body>
</html>
上代码
该程序用遍历实现tab栏切换步骤如下：1、根据微机网资料显示，获取tab栏的父元素和所有的tab选项卡元素。
2、遍历所有的tab选项卡元素，为每个元素添加点击事件。
3、在点击事件中，遍历所有的tab选项卡元素，将当前选中的tab选项卡添加active类，其他tab选项卡移除active类即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）