Question

我想在表单中嵌套表单。但当然这是非法的代码因此，我想定位这个div
＆lt; div id =“div_2”＆gt;

（我在文档末尾编码）到这个表格单元格中：

＆lt; td id =“place_here”＆gt;

这甚至可能吗？
我会在CSS中使用相对或绝对位置让自己疯狂，试图让我的div在每个浏览器中完美地定位
这就是为什么我在id中给了那个表格单元格我希望css或jquery能帮我定位相对于表格单元格id =“place_here”而不是文档顶部的div

<form id="CTRP_Form">
<table>
<tr>
<td>
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type=text></div>
</td>
<td id="place_here">
<!-- place div id=2 here -->
</td>
</tr>
</table>
</form>


<div id="div_2"><form id="query_Form"><input type=submit></form></div>

Answer 1

您可以通过指定margin-top属性并使用负值

来实现

<div id="div_2" style="margin-top:-160px"></div>

希望这适合你。

OR

<table>
<tr>
<td>
<div id="div_1">
<form id="CTRP_Form">
<input id="fnam" name="fnam" form="CTRP_Form" type=text>
</form>
</div>
</td>
<td>
<div id="div_2"><form id="query_Form"><input type=submit></form></div>
</td>
</tr>
</table>

OR

出于某种原因，如果您的第一个表单太大而且其内容在填写时会发生变化（例如，某些输入可能会在选择某些选项时隐藏）。

这是你能做的。您可以在

中放置一个小的空div

然后你的div 2将在你的第一张表格之后。

然后使用此javascript将div_2定位为相对于父div。

function position_mdiv(){

    var pos=$('#parent').position();
    var width=$('#parent').outerWidth();

    $('#div_2').css({
       position: "absolute",
       top: pos.top + "px",
       left: (pos.left + width) + "px"
    });

}

然后把它放在jquery的document.ready中，这样当页面加载/窗口调整大小时，它会相应地调整它的位置。

$(document).ready(function () {
    position_mdiv()();
    $(window).resize(function() {
        position_mdiv();
    });
});

希望这能解决你的问题。

这是代码

<html>
<head>
<title>Nested Forms</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<form>
<table border="3" width="500" height="400" align="center" style="margin-top:40px">
<tr> 
<td style="background:green">Form1
<input type="text" placeholder="name"/><input type="submit" value="Submit"/>
</td>

</tr>

<tr>
<td style="background:red" valign="top"><div id="co">form2 place</div></td>
</tr>

</table>
</form>

<div id="tobepositioned" style="background:yellow;
width:400px;padding:10px;border:solid   2px #CCC">
Form2
<form name="form2">
<input type="text" name="s"/><input type="submit"/>
</form>
</div>

<script language="javascript">
$(document).ready(function () {
position_mdiv();

// running this function on resize too
$(window).resize(function() {
    position_mdiv();
});

});


// function to position the div2

function position_mdiv(){

var pos=$('#co').position();
var width=$('#co').outerWidth();
//alert(pos.left);
$('#tobepositioned').css({
position: "absolute",
top: pos.top + "px",
left: (pos.left) + "px"
});

}


</script>
tested in IE10, Firefox, Chrome
</body>
</html>

Answer 2

这是确定的工作答案。我不需要创建额外的父DIV并将其命名为id =“place_here”。命名表格单元格id =“place_here”并将其设为DIV id =“div_2”的父级就足够了。这是一个很棒的小工作。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>test / crtp</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    position_mdiv()();
    $(window).resize(function() {
        position_mdiv();
    });
})

function position_mdiv(){

    var pos = $('#place_here').position();
    var width = $('#place_here').outerWidth();

    $('#div_2').css({
    position: "absolute",
    top: pos.top +2 + "px",
    left: (pos.left -300 + width) + "px"
});

}

</script>
<body>

<form id="CTRP_Form">
<table border="1">
<tr>
<td>
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div>
</td>
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td>
</tr>
</table>
</form>


<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div>

</body>
</html>

定位div | nest <form> s </form>

2 个答案: