Question

我正在为表格中的每个td标记加载一些卡片详细信息。当我点击特定的td数据时，操作无效。我已经为onclick标记的td事件编写了jQuery函数，但它不起作用。

表：

<table class="metricTable" border="2" bordercolor="white" style="background-color:#066B12;">
  <tr>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="matches" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="runs" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="centuries" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
  </tr>
  <tr>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="fifties" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="batting_average" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="wickets" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
  </tr>
  <tr>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="bowling_average" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
    <input type="hidden" value="best_bowling" />
    <input type="hidden" value="" /> 
    <input class="card_value" type="hidden" value="" />
    <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
    <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div></td>
    <td class="metrics" onmouseover="this.bgColor=&#39;#4DBD33&#39;;">
      <input type="hidden" value="catches" />
      <input class="card_value" type="hidden" value="" />
      <div class="card_content1" align="center" style="color:#FFFFFF;font-size:150%;font-weight: bold;"></div>
      <div class="card_content" align="center" style="color:#FFFFFF;font-weight: bold;"></div>
    </td>
      </tr>
    </table>

onclick上td的jQuery函数：

$('.metricTable td').click(function(){
    alert("hi");
    //some code
});

当我点击td时，简单警报也没有到来。

任何人都可以提供点击td数据的代码以及如何检索特定的td数据。？

请回复。

Answer 1

请试试这个

  $( document ).ready(function() {

     $('.metricTable tr > td').click(function(){
                       alert($(this).html());
                                  //some code
                    });
});

在这里演示：http://jsfiddle.net/MCeJ9/2/

Answer 2

如果您要查找的值位于输入标记中，请尝试此操作：

$('.metricTable td').click(function(){
    var input1 = $(this).find('input').eq(0).val();
    var input2 = $(this).find('.card_value').val();
    alert(input1+" and "+input2);
});

表示div标签中的值

$('.metricTable td').click(function(){
    var input1 = $(this).find('.card_content1').text();
    var input2 = $(this).find('.card_content').text();
    alert(input1+" and "+input2);
});

Answer 3

如果动态生成单元格，则需要使用.on()函数：

$('.metricTable').on('click', 'td', function(){
    alert("hi");
    //some code
});

要获取单元格的内容，请使用.text()或.html()函数：

$('.metricTable').on('click', 'td', function(){
    alert( $(this).text() );
});

Answer 4

希望我们能看到你的标记...我们可以判断整个表是否是动态生成的！它是和标记看起来像下面这样：

<table class="metricTable"> . .. . .. . . . .</table>

然后尝试委托方法：

$(function() {
    $(document).on( 'click', '.metricTable td', function() {
        alert( $(this).html() );
    });
});

将数据放入表中时：

$(this).find('.selector').val( card[0][4] );

同时源数据0,4可以存储在同一元素中：

$(this).find('.selector').data('source','0,4');

这些可以分别检索如下：

   theValue = $(this).find('.selector').val();
   theSource = $(this).find('.selector').data('source');

在表中如何在点击时获取表TD标签数据？

4 个答案: