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'）。追加（''+主题+'\ '+ posttimestamp +'\ '+ post_txt +'\ '+ postuser +''+品种+'\ + 1-1 \ '+ votes +''）;

现在我认为问题不在于表格，因为我能够在'＃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中。然后可以动态创建表并将其插入包装器中，而不会破坏操作绑定。

使用相对于动态表数据的.offset（）设置表单位置

1 个答案: