懒加载

跨域

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题跨域/title

脚本src=' Ajax。js '/脚本

脚本

getAJAX(函数（数据){

console.log(数据);

},'http://10 .9 .156 .51:8086/API/article/add。aspx '；

/script

/head

身体

/body

/html

！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

标题查询数据/title

风格

#容器{

宽度： 992px

margin: 20px自动

}

th，td{

背景# fff

font-size :14 px

高度： 30px

文本-对齐：中心；

'微软雅黑；

}

a{

颜色： # 00468C

text-decoration : none

}

a:hover{

颜色： # 00468C

文本修饰：下划线；

}。偶数{

背景# ff6600

}

#封面{

位置：

左： 0；

top : 0；

宽度：;

高度： ;

背景： # 000;

opacity:0.6

filter:alpha(不透明度=60);

显示器：无；

}

#updateform{

宽度宽度：300像素

高度： 300px

border:solid 1px # CCC

位置：

左侧：50%;

边距-左：-150像素；

前：50%；

margin-top :-200 px；

显示器：无；

背景# fff

}

#updateform h3{

显示器：块；

边框-底部：实心1px # CCC

边框-底部：实心1px # CCC

高度： 38px

线高： 38px

背景# ff6600

边距：0；

''微软雅黑；

color: # fff

font-size : 16px

}

#updateform form div{

padding-top : 10px；

}

/style

脚本src=' Ajax。js '/脚本

脚本

函数createData(b){

var str=

for(var I=2；i b。长度；i ){

var css=

if(i % 2==0){

css='偶数'

}

str='tr '

TD class=' CSS ' ' ' b[I].ID '/td '

TD class=' CSS ' ' ' b[I].'标题/td '

TD class=' CSS ' ' ' b[I].AClickCount '/td '

TD class=' CSS ' ' ' b[I].ATime '/td '

td class=' ' css ' ' '

a href=\ ' JavaScript : ' onclick=' updateData(this)'修改/a | a href=\ ' JavaScript :\' onclick='delDOM(this)'删除/a '

/td '

/tr '；

}

var html=' table id=\ ' tb1 '单元格间距=\ ' 1 ' style=\ ' width :990 px背景： # 000;\''

tr '

泰国(泰国)编号/th '

泰国(泰国)标题/th '

泰国(泰国)点击量/th '

泰国(泰国)发布时间/th '

泰国(泰国)操作/th '

/tr '

潜艇用热中子反应堆(海底热反应堆的缩写)

/table '；

container.innerHTML=html

}

window.onload=function(){

var url='././API/article/get。aspx '；

getAJAX(函数（数据){

createData(数据);

}，URL)；

}

函数delDOM(obj){

var tb1=文档。GetElementbyID(' tb1 ')；

var id=obj。ParentNode。ParentNode。儿童[0].innerHTML

getAJAX(函数（数据){

if(data.result=='ok'){

tb1.children[0].移除子对象。父节点。父节点)；

}

},'././API/article/del.aspx？id=' id ' ')；

}

函数updateData(obj){

var cover=文档。getelementbyid(' cover ')；

var updateform=document。GetElementbyID(' updateform ')；

console.log(封面);

掩护。风格。display=' block

updateform。风格。display=' block

改变标题=obj。ParentNode。ParentNode。儿童[1].innerHTML

var点击次数=obj。ParentNode。ParentNode。儿童[2].innerHTML

var id=obj。ParentNode。ParentNode。儿童[0].innerHTML

var form=document。表单[0]；

form.elements[0].value=atitle

form.elements[1].值=点击计数

form.elements[2].onclick=function(){

var xhr=create xhr()；

xhr.open('POST '，'././API/article/update.aspx '，true)；

xhr。SetRequestHeader(' Content-Type '，' application/x-www-form-URL encoded ')；

xhr。onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

var data=eval('(' xhr。response text '))；

if(data.result=='ok'){

updateform。风格。显示=' none

掩护。风格。显示=' none

obj。ParentNode。ParentNode。儿童[1].innerHTML=form.elements[0].价值；

obj。ParentNode。ParentNode。儿童[2].innerHTML=form.elements[1].价值；

//var url='././API/article/get。aspx '；

//GetJax(函数（数据){

//createData(数据);

//}，URL)；

}

}

}

}

xhr。发送(' atitle='表单。元素[0]).value ' aclick count='形式。元素[1].value ' id=' id ' ')；

}

}

/script

/head

身体

div id='cover'/div

div id='updateform '

h3修改数据/h3

形式

差异标nbsp .题：输入类型='text'/div

差异点击量：输入类型='text'/div

占卜类型='按钮'值='保存数据/div

/form

/div

div id='container '

/div

/body

/html