Home > Developer > JavaScript
The knowledge points involved:
1, Onmouseover,onmouseout
2. Dom Getelementbytagname
3, the new node element createelement;
<! DOCTYPE html>
<title> New Document </title>
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<script type= "Text/javascript" >
Window.onload = function () {
var tr=document.getelementsbytagname ("tr");
for (var i= 0;i<tr.length;i++) {
Bgchange (Tr[i]);
}
The mouse movement changes the background, and you can change the color of the row background by binding the mouse over events and mouse-removing events to each row.
function Bgchange (obj) {
Obj.onmouseover=function () {
Obj.style.backgroundcolor= "#f2f2f2";
}
Obj.onmouseout=function () {
Obj.style.backgroundcolor= "#fff";
}
}
}
Write a function to add a button call, dynamically add a child node on the last line of the table;
function Add () {
var num=prompt (' Please enter the study number ', ');
var name=prompt (' Please enter name ', ');
if (num!=null&&num!= "&&name!=null&&name!=") {
var newtr=document.createelement (' tr ');
Newtr.innerhtml= ' <td> ' +num+ ' </td> ' + ' <td> ' +name+ ' </td> ' + ' <td><a href= ' javascript:; "onclick=" removechild (This) "> Delete </a></td>"
var Otc=document.getelementbyid ("table"). LastChild;
Otc.appendchild (NEWTR);
}else{alert ("Please re-click button Input");}
}
Create a Delete function
function RemoveChild (obj) {
var Tr=obj.parentnode.parentnode;
Tr.parentNode.removeChild (TR);
}
</script>
<body>
<table border= "1" width= "50%" id= "table" >
<tr>
<th> Study No. </th>
<th> name </th>
<th> Operations </th>
</tr>
<tr>
<td>xh001</td>
<td> Wang Xiaoming </td>
<td><a href= "javascript:;" onclick= "removechild (This)" > Delete </a></td> <!--Add a click event on the Delete button-- >
</tr>
<tr>
<td>xh002</td>
<td> Liu Xiaofang </td>
<td><a href= "javascript:;" onclick= "removechild (This)" > Delete </a></td> <!--Add a click event on the Delete button-- >
</tr>
</table>
<input type= "button" value= "Add a Line" onclick= "Add ()"/> <!--Add Click events on the Add button
</body>
About tables--adding deleted rows, mouse selection (using JavaScript)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
