javascript - 获取上一个 td 中的文本

Question

我有一个按钮，单击该按钮会动态构建一个简单的表格。在第二个 td 中，插入了一个按钮和一些文本。

<input type = "button" id = "search" value = "Search">
<div id = "searcharea"></div>   

$('#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 = "Get Text"></td></tr></table>');
});

我想做的是当单击“获取文本”按钮时从上一个td获取文本。这是我尝试过的:

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

我认为答案很简单，但我没有看到。帮助。 JSFIDDLE

Answer 1

我相信您打算使用 jQuery 的 prev()方法。

此外，由于表是动态生成的，因此在执行 JavaScript 时它可能不存在于 DOM 中。您可以delegate your click event通过将其绑定(bind)到不同的(父级和静态)元素而不是动态表。

下面，我已将事件绑定(bind)到 document 本身，但您可以使用更具体的元素(如果存在)。

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

测试如下:

$('#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);
});

#myTable {
  border-collapse: collapse;
  font-size: 0.917em;
  width: 400px;
  min-width: 200px;
  margin-top: 10px;
}
#myTable td {
  border: 1px solid #333;
  padding: 6px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="search" value="Search">
<div id="searcharea"></div>