使用 .offset() 相对于动态表数据设置表单位置

Question

我想在元素的单击事件时将表单定位在动态的相同坐标处，但是该表单未定位在所需的坐标处。我可以在静态元素上触发事件时定位表单，但不能在动态表格元素上定位，这让我认为我的问题与动态表格有关。

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 建表 $('#table2').append('' + 主题 + '\ ' + 后时间戳 +'\ ' + post_txt + '\ ' + postuser + '' + 品种 + ' \ +1-1\ ' + 投票 + '');

现在我认为问题不在于桌子，因为我能够定位

元素位于 '#drop' 和 '#add' 上的单击事件的相同坐标处。

Answer 1

这里的概念可能对你有用。

对于 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 中。然后可以动态创建表并将其插入包装器中，而不会破坏操作绑定。