Question

我有一张包含图像和图像代码数据的表格，显示在下面的代码中：

<table id="tblForklift" cellpadding="5" cellspacing="0">
  <tbody>
    <tr id="image_info">
      <td id="1W 1111">
        <img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px"     height="210px"/>
        <p style="text-align: center;">1W 1111</p>
      </td>
      <td id="2W 2222"></td>
      <td id="3W 3333"></td>
   </tr>
   <tr id="image_info"></tr>
   <tr id="image_info"></tr>
   <tr id="image_info"></tr>
  </tbody>
</table>

我尝试使用此代码获取表格所选td的html。但它显示＆＃34; undefined＆＃34;。

$('#tblForklift').on('click', function(e) {
    var forkliftCode = $('this').closest('tr').find('td').html();
    alert(forkliftCode)
});

Answer 1

由于#tblForklift会与您的表格匹配。您需要在此表中定位td元素。此外，如果您的元素已动态添加到DOM，则可以使用 event delegation ：

$(document).on('click', '#tblForklift tr td', function(e) {
    var forkliftCode = $(this).html();
    alert(forkliftCode)
});

如果您的表格未动态添加，请

或更好：

$('#tblForklift').on('click', 'tr td', function(e) {
    var forkliftCode = $(this).html();
    alert(forkliftCode)
});

您的部分td也缺少结束</td>

Answer 2

将事件添加到td。所以在每个td点击你都可以获得HTML。

 $('#tblForklift td').on('click',function(e) {
       alert($( this ).html());
    });

demo

Answer 3

id必须是唯一的使用class，例如，

<强> HTML

<table id="tblForklift" cellpadding="5" cellspacing="0">
  <tbody>
    <tr class="image_info">
      <td class="1W 1111 forklift">
        <img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px"     height="210px"/>
        <p style="text-align: center;">1W 1111</p>
      </td>
      <td class="2W 2222"></td>
      <td class="3W 3333"></td>
   </tr>
   <tr class="image_info"></tr>
   <tr class="image_info"></tr>
   <tr class="image_info"></tr>
  </tbody>
</table>

<强> SCRIPT

$('.forklift').on('click', function(e) { // using class for multiple tds
    var forkliftCode = $(this).find('p').text();
    alert(forkliftCode);
});

此外，永远不要在id中留出空格，jquery selectors

中的空格含义不同

Live Demo

Answer 4

HTML：

      <td class="2W 2222">cvbcxbcvb</td>
      <td class="3W 3333">bcvbcvbnvnv</td>
   </tr>
   <tr class="image_info"></tr>
   <tr class="image_info"></tr>
   <tr class="image_info"></tr>
  </tbody>
</table>

jQuery的：

$('#tblForklift td').click(function() {
    alert($(this).html());
});

如何获得选定的td值

4 个答案: