Javascript 从上一个td获取文本

我有一个按钮，当点击时，它会动态地构建一个简单的表。在第二个

td

中，将插入一个按钮和一些文本

$（'search'）。在（'click'，function（）上{
$（“#searcharea”）.html（'sometextblah Blah
Blah Blah
'）；
});

我试图做的是在单击“获取文本”按钮时从前面的

td

获取文本。以下是我尝试过的：

$('#myTable').on('click', 'input', function (event) {
    var prevCell = $(this).closest('td').previous('td').text();
    alert(preCell);
 });

---

我认为答案很简单，但我看不出来。救命啊

这里有两件事在起作用：你在点击时绑定（

）的那一刻，以及你获取文本的方式。由于您在绑定单击
#search
的同时尝试绑定，因此表中不存在任何按钮，因此无法绑定。未来的按钮必须在创建后绑定，因此您需要在
html（）
插入后进行绑定

以下工作：

$('#search').on('click', function() {
    $('#searcharea').html('<table id="myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type="button" value="Play"></td></tr></table>');
    // You need to tie your click to the input here, as the input didn't exist before.
    $('#myTable input').on('click', function (event) {
        // You need to look for the parents, then use the prev() function, not previous().
        var prevCell = $(this).parents('td').prev().text();
        alert(prevCell);
    });
});

这里有两件事在起作用：绑定的那一刻（
点击）和获取文本的方式。由于您在绑定单击
#search
的同时尝试绑定，因此表中不存在任何按钮，因此无法绑定。未来的按钮必须在创建后绑定，因此您需要在
html（）
插入后进行绑定

以下工作：

$('#search').on('click', function() {
    $('#searcharea').html('<table id="myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type="button" value="Play"></td></tr></table>');
    // You need to tie your click to the input here, as the input didn't exist before.
    $('#myTable input').on('click', function (event) {
        // You need to look for the parents, then use the prev() function, not previous().
        var prevCell = $(this).parents('td').prev().text();
        alert(prevCell);
    });
});

您应该将处理程序委托给一个静态元素（一个未生成的元素，与
#myTable
不同），以便该方法能够处理其中动态生成的内容。此外，请使用以下选项代替以前的选项：

$('#searcharea').on('click', ':button', function (event) {
  var prevCell = $(this).closest('td').prev('td').text();
  alert(preCell);
});

您应该将处理程序委托给一个静态元素（一个未生成的元素，与
#myTable
不同），以便该方法能够处理其中动态生成的内容。此外，请使用以下选项代替以前的选项：

$('#searcharea').on('click', ':button', function (event) {
  var prevCell = $(this).closest('td').prev('td').text();
  alert(preCell);
});

我相信您打算使用jQuery的方法

此外，由于表是动态生成的，因此在执行JavaScript时，它可能不存在于DOM中。您可以通过将其绑定到不同的（父级和静态）元素而不是动态表来实现

下面，我将事件绑定到
文档本身，但是如果存在更具体的元素，您可以使用它

$（文档）。在（'click'，'myTable input'，函数（事件）{
var prevCell=$（this）.closest（'td'）.prev（'td'）.text（）；
警报（prevCell）；
}

测试如下：


$（'search'）。在（'click'，function（）上{
$（“#searcharea”）.html（'sometextblah Blah
Blah Blah
'）；
});
$（文档）.on（'单击'，'我的表格输入'）函数（事件）{
var prevCell=$（this）.closest（'td'）.prev（'td'）.text（）；
警报（prevCell）；
})；
#myTable{
边界塌陷：塌陷；
字体大小：0.917em；
宽度：400px；
最小宽度：200px；
边缘顶部：10px；
}
#myTable td{
边框：1px实心#333；
填充：6px；
垂直对齐：中间对齐；
}
我相信您打算使用jQuery的方法

此外，由于您的表是动态生成的，因此在执行JavaScript时，它可能不存在于DOM中。您可以通过将其绑定到不同的（父级和静态）元素而不是动态表来实现

下面，我将事件绑定到
文档本身，但是如果存在更具体的元素，您可以使用它

$（文档）。在（'click'，'myTable input'，函数（事件）{
var prevCell=$（this）.closest（'td'）.prev（'td'）.text（）；
警报（prevCell）；
}

测试如下：


$（'search'）。在（'click'，function（）上{
$（“#searcharea”）.html（'sometextblah Blah
Blah Blah
'）；
});
$（文档）.on（'单击'，'我的表格输入'）函数（事件）{
var prevCell=$（this）.closest（'td'）.prev（'td'）.text（）；
警报（prevCell）；
})；
#myTable{
边界塌陷：塌陷；
字体大小：0.917em；
宽度：400px；
最小宽度：200px；
边缘顶部：10px；
}
#myTable td{
边框：1px实心#333；
填充：6px；
垂直对齐：中间对齐；
}
在这种情况下，当您尝试将单击事件绑定到表时，该表不存在。因此，我们首先修复该问题。然后将previous（）更改为prev（），使其正常工作

$('#search').on('click', function() {
    $('#searcharea').html('<table id = "myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type = "button" value = "Play"></td></tr></table>');
});

$(document).on('click', '#myTable input', function (event) {
    var prevCell = $(this).closest('td').prev('td').text();
    alert(prevCell);
});

$（'search'）。在（'click'，function（）上{
$（“#searcharea”）.html（'sometextblah Blah
Blah Blah
'）；
});
$（文档）.on（'单击'，'我的表格输入'）函数（事件）{
var prevCell=$（this）.closest（'td'）.prev（'td'）.text（）；
警报（prevCell）；
});
在这种情况下，当您尝试将单击事件绑定到表时，该表不存在。因此，我们首先修复该问题。然后将previous（）更改为prev（），使其正常工作

$('#search').on('click', function() {
    $('#searcharea').html('<table id = "myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type = "button" value = "Play"></td></tr></table>');
});

$(document).on('click', '#myTable input', function (event) {
    var prevCell = $(this).closest('td').prev('td').text();
    alert(prevCell);
});

$（'search'）。在（'click'，function（）上{
$（“#searcharea”）.html（'sometextblah Blah
Blah Blah
'）；
});
$（文档）.on（'单击'，'我的表格输入'）函数（事件）{
var prevCell=$（this）.closest（'td'）.prev（'td'）.text（）；
警报（prevCell）；
});
差不多10分钟前发布了相同的答案。您的答案提供了什么附加值..？因为现在事件绑定到文档而不是特定元素@somethinghere。如果在此之后添加另一个具有表id的元素，它也会由此单击事件触发。这与事件de相同legation在你的例子中，只是有一个不同的目标。@TJ我只是在拨弄小提琴并点击post后键入的。我没有看到所有其他的答案。放松。是的，现在它被绑定到文档中。这不是…的复制粘贴吗？当然不是。我们只是有非常相似的答案。这不像是火箭手术，这里有一个漂亮的clear解决方案。差不多10分钟前发布了相同的答案。您的答案提供了什么附加值…？因为现在事件绑定到文档而不是特定元素@somethinghere。如果在此之后添加另一个具有表id的元素，它也会被此单击事件触发。它与e相同在您的示例中，仅使用dif