How to fetch data from a specific row?
Question
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 answers
solution1
2 ACCPTED 2013-12-18 13:07:55
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>
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.