HTM中几个常用的Element的Javascript用法（Form，Table，List）
程序员文章站
2022-06-10 11:46:00
...
Form in HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>A sample Form Using Get</title> </head> <body BGCOLOR="#FDF5E6"> <h2 Align="center">A Sample Form Using Get</h2> <form id="infoForm" method="get" action="parameters"> First name: <input id="firstName" type="text" name="firstName" value="Jingyang" /><br /> Last name: <input id="lastName" type="text" name="lastName" value="Yu" /> <p /> <input type="radio" name="sex" id="male" value="male"/>Male<br /> <input type="radio" name="sex" id="female" value="female"/>Female <p /> <input type="checkbox" name="vehicle" value="Bike" id="bike" />I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" id="car" onclick="displayCarSelect()" />I have a car <select name="cars" style="display: none" id="carSelect"> <option value="volvo">Volve</option> <option value="audi">Audi</option> <option value="bmw">BMW</option> <option value="vw">VW</option> </select> <p /> <p /> <input type="button" value="submit" id="sub"/> </form> </body> </html>
<script type="text/javascript">
function displayCarSelect() {
if (document.getElementById("car").checked)
document.getElementById("carSelect").style.display = "block";
else
document.getElementById("carSelect").style.display = "none";
}
function trim(s) {
return s.replace(/^\s*/, "").replace(/\s*$/, "");
}
function check() {
var firstName = document.getElementById("firstName").value;
var form = document.getElementById("infoForm");
var lastName = form.lastName.value;
var error = "";
if (trim(firstName) == null || trim(firstName) == "") {
error += "\n first name can not be empty";
form.firstName.focus();
}
if (trim(lastName) == null || trim(lastName) == "") {
error += "\n last name can not be empty";
form.lastName.focus();
}
if(!document.getElementById("male").checked&&!document.getElementById("female").checked){
error+="\n please select your sex";
}
if (error != "") {
alert(error);
} else {
form.submit();
}
}
document.getElementById("sub").onclick=check;
</script>
Table in HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>access table element</title> </head> <body> <div id="change"> Change the <input id="rowToChange" type="number" size="2"/> row, the <input id="colToChange" type="number" size="2" /> column with the value <input id="value" type="text" size="16"/> <input id="btnChange" type="button" value="Change" onclick="change()"/> </div> <br/><br/> <div id="insert"> Insert in the <input id="rowToInsert" type="number" size="2"/> row, with the First name: <input id="firstName" type="text" size="16"/> and the Last name: <input id="lastName" type="text" size="16"/> <input id="btnInsert" type="button" value="Insert" onclick="insert()"/> </div> <br/><br/> <div id="delete"> Delete the <input id="rowToDelete" type="number" size="2"/> row <input id="btnDelete" type="button" value="Delete" onclick="deleteRow()"/> </div> <br/><br/> <div id="table"> <table id="t" border="1"> <caption>Name Table</caption> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tr> <td>Jingyang</td> <td>Yu</td> </tr> <tr> <td>Yufeng</td> <td>Guo</td> </tr> <tr> <td>Christian</td> <td>Meier</td> </tr> </table> </div> <br/><br/> <div id="getValue"> Display the <input id="rowToSelect" type="number" size="2"/> row, the <input id="colToSelect" type="number" size="2" /> column with the value <input id="btnGet" type="button" value="Get" onclick="get()"/><br/> <textarea id="textForSelect" rows="2" cols="10" readonly></textarea> </div> </body> </html>
<script type="text/javascript">
function get(){
var table=document.getElementById("t");
var row = document.getElementById("rowToSelect").value;
row = parseInt(row);
var col=document.getElementById("colToSelect").value;
col= parseInt(col);
if(isNaN(row)){
alert("the input of the row must be a number");
return false;
}
if(isNaN(col)){
alert("the input of the column must be a number");
return false;
}
if(row>table.rows.length ||col>table.rows.item(row-1).cells.length){
alert("selected table cell is not exist");
return false;
}
//alert( t.rows[row-1].cells[col-1].innerHTML);
document.getElementById("textForSelect").innerHTML=t.rows[row-1].cells[col-1].innerHTML;
}
function change(){
var table=document.getElementById("t");
var row = document.getElementById("rowToChange").value;
row = parseInt(row);
var col=document.getElementById("colToChange").value;
col= parseInt(col);
if(isNaN(row)){
alert("the input of the row must be a number");
return false;
}
if(isNaN(col)){
alert("the input of the column must be a number");
return false;
}
if(row>table.rows.length ||col>table.rows.item(row-1).cells.length){
alert("selected table cell is not exist");
return false;
}
t.rows[row-1].cells[col-1].innerHTML = document.getElementById("value").value;
}
function trim(s) {
return s.replace(/^\s*/, "").replace(/\s*$/, "");
}
function insert(){
var table=document.getElementById("t");
var row = document.getElementById("rowToInsert").value;
row = parseInt(row);
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
if(trim(firstName)==null||trim(firstName)==""){
alert("first name can not be empty");
return false;
}
if(trim(lastName)==null||trim(lastName)==""){
alert("last name can not be empty");
return false;
}
if(isNaN(row)){
alert("the input of the row must be a number");
return false;
}
if(row>table.rows.length){
var r = confirm("the row number is bigger than the current table.\n"+"The value will be inserted into the end of the table");
if(r==true){
var r= table.insertRow(table.rows.length);
r.insertCell(0).innerHTML = firstName;
r.insertCell(1).innerHTML = lastName;
}else{
return false;
}
}
var r= table.insertRow(row);
r.insertCell(0).innerHTML = firstName;
r.insertCell(1).innerHTML = lastName;
}
function deleteRow(){
var table=document.getElementById("t");
var row = document.getElementById("rowToDelete").value;
row = parseInt(row);
if(isNaN(row)){
alert("the input of the row must be a number");
return false;
}
if(row>=table.rows.length){
var r = confirm("the row number is bigger than the current table.\n"+"The lat row will be deleted.");
if(r==true){
table.deleteRow(table.rows.length-1);
}else{
return false;
}
}
var firstName = table.rows[row].cells[0].innerHTML;
var lastName = table.rows[row].cells[1].innerHTML
var r = confirm("Do you want to delete the name:'"+firstName+" "+lastName+"' in the table?" );
if(r==true){
table.deleteRow(row);
}else{
return false;
}
}
</script>
List in HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample List</title> </head> <body> <div id="list"> Courses: <ul id="courses"> <li>Software Engineering</li> <li>Database</li> </ul> </div> <div id="insert"> Insert course's name into the list: <input type="text" id="value" size="20"/> <input type="button" id="btnInsert" value="Insert" onclick="insert()"/> </div> <br/><br/> <div id="insertBefore"> Insert course's name on the top of the list : <input type="text" id="value2" size="20"/> <input type="button" id="btnInsertBefore" value="Insert Before" onclick="insertOnTop()"/> </div> </body> </html>
<script type="text/javascript">
function trim(s) {
return s.replace(/^\s*/, "").replace(/\s*$/, "");
}
function insert(){
var ul= document.getElementById("courses");
var li = document.createElement("li");
var value = document.getElementById("value").value;
if(trim(value)==null||trim(value)==""){
alert("can not insert cours without name");
return false;
}
li.innerHTML= value;
ul.appendChild(li);
}
function insertOnTop(){
var ul= document.getElementById("courses");
var li = ul.firstChild.nextSibling.cloneNode(false);
var value = document.getElementById("value2").value;
if(trim(value)==null||trim(value)==""){
alert("can not insert cours without name");
return false;
}
li.innerHTML= value;
ul.insertBefore(li,ul.firstChild);
}
</script>
上一篇： JS常用各种正则表达式
下一篇： 仿腾讯回顶部和建议