点击编辑按钮 后 文字变成文本框,按钮变成保存 js +css+html 求代码

 我来答
匿名用户
推荐于2016-09-23
展开全部
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
th{
width: 110px;
line-height: 25px;
background: #eee;
}
input{
width: 108px;
line-height: 23px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th ><a id="edit" href="#">编辑</a></th>
</tr>
</table>
<script>
var statu = 0;
var edit = document.getElementById('edit');
var item = document.getElementsByTagName('th');
var item_length = item.length-1
var item_value = new Array(item_length);

for(i = 0; i < item_length; i++){
item_value[i] = item[i].innerHTML;
}

edit.onclick =function(){
if(statu == 0){
edit.innerHTML= '保存';
for(i = 0; i < item_length; i++){
item[i].innerHTML = '<input type="txt" class="item_input" value="'+item_value[i]+'">';
}
statu = 1;
}else{
edit.innerHTML= '编辑';
var item_input = document.getElementsByClassName('item_input');
for(i = 0; i < item_length; i++){
item_value[i] = item_input[i].value;
}
for(i = 0; i < item_length; i++){
item[i].innerHTML = item_value[i];
}
statu = 0
}
return false;
}
</script>
</body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式