duangouhui0446 2013-12-18 13:03
浏览 53
已采纳

如何从特定行获取数据？

I have a small 3x4 table as shown in this JSFiddle.

Clicking the image gives an alert which basically has the entire row data of the image which was clicked.

However it doesn't work in any browser (in Chrome 31.0.1650.63 m, IE 10 and Firefox 25.0.1) . My code is shown below. "jquery-1.9.1.js" is actually this present in the same folder as that of the php file. Any clue why it isn't working outside JSFiddle? Also, will it work if I fetch the data from an Oracle database using while($row = oci_fetch_array($result, OCI_ASSOC+OCI_RETURN_LOBS))?

<html>
<head>
    <script src="jquery-1.9.1.js">
        $("img.print").click(function (event) {
            //Prevent the hyperlink to perform default behavior
            event.preventDefault();
            var $td = $(this).parent().closest('tr').children('td');
            var string1 = $td.eq(0).text();
            var string2 = $td.eq(1).text();
            var string3 = $td.eq(2).text();
            alert(string1+' '+string2+' '+string3);
        });
    </script>
</head>
<body>

PHP Code

<?php
echo '
<table border="1">
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td><img src="https://www.gravatar.com/avatar/12e4484b5ae3e5f676efb7c18cbac643?s=24&d=identicon&r=PG" class="print"></img></td>
    </tr>
    <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td><img src="https://www.gravatar.com/avatar/12e4484b5ae3e5f676efb7c18cbac643?s=24&d=identicon&r=PG" class="print"></img></td>
    </tr>    
    <tr>    
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td><img src="https://www.gravatar.com/avatar/12e4484b5ae3e5f676efb7c18cbac643?s=24&d=identicon&r=PG" class="print"></img></td>
    </tr>
</table>
';
?>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • dongqie5529 2013-12-18 13:07
    关注

    Your code does not work because the DOM is not built up yet at the time your code runs.

    You should either put your script tags before the closing body tag (which is a good practice anyway) or only run your code when the DOM is ready:

    $(document).ready(function() {

   $("img.print").click(function (event) {
        //Prevent the hyperlink to perform default behavior
        event.preventDefault();
        var $td = $(this).parent().closest('tr').children('td');
        var string1 = $td.eq(0).text();
        var string2 = $td.eq(1).text();
        var string3 = $td.eq(2).text();
        alert(string1+' '+string2+' '+string3);
    });

});

    Also, the way you are including jQuery is wrong. A script tag with an src should not have content. So you need two script tags:

    <script src="jquery-1.9.1.js"></script>  
<script>
    $("img.print").click(function (event) {
        //...
    });
</script>

    One more note: never forget to specify the DOCTYPE, it's very important!

    <!DOCTYPE html>
<html>
...
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动，linux应用，多线程