如何从特定行获取数据？

Question

I have a small 3x4 table as shown in this JSFiddle. 我有一个小的3x4表，如这个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) . 但是它在任何浏览器中都不起作用（在Chrome 31.0.1650.63 m，IE 10和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. “jQuery的1.9.1.js”其实是这个存在于同一文件夹中的PHP文件中。 Any clue why it isn't working outside JSFiddle? 任何线索为什么它不在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)) ? 此外，如果我使用while($row = oci_fetch_array($result, OCI_ASSOC+OCI_RETURN_LOBS))从Oracle数据库中获取数据，它会工作吗？

<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代码

<?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>

Answer 1

Your code does not work because the DOM is not built up yet at the time your code runs. 您的代码不起作用，因为在代码运行时尚未构建DOM。

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 : 你应该把你的script标签放在关闭的body标签之前（这是一个好的做法）或者只在DOM准备就绪时运行你的代码：

$(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. 此外，你包括jQuery的方式是错误的。 A script tag with an src should not have content. 带有src script标记不应包含内容。 So you need two script tags: 所以你需要两个script标签：

<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，这非常重要！

<!DOCTYPE html>
<html>
...

如何从特定行获取数据？

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-12-18 13:07:55

如何从特定行获取数据？

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-12-18 13:07:55

解决方案1
2 已采纳 2013-12-18 13:07:55