JS如何显示和隐藏一个表格中的所有表单输入框。

现在是想要把表格的补货一栏去掉，在表格底部加一个按钮，点击以后已补货的数字变成输入框。然后再次点击以后提交。我想要的是一个按钮，控制所有“已补货”列，所有数字都变成输入框... 现在是想要把表格的补货一栏去掉，在表格底部加一个按钮，点击以后已补货的数字变成输入框。然后再次点击以后提交。

我想要的是一个按钮，控制所有“已补货”列，所有数字都变成输入框。
<tr>
<td> </td>
<td><span class="content">0</span></td></tr> 展开

 我来答

1个回答

#热议# 上班途中天气原因受伤算工伤吗？

匿名用户
推荐于2016-06-23

展开全部

<!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直接隐藏和显示就实现效果了，不过用了两个按键。分给你吧，谢谢了。