DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> title > < linkhref = " https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel = " stylesheet" type = " text/css" /> head > < styletype = " text/css" >
.button-trash {
display : inline-block;
border : 0;
width : 2rem;
height : 1rem;
outline : 0;
background-image : url (
"data:image/svg+xml,
) ;
background-repeat : no-repeat;
background-size : 1rem 1rem;
background-color : transparent;
}
.button-trash:focus {
border : 0;
outline : 0;
}
style > < body> < tableclass = " table" > < thead> < tr> < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > tr > thead > < tbodyid = " tb" > tbody > table > < scripttype = " text/javascript" >
window. onload = function ( ) {
var students = [
{
"studentNum" : "201711104043" ,
"name" : "马阳" ,
"class" : "软件182" ,
"gender" : "男"
} ,
{
"studentNum" : "201804102067" ,
"name" : "夏一鸣" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201810101153" ,
"name" : "李志勇" ,
"class" : "软件182" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104001" ,
"name" : "姜霞" ,
"class" : "软件181" ,
"gender" : "女"
} ,
{
"studentNum" : "201811104002" ,
"name" : "齐永智" ,
"class" : "软件181" ,
"gender" : "女"
} ,
{
"studentNum" : "201811104003" ,
"name" : "王雯雯" ,
"class" : "软件181" ,
"gender" : "女"
} ,
{
"studentNum" : "201811104004" ,
"name" : "高小菲" ,
"class" : "软件181" ,
"gender" : "女"
} ,
{
"studentNum" : "201811104005" ,
"name" : "赵蕊蕊" ,
"class" : "软件181" ,
"gender" : "女"
} ,
{
"studentNum" : "201811104006" ,
"name" : "骆家禾" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104007" ,
"name" : "王飞" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104008" ,
"name" : "倪恒智" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104009" ,
"name" : "李泽凯" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104010" ,
"name" : "马龙" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104011" ,
"name" : "王筝" ,
"class" : "软件181" ,
"gender" : "男"
} ,
{
"studentNum" : "201811104012" ,
"name" : "王梓一" ,
"class" : "软件181" ,
"gender" : "男"
}
] ;
var tableRow, cellNum, cellName, cellClass, cellGender, cellOperation, btnDelete;
var studentsTbody = document. getElementById ( "tb" ) ;
for ( i = 0 ; i < students. length; i++ ) {
var student = students[ i] ;
tableRow = document. createElement ( 'tr' ) ;
studentsTbody. appendChild ( tableRow) ;
cellNum = document. createElement ( 'td' ) ;
cellNum. textContent = student. studentNum;
tableRow. appendChild ( cellNum) ;
cellName = document. createElement ( 'td' ) ;
cellName. textContent = student. name;
tableRow. appendChild ( cellName) ;
cellClass = document. createElement ( 'td' ) ;
cellClass. textContent = student. class;
tableRow. appendChild ( cellClass) ;
cellGender = document. createElement ( 'td' ) ;
cellGender. textContent = student. gender;
tableRow. appendChild ( cellGender) ;
cellOperation = document. createElement ( 'td' ) ;
btnDelete = document. createElement ( 'button' ) ;
btnDelete. className = 'button-trash' ;
cellOperation. appendChild ( btnDelete) ;
tableRow. appendChild ( cellOperation) ;
btnDelete. addEventListener ( 'click' , function ( ) {
confirm ( ` 确定要删除学生 ${ this . parentElement. parentElement. children[ 1 ] . innerText} （ ${ this . parentElement. parentElement. children[ 0 ] . innerText} ）吗？ ` ) ;
} ) ;
}
}
script > body > html >
