css js添加

来源：互联网发布：苹果mac输入法设置编辑：程序博客网时间：2024/06/08 17:02

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>js节点的删除/替换</title>
</head>

<body>
<input type="button" id="add" value="添加" onclick="add()" />
<table border="1px" id="t">
<tr>
<th>Header</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>删除</td>
</tr>
</table>
<script type="text/javascript">
function add() {

//创建一个标签
var tr = document.createElement("tr");
var td0 = document.createElement("td");

var txt0 = document.createTextNode("李四");
td0.appendChild(txt0);
tr.appendChild(td0);
var td1 = document.createElement("td");
//动态操作属性
td1.setAttribute("onclick","delete1(this)")
var txt1 = document.createTextNode("删除");

td1.appendChild(txt1);
tr.appendChild(td1);

var table = document.getElementById("t");
table.appendChild(tr);
}

function delete1(t) {
//parentNode 父节点
var tr = t.parentNode;
tr.remove();
}
</script>

</body>

</html>

------------------------------------------------------

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>DOM学习</title>
</head>

<body>
用户名:<input type="text" id="username" /><br> 密   码:
<input type="text" id="password" /><br>
<input type="button" id="add" value="添加" onclick="add()"/><br>
<table border="1" id = "t">
<tr>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>zhangs</td>
<td>123</td>
</tr>
</table>

<script type="text/javascript">

function add(){

//获取元素
//document 操作页面的对象
//getElementById 根据id获取标签
//value 输入框里面的值
var username= document.getElementById("username");
//从输入框里面取值
var name = username.value;
//------------------密码---------
var password = document.getElementById("password").value;

//动态添加子节点
var tr = document.createElement("tr");//创建节点,参数是节点名
var td0 = document.createElement("td");
//文字，在html中叫文本标签
var name1 = document.createTextNode(name);//创建文本标签
//将文字标签放入td
td0.appendChild(name1);
//加入密码
var td1 = document.createElement("td");
var pass1 = document.createTextNode(password);
td1.appendChild(pass1);
//将td tr
tr.appendChild(td0);
tr.appendChild(td1);
//将tr 放入表格
var tabel = document.getElementById("t");
tabel.appendChild(tr);
}

</script>

</body>
</html>

阅读全文

0 0