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 求TYPCE母转母转接头24PIN线路板图
  • ¥100 国外网络搭建，有偿交流
  • ¥15 高价求中通快递查询接口
  • ¥15 解决一个加好友限制问题 或者有好的方案
  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型