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

Question

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

我想要的是一个按钮，控制所有“已补货”列，所有数字都变成输入框。
控制表格里面加了class是content的数据，
点击以后

 <span class=content>0</span>

变输入框，其他列数据不要变。

 <tr>
      <td> </td>
    <td><span class="content">0</span></td></tr>

    小白问题，跪求大神，

Answer 1

发个jquery版本的给你

 <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<form>
<table id="tb" border="1">
<tr><td>列1</td><td>已补货</td><td>补货</td><td>列其他</td></tr>
<tr><td>列1</td><td><span class="content">0</span></td><td><input type="text"/></td><td>列其他</td></tr>
<tr><td>列1</td><td><span class="content">0</span></td><td><input type="text"/></td><td>列其他</td></tr>
<tr><td>列1</td><td><span class="content">0</span></td><td><input type="text"/></td><td>列其他</td></tr>
</table>
<input type="submit" value="已补货" onclick="return renderInput(this)"/></form>
<script>
function renderInput(btn){
var span=$('#tb span.content');
if(span.length>0)//没有将已补货列生成输入框
span.each(function(){$(this).replaceWith('<input type="text" name="num" value="'+this.innerHTML+'"/>')});
return span.length==0;//没有生成input则返回false阻止表单提交
}
$(function () {
  var tb=$('#tb'),delIndex=-1;
   tb.find('tr:first td').each(function(index){if($(this).text()=='补货'){delIndex=index;return false;}})//找到补货那列
   tb.find('tr td:nth-child('+(delIndex+1)+')').remove();//删除补货那列
});
</script>