Home > Developer > Web Develop
The following are simple effects:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Table {
width:555px;
Text-align:center;
}
Table A {
Text-decoration:none;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var formelements = document.queryselector (' form ');
var inputelements = document.queryselectorall (' input ');
var tableelements = document.queryselector (' table ');
var tbodyelements = tableelements.queryselector (' tbody ');
var selectelements = document.queryselector (' div select ');
var checkall = document.queryselector (' thead input ');
var delall = Document.queryselector (' thead a ');
var nub = 0;
Inputelements[2].onclick = function () {
for (var i = 0; i < 2; i++) {
if (inputelements[i].value== "" | | selectelements.value== "") {
Alert (' Please enter full information ');
Inputelements[i].focus ();
Return
}
}
var trelements = document.createelement (' tr ');
trelements.innerhtml = ' <td><input type= ' checkbox ></td><td> ' + (nub+1) + ' </TD><TD > ' +inputelements[0].value+ ' </td><td> ' +inputelements[1].value+ ' </td><td> ' + Selectelements.value+ ' </td><td><a href= "javascript:;" > Move up </a> <a href= "javascript:;" > Move Down </a> <a href= "javascript:;" > Delete </a></td> ';
var aelements = Trelements.queryselectorall (' a ');
Aelements[0].onclick = function () {
if (trelements.previouselementsibling) {
Tbodyelements.insertbefore (trelements,trelements.previouselementsibling);
} else{
Alert ("This is already the first one");
}
};
Aelements[1].onclick = function () {
if (trelements.nextelementsibling) {
Tbodyelements.insertbefore (trelements.nextelementsibling,trelements);
} else{
Alert ("This is already the last one");
}
};
Aelements[2].onclick = function () {
Tbodyelements.removechild (trelements);
Tellcheckall ();
};
Tbodyelements.appendchild (trelements);
checkall.checked = false;
for (var i = 0; i < 2; i++) {
Inputelements[i].value = "";
}
Selectelements.value = "";
nub++;
var checkboxelements = tbodyelements.getelementsbytagname (' input ');
Checkall.onchange = function () {
for (var i = 0; i < checkboxelements.length; i++) {
checkboxelements[i].checked = this.checked;
}
};
Delall.onclick = function () {
for (var i = 0; i < checkboxelements.length; i++) {
if (checkboxelements[i].checked) {
Tbodyelements.removechild (Checkboxelements[i].parentnode.parentnode);
i--;
}
}
checkall.checked = false;
};
for (var i = 0; i < checkboxelements.length; i++) {
Checkboxelements[i].onchange = function () {
Tellcheckall ();
};
}
function Tellcheckall () {
var Ischeck = true;
for (var i = 0; i < checkboxelements.length; i++) {
if (!checkboxelements[i].checked) {
Ischeck = false;
Break
}
}
checkall.checked = Ischeck;
};
};
};
</script>
<body>
<form>
<div>
<label for= "" > Name <input type= "text" ></LABEL>
<label for= "" > Age <input type= "text" ></LABEL>
< Label for= "" > Gender
<select id= "";
<option value= "" ></OPTION>
<option value= "female" > Female </option>,
<option value= "male" > Male </option>
<option value= "secrecy" > Secrecy </option>
</select>
</label>
<input type= "button" value= "Add";
</div>
<table border= " 1 "
<thead>
<tr>
<th>
<input type=" checkbox ";
<a href=" javascript:; " > Delete selected </a>
</th>
<th>id</th>
<th> name </th>
<th> Age </th
<th> gender </th>
<th> operation </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
The personal information of a JS Mini demo is added every day. Main points of knowledge: Table operations in DOM operations, node operations
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
