<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>last.html</title>
<style>
table{
border: 1px solid green;
border-collapse: collapse;
}
td,th {
border: 1px solid green;
text-align: center;
}
th {
background-color: green;
color: white;
}
</style>
<script type="text/javascript">
var updateToSubmit = function (btn)
{
if (btn.value == '提交')
{
return true;
}
var tbody = table.tBodies[0];
var trs = tbody.rows;
for ( var i = 1; i < trs.length - 1; i++)
{
var td = trs[i].cells[0];
var text = document.createElement('input');
text.type = 'text';
text.style.textAlign = 'center';
text.style.width = '50px';
text.value = td.firstChild.nodeValue;
td.removeChild(td.firstChild);
td.appendChild(text);
}
if (btn.value == '修改')
{
btn.value = '提交';
return false;
}
}
</script>
</head>
<body>
<form action="">
<table id="table">
<tr><th>已补货</th></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td>0</td></tr>
<tr><td><input type="submit" onclick="return updateToSubmit(this);" value="修改" /></td></tr>
</table>
</form>
</body>
</html>
追问 没有错的,是要这个效果的,但是这个只能控制表格第一列的数据,有没有办法是控制表格里面加了class是content的数据,
好像下面这样,我需要点击以后0
这个列变输入框,其他列数据不要变。
追答你的需求变了,供不应求
追问你能告诉我怎样只改变span为输入框吗?就是怎样获取class等于content的部分
追答改下这2句就可以了
text.value = td.children[0].firstChild.nodeValue;
td.removeChild(td.children[0]);
追问好了,我用jquery直接隐藏和显示就实现效果了,不过用了两个按键。分给你吧,谢谢了。