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建表 $('#table2').append(''+topic+'\'+posttimestamp+'\'+post_txt+'\'+postuser+''+breed+'\+1-1\' + 票 + '');

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

元素位于“#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 回答