0

我想在表单中嵌套表单。但这当然是非法代码。
因此，我想将此 div

<div id="div_2">

（我已在文档末尾编码）定位到此表格单元格中：

<td id="place_here">

这甚至可能吗？
我会在 CSS 中使用相对或绝对位置让自己发疯，试图让我的 div 在每个浏览器中完美定位。

这就是为什么我在 id 中给出了那个表格单元格。
我希望 css 或 jquery 能帮助我定位 div 相对于表格单元格 id="place_here" 而不是文档顶部

<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>
4

2 回答 2

0

您可以通过指定 margin-top 属性并使用负值来做到这一点

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

希望这对你有用。

或者

<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>

或者

For some reason if your first form is too large and its content changes while filling it out(eg. some inputs might get hide when certain options are selected).

这是你可以做的。您可以在其中放置一个小的空 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>
于 2013-03-09T09:45:42.460 回答
0

这是最终的工作答案。我不需要创建额外的父 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>
于 2013-03-10T17:02:06.243 回答