实现员工删除的操作:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv = " Content-Type" content = " text/html; charset=UTF-8" >
< title> 添加删除记录练习</ title>
< link rel = " stylesheet" type = " text/css" href = " ex_2_style/css.css" />
< script type = " text/javascript" >
window. onload = function ( ) {
var allA = document. getElementsByTagName ( "a" ) ;
for ( var i= 0 ; i < allA. length ; i++ ) {
allA[ i] . onclick = function ( ) {
var tr = this . parentNode. parentNode;
var name = tr. children[ 0 ] . innerHTML;
var flag = confirm ( "确认删除" + name+ "吗?" ) ;
if ( flag) {
tr. parentNode. removeChild ( tr) ;
}
return false ;
} ;
}
} ;
</ script>
</ head>
< body>
< table id = " employeeTable" >
< tr>
< th> Name</ th>
< th> Email</ th>
< th> Salary</ th>
< th> </ th>
</ tr>
< tr>
< td> Tom</ td>
< td> tom@tom.com</ td>
< td> 5000</ td>
< td> < a href = " javascript:;" > Delete</ a> </ td>
</ tr>
< tr>
< td> Jerry</ td>
< td> jerry@sohu.com</ td>
< td> 8000</ td>
< td> < a href = " deleteEmp?id=002" > Delete</ a> </ td>
</ tr>
< tr>
< td> Bob</ td>
< td> bob@tom.com</ td>
< td> 10000</ td>
< td> < a href = " deleteEmp?id=003" > Delete</ a> </ td>
</ tr>
</ table>
< div id = " formDiv" >
< h4> 添加新员工</ h4>
< table>
< tr>
< td class = " word" > name: </ td>
< td class = " inp" >
< input type = " text" name = " empName" id = " empName" />
</ td>
</ tr>
< tr>
< td class = " word" > email: </ td>
< td class = " inp" >
< input type = " text" name = " email" id = " email" />
</ td>
</ tr>
< tr>
< td class = " word" > salary: </ td>
< td class = " inp" >
< input type = " text" name = " salary" id = " salary" />
</ td>
</ tr>
< tr>
< td colspan = " 2" align = " center" >
< button id = " addEmpButton" value = " abc" >
Submit
</ button>
</ td>
</ tr>
</ table>
</ div>
</ body>
</ html>
实现员工添加的操作:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv = " Content-Type" content = " text/html; charset=UTF-8" >
< title> 添加删除记录练习</ title>
< link rel = " stylesheet" type = " text/css" href = " ex_2_style/css.css" />
< script type = " text/javascript" >
function delA ( ) {
var tr = this . parentNode. parentNode;
var name = tr. children[ 0 ] . innerHTML;
var flag = confirm ( "确认删除" + name + "吗?" ) ;
if ( flag) {
tr. parentNode. removeChild ( tr) ;
}
return false ;
}
window. onload = function ( ) {
var allA = document. getElementsByTagName ( "a" ) ;
for ( var i = 0 ; i < allA. length; i++ ) {
allA[ i] . onclick = delA;
}
var addEmpButton = document. getElementById ( "addEmpButton" ) ;
addEmpButton. onclick = function ( ) {
var name = document. getElementById ( "empName" ) . value;
var email = document. getElementById ( "email" ) . value;
var salary = document. getElementById ( "salary" ) . value;
var tr = document. createElement ( "tr" ) ;
var nameTd = document. createElement ( "td" ) ;
var emailTd = document. createElement ( "td" ) ;
var salaryTd = document. createElement ( "td" ) ;
var aTd = document. createElement ( "td" ) ;
var a = document. createElement ( "a" ) ;
var nameText = document. createTextNode ( name) ;
var emailText = document. createTextNode ( email) ;
var salaryText = document. createTextNode ( salary) ;
var delText = document. createTextNode ( "Delete" ) ;
nameTd. appendChild ( nameText) ;
emailTd. appendChild ( emailText) ;
salaryTd. appendChild ( salaryText) ;
a. appendChild ( delText) ;
aTd. appendChild ( a) ;
tr. appendChild ( nameTd) ;
tr. appendChild ( emailTd) ;
tr. appendChild ( salaryTd) ;
tr. appendChild ( aTd) ;
a. href = "javascript:;" ;
a. onclick = delA;
var employeeTable = document. getElementById ( "employeeTable" ) ;
var tbody = employeeTable. getElementsByTagName ( "tbody" ) [ 0 ] ;
tbody. appendChild ( tr) ;
} ;
} ;
</ script>
</ head>
< body>
< table id = " employeeTable" >
< tr>
< th> Name</ th>
< th> Email</ th>
< th> Salary</ th>
< th> </ th>
</ tr>
< tr>
< td> Tom</ td>
< td> tom@tom.com</ td>
< td> 5000</ td>
< td>
< a href = " javascript:;" > Delete</ a>
</ td>
</ tr>
< tr>
< td> Jerry</ td>
< td> jerry@sohu.com</ td>
< td> 8000</ td>
< td>
< a href = " deleteEmp?id=002" > Delete</ a>
</ td>
</ tr>
< tr>
< td> Bob</ td>
< td> bob@tom.com</ td>
< td> 10000</ td>
< td>
< a href = " deleteEmp?id=003" > Delete</ a>
</ td>
</ tr>
</ table>
< div id = " formDiv" >
< h4> 添加新员工</ h4>
< table>
< tr>
< td class = " word" > name: </ td>
< td class = " inp" >
< input type = " text" name = " empName" id = " empName" />
</ td>
</ tr>
< tr>
< td class = " word" > email: </ td>
< td class = " inp" >
< input type = " text" name = " email" id = " email" />
</ td>
</ tr>
< tr>
< td class = " word" > salary: </ td>
< td class = " inp" >
< input type = " text" name = " salary" id = " salary" />
</ td>
</ tr>
< tr>
< td colspan = " 2" align = " center" >
< button id = " addEmpButton" >
Submit
</ button>
</ td>
</ tr>
</ table>
</ div>
</ body>
</ html>
实现员工添加的操作(改):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv = " Content-Type" content = " text/html; charset=UTF-8" >
< title> 添加删除记录练习</ title>
< link rel = " stylesheet" type = " text/css" href = " ex_2_style/css.css" />
< script type = " text/javascript" >
function delA ( ) {
var tr = this . parentNode. parentNode;
var name = tr. children[ 0 ] . innerHTML;
var flag = confirm ( "确认删除" + name + "吗?" ) ;
if ( flag) {
tr. parentNode. removeChild ( tr) ;
}
return false ;
}
window. onload = function ( ) {
var allA = document. getElementsByTagName ( "a" ) ;
for ( var i = 0 ; i < allA. length; i++ ) {
allA[ i] . onclick = delA;
}
var addEmpButton = document. getElementById ( "addEmpButton" ) ;
addEmpButton. onclick = function ( ) {
var name = document. getElementById ( "empName" ) . value;
var email = document. getElementById ( "email" ) . value;
var salary = document. getElementById ( "salary" ) . value;
var tr = document. createElement ( "tr" ) ;
tr. innerHTML = "<td>" + name+ "</td>" +
"<td>" + email+ "</td>" +
"<td>" + salary+ "</td>" +
"<td><a href='javascript:;'>Delete</a></td>" ;
var a = tr. getElementsByTagName ( "a" ) [ 0 ] ;
a. onclick = delA;
var employeeTable = document. getElementById ( "employeeTable" ) ;
var tbody = employeeTable. getElementsByTagName ( "tbody" ) [ 0 ] ;
tbody. appendChild ( tr) ;
} ;
} ;
</ script>
</ head>
< body>
< table id = " employeeTable" >
< tr>
< th> Name</ th>
< th> Email</ th>
< th> Salary</ th>
< th> </ th>
</ tr>
< tr>
< td> Tom</ td>
< td> tom@tom.com</ td>
< td> 5000</ td>
< td>
< a href = " javascript:;" > Delete</ a>
</ td>
</ tr>
< tr>
< td> Jerry</ td>
< td> jerry@sohu.com</ td>
< td> 8000</ td>
< td>
< a href = " deleteEmp?id=002" > Delete</ a>
</ td>
</ tr>
< tr>
< td> Bob</ td>
< td> bob@tom.com</ td>
< td> 10000</ td>
< td>
< a href = " deleteEmp?id=003" > Delete</ a>
</ td>
</ tr>
</ table>
< div id = " formDiv" >
< h4> 添加新员工</ h4>
< table>
< tr>
< td class = " word" > name: </ td>
< td class = " inp" >
< input type = " text" name = " empName" id = " empName" />
</ td>
</ tr>
< tr>
< td class = " word" > email: </ td>
< td class = " inp" >
< input type = " text" name = " email" id = " email" />
</ td>
</ tr>
< tr>
< td class = " word" > salary: </ td>
< td class = " inp" >
< input type = " text" name = " salary" id = " salary" />
</ td>
</ tr>
< tr>
< td colspan = " 2" align = " center" >
< button id = " addEmpButton" >
Submit
</ button>
</ td>
</ tr>
</ table>
</ div>
</ body>
</ html>
注意一个问题:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv = " Content-Type" content = " text/html; charset=UTF-8" >
< title> 添加删除记录练习</ title>
< link rel = " stylesheet" type = " text/css" href = " ex_2_style/css.css" />
< script type = " text/javascript" >
window. onload = function ( ) {
var allA = document. getElementsByTagName ( "a" ) ;
for ( var i= 0 ; i < allA. length ; i++ ) {
alert ( "for循环正在执行" + i) ;
allA[ i] . onclick = function ( ) {
alert ( "响应函数正在执行" + i) ;
return false ;
} ;
}
} ;
</ script>
</ head>
< body>
< table id = " employeeTable" >
< tr>
< th> Name</ th>
< th> Email</ th>
< th> Salary</ th>
< th> </ th>
</ tr>
< tr>
< td> Tom</ td>
< td> tom@tom.com</ td>
< td> 5000</ td>
< td> < a href = " javascript:;" > Delete</ a> </ td>
</ tr>
< tr>
< td> Jerry</ td>
< td> jerry@sohu.com</ td>
< td> 8000</ td>
< td> < a href = " deleteEmp?id=002" > Delete</ a> </ td>
</ tr>
< tr>
< td> Bob</ td>
< td> bob@tom.com</ td>
< td> 10000</ td>
< td> < a href = " deleteEmp?id=003" > Delete</ a> </ td>
</ tr>
</ table>
< div id = " formDiv" >
< h4> 添加新员工</ h4>
< table>
< tr>
< td class = " word" > name: </ td>
< td class = " inp" >
< input type = " text" name = " empName" id = " empName" />
</ td>
</ tr>
< tr>
< td class = " word" > email: </ td>
< td class = " inp" >
< input type = " text" name = " email" id = " email" />
</ td>
</ tr>
< tr>
< td class = " word" > salary: </ td>
< td class = " inp" >
< input type = " text" name = " salary" id = " salary" />
</ td>
</ tr>
< tr>
< td colspan = " 2" align = " center" >
< button id = " addEmpButton" value = " abc" >
Submit
</ button>
</ td>
</ tr>
</ table>
</ div>
</ body>
</ html>