急,如题,表格tr标签里面嵌套一个form表单,在JS代码中无法通过form设置的id直接获取form下的子标签input,但是却能通过tr设置的id获取到input标签,这是什么情况


                    <tr<!-- id="myform" -->>
                        <form action="#" method="post" id="myform">
                            <td>1</td>
                            <td><input type="text" name="userName" value="123213" disabled="disabled"></td>
                            <td><input type="text" name="userPwd" value="123213" disabled="disabled"></td>
                            <td><input type="text" name="sex" value="123213" disabled="disabled"></td>
                            <td><input type="text" name="telePhone" value="123213" disabled="disabled"></td>
                        </form>
                        <td><a href="#">删除</a></td>
                        <td><a href="#" onclick="get()">修改</a>&emsp;
                                                       <a href="#" onclick="ban()";document:myform.submit();return false;">保存</a>
                                                </td>
                    </tr>
function get()
  {
  var inputs = document.getElementById("myform").getElementsByTagName("input");
        for(var i = 0;i <inputs.length; i++){
            inputs[i].removeAttribute("disabled");
        }
}
function ban(){
    var inputs = document.getElementById("myform").getElementsByTagName("input");
    for(var i = 0;i < inputs.length; i++){
        inputs[i].setAttribute('disabled', 'disabled');
    }
}

因为form不能放在table下的tr上,即不能这样

<form action="#" method="post" id="myform"><tr></tr></form>


```,也不能放在tr下td上,即不能
```html
<tr><form action="#" method="post" id="myform"><td></td></form></tr>

,要么放在table外

<form action="#" method="post" id="myform"><table></table></form>

,要么放在

<td><form action="#" method="post" id="myform"></form></td>

,否则无法通过form读取到form下面的input,这是table的一个特殊性,如果你使用的是div,li这些实现的话,那就可以,维度table tr,td不能这样,因为table,tr,td是一个整体解析

<style>
 li,form{
     display:inline-block;
 }
 
 </style>
<div>
    <ul>
<form action="#" method="post" id="myform">
    <li>1</li>
    <li><input type="text" name="userName" value="123213" disabled="disabled"></li>
    <li><input type="text" name="userPwd" value="123213" disabled="disabled"></li>
    <li><input type="text" name="sex" value="123213" disabled="disabled"></li>
    <li><input type="text" name="telePhone" value="123213" disabled="disabled"></li>
     </form>
    <li><a href="#">删除</a></li>
    <li><a href="#" onclick="get()">修改</a>&emsp; <a href="#" onclick="ban();document:myform.submit();return false;">保存</a></li>
  </ul>

</div> 
function get()

  {

  var inputs = document.getElementById("myform").getElementsByTagName("input");
alert(inputs.length);
        for(var i = 0;i <inputs.length; i++){
            alert(inputs[i].value);
            inputs[i].removeAttribute("disabled");

        }

}

function ban(){

    var inputs = document.getElementById("myform").getElementsByTagName("input");

    for(var i = 0;i < inputs.length; i++){

        inputs[i].setAttribute('disabled', 'disabled');

    }

}

看,用div,ul li实现的就可以

img

img

建议把表单放在table外面,放在内部还会有显示等问题。

form标签不能放在表格的tr标签与td标签层级之间,否则浏览器解析时会发生异常。
应该把form标签放在整个表格外面,让form标签包裹整个表格。

使用console.log打印一下,可以引用一下jquery文件,一般来说id选择器和标签选择器都是可以的

你去浏览器f12打开控制台去检查dom结构,会发现你的form可能被移动到别的地方去了或者直接给你删除了,因为嵌套在tr和td这里面是不合规范的,既然被浏览器给整了,你用dom获取肯定就没办法获取啊,那么这是前端要学的一个小知识哦,如果对你有一点点小帮助的话希望能够给一个采纳啊