0

フォーム内にフォームを入れ子にしたい。しかしもちろん、それは違法なコードです。
このため、この div

<div id="div_2">

(ドキュメントの最後にコード化したもの) をこのテーブル セルに配置したいと思います:

<td id="place_here">

これも可能ですか?
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>
4

2 に答える 2

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 に答える
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>

また

なんらかの理由で、最初のフォームが大きすぎて、入力中に内容が変更された場合 (たとえば、特定のオプションを選択すると一部の入力が非表示になる場合があります)。

これがあなたができることです。小さな空の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 に答える