2

要素のクリック イベントでダイナミックの同じ座標にフォームを配置したいのですが、フォームが目的の座標に配置されません。静的要素でイベントをトリガーするときにフォームを配置できますが、動的テーブル要素ではできません。これにより、問題が動的テーブルに関係していると思われます。

CSS

.form {
   width:600px;
   background-color:rgb(102,153,153);
}

JS

$('#table2').on("click", ".topic", function (event) {

    var getid = event.target.id;
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    console.log(mouseX + " " + mouseY); //shows coordinates

    $('div.form').show();
    $('div.form').offset({
        left: mouseX,
        top: mouseY
    });
    $('div.form').attr('style', 'position:absolute');
})

HTML

テーブルを構築する JS + 票 + '');

今は、テーブルを配置できるので、問題はテーブルではないと思います。

'#drop' と '#add' のクリック イベントの同じ座標にある要素。

4

1 に答える 1

0

ここにあなたのために働くかもしれない概念があります。

HTMLの場合、テーブルとフォームを共通のブロック コンテナーにラップすることから始めます。これは絶対に必要というわけではありませんが、概念を説明する簡単な方法です。

<div class="table-wrap">
<table id="table2">
    <tr>
        <td>a <b class="topic">topic</b> is here</td>
        <td class="topic">a topic cell</td>
    </tr>
    <tr>
        <td class="topic">a topic cell</td>
        <td>more content</td>
    </tr>
    <tr>
        <td>some content</td>
        <td class="topic">a topic cell</td>
    </tr>
</table>
<div class="form">
    <p>This is your Form.</p>
</div>
</div>

CSSの場合:

.form {
    width: 150px;
    height: 100px;
    padding: 20px;
    background-color:rgb(102, 153, 153);
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.table-wrap {
    border: 2px solid blue;
    position: relative;
}
#table2 {
    border: 1px dotted blue;
}
#table2 td {
    padding: 20px;
    background-color: lightgray;
}
#table2 .topic {
    background-color: pink;
    cursor: pointer;
}

テーブルはいくつかのテーブル セルで構成されており、そのうちのいくつかはクラスを持ってい.topicます。.topic最初のセル内に、クラスを持つインライン要素があることに注意してください。

.table-wrapコンテナは相対的に配置され、コンテナは絶対.form的に配置されます。.formとの両方が#table2同じ親ブロックに対して配置されているため、それらのオフセットは同じ原点から測定されます。

jQueryは次のとおりです。

$('.table-wrap').on("click", ".topic", function (event) {
    var getid = event.target.id;
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    console.log(mouseX + " " + mouseY); //shows coordinates

    $('div.form').show();
    $('div.form').offset({
        left: mouseX,
        top: mouseY
    });
})

基本的に、上/左のオフセットを設定して、フォームを表示します。あなたの JavaScript は正しかったのですが、CSS の配置に助けが必要でした。

デモ フィドル: http://jsfiddle.net/audetwebdesign/5XCQR/

PS: 動的テーブルについて

フォーム要素を明示的に作成しましたが、jQuery の DOM 操作関数を使用して作成できます。

コツは、jQuery アクションを、DOM にネイティブな要素 (JavaScript を使用して動的に作成されたものではない) にバインドすることです。.table-wrapこの場合、元の DOM に存在するはずの にアクチンをバインドすることにしました。次に、テーブルを動的に作成し、アクション バインディングを壊すことなくラッパーに挿入できます。

于 2013-06-18T18:13:33.750 に答える