📄 table.html
字号:
<html>
<head>
<script language="javascript">
/*
function getEle(tName){
return document.getElementById(tName);
}
function addNew(){
//1 拿到text的值
var newName = getEle("newName").value;
var newBirth = getEle("newBirth").value;
var newEmail = getEle("newEmail").value;
//2 创建相应的td
var tdName = document.createElement("td");
var txtName = document.createTextNode(newName);
tdName.appendChild(txtName);
var tdBirth = document.createElement("td");
var txtBirth = document.createTextNode(newBirth);
tdBirth.appendChild(txtBirth);
var tdEmail = document.createElement("td");
var txtEmail = document.createTextNode(newEmail);
tdEmail.appendChild(txtEmail);
//3 创建一个tr
var newTr = document.createElement("tr");
newTr.appendChild(tdName);
newTr.appendChild(tdBirth);
newTr.appendChild(tdEmail);
//4 把tr放入table
var myTable = getEle("myTable");
myTable.appendChild(newTr);
}
*/
function getEle(tName){
return document.getElementById(tName);
}
function createEle(newTagName, newTxtNode){
if(arguments.length == 2){
var newTag = document.createElement(newTagName);
var newTxt = document.createTextNode(newTxtNode);
newTag.appendChild(newTxt);
return newTag;
}else if(arguments.length == 1){
return document.createElement(newTagName);
}
}
function appendTags(parentTag){
//arguments代表参数的数组
for(var i=1; i< arguments.length ; i++){
parentTag.appendChild(arguments[i]);
}
return parentTag;
}
function addNew(){
//1 拿到text的值
var newName = getEle("newName").value;
var newBirth = getEle("newBirth").value;
var newEmail = getEle("newEmail").value;
//2 创建相应的td
var tdName = createEle("td", newName);
var tdBirth = createEle("td", newBirth);
var tdEmail = createEle("td", newEmail);
var tdBtn = createEle("td");
var newBtn = createEle("input");
newBtn.type = "button";
newBtn.value = "delete";
newBtn.onclick = function(){
del(this);
}
tdBtn.appendChild(newBtn);
//3 创建一个tr
var newTr = createEle("tr");
newTr = appendTags(newTr, tdName, tdBirth, tdEmail, tdBtn);
//4 添加Event事件
newTr.onmouseover = function(){
overEve(this);
}
newTr.onmouseout = function(){
outEve(this);
}
//5 把tr放入table
var myTable = getEle("myTable");
myTable.appendChild(newTr);
}
var over = "gray";
var out = "white";
function overEve(tag){
tag.bgColor = over;
}
function outEve(tag){
tag.bgColor = out;
}
function del(tag){
//获得行标记(tr)
var myTr = tag.parentNode.parentNode;
var myTable = getEle("myTable");
myTable.removeChild(myTr);
}
</script>
</head>
<body>
name: <input id="newName" type="text">
birthday: <input id="newBirth" type="text">
email: <input id="newEmail" type="text">
<input type="button" value="add new" onclick="addNew()">
<hr>
<table border="1" cellspacing="0" align="center" width="70%">
<tbody id="myTable">
<tr onmouseover="overEve(this)" onmouseout="outEve(this)">
<td>Huxz</td>
<td>1900-1-1</td>
<td>huxz@cernet.com</td>
<td><input type="button" value="delete" onclick="del(this)"</td>
</tr>
<tr onmouseover="overEve(this)" onmouseout="outEve(this)">
<td>Liucy</td>
<td>1920-3-1</td>
<td>liucy@cernet.com</td>
<td><input type="button" value="delete" onclick="del(this)"</td>
</tr>
<tr onmouseover="overEve(this)" onmouseout="outEve(this)">
<td>Wangl</td>
<td>1910-3-1</td>
<td>wangl@cernet.com</td>
<td><input type="button" value="delete" onclick="del(this)"</td>
</tr>
</tbody>
</table>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -