Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
■質問の趣旨
phpの中で、mysqlを使って表を作成しました。
さらに、表の行毎にリンク（行の１行全体にクリック可能）を
設定したいのですが、下記の方法でつまずいています。
なにかよい方法を教えてください。
■phpを使って、mysqlから表を作成（ここまでは成功）
<?php $dsn = 'mysql:dbname=〇〇;host=〇〇'; $user = '〇〇'; $password = '〇〇'; try{ $dbh = new PDO( $dsn, $user, $password ); }catch( PDOException $error ){ echo "接続失敗:".$error->getMessage(); die(); } $sql = 'select shopid,shop_name from shop_table '; $stmt = $dbh->query( $sql ); echo "<table>\n"; echo "\t<tr><th>shopid</th><th>shop_name</th></tr>\n"; while( $result = $stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "\t<tr>\n"; echo "\t\t<td>{$result['shopid']}</td>\n"; echo "\t\t<td>{$result['shop_name']}</td>\n"; echo "\t</tr>\n"; } echo "</table>\n"; ?>■さらに、表の行毎にリンク（行の１行全体にクリック可能）
にする為に、phpの中でjQueryを使って行全体がリンクになるように
トライしたが、うまくいかず
ご指摘、ありがとうございます。素人なので、全体文でのご質問になってしましました。コードブロックで囲むこともはじめて知りました。とりあえず、解決いたしましたので、今後コードブロックについては勉強していきます。
ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。
回答2件
0
ベストアンサー
原因はわからないですが気になった点。
jqueryは読み込んでますか？
echoがいっぱいで読みづらい。
trをscriptで囲ってるのはなぜでしょうか？
まず整えたものを記載します。
php
1<?php 2$dsn = 'mysql:dbname=〇〇;host=〇〇'; 3$user = '〇〇'; 4$password = '〇〇'; 5 6try{ 7$dbh = new PDO( $dsn, $user, $password ); 8}catch( PDOException $error ){ 9echo "接続失敗:".$error->getMessage(); 10die(); 11} 12 13$sql = 'select shopid,shop_name from shop_table '; 14$stmt = $dbh->query( $sql ); 15$result = $stmt->fetch( PDO::FETCH_ASSOC ); 16?> 17<html> 18<head> 19<title>サンプル</title> 20<script 21 src="https://code.jquery.com/jquery-2.2.4.min.js" 22 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 23 crossorigin="anonymous"></script> 24</head> 25<body> 26<script type="text/javascript"> 27jQuery( function($) { 28$('tbody tr[data-href]').addClass('clickable').click( function() { 29window.location = $(this).attr('data-href'); 30}).find('a').hover( function() { 31$(this).parents('tr').unbind('click'); 32}, function() { 33$(this).parents('tr').click( function() { 34window.location = $(this).attr('data-href'); 35}); 36}); 37}); 38</script> 39<table> 40<tbody> 41<tr><th>shopid</th><th>shop_name</th></tr> 42 43<?php foreach ($result as $v):?> 44<tr data-href="http://〇〇リンク先〇〇"> 45<td><?= $value['shopid']; ?></td> 46<td><?= $value['shop_name']; ?></td> 47</tr> 48<?php endforeach; ?> 49</tbody> 50</table> 51</body> 52</html> 53
投稿2017/05/26 09:57
編集2017/05/26 09:59
総合スコア137
ありがとうございました。大変助かりました。
下記のコードで成功しました。
■成功したコード
行全体のリンクもできました。また、行の項目に適切な値が入っています。
<?php
$dsn = 'mysql:dbname=〇〇;host=〇〇';
$user = '〇〇';
$password = '〇〇';
try{
$dbh = new PDO( $dsn, $user, $password );
}catch( PDOException $error ){
echo "接続失敗:".$error->getMessage();
die();
}
$sql = 'select shopid,shop_name from shop_table ';
$stmt = $dbh->query( $sql );
?>
<html>
<head>
<title>サンプル</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
}).find('a').hover( function() {
$(this).parents('tr').unbind('click');
}, function() {
$(this).parents('tr').click( function() {
window.location = $(this).attr('data-href');
});
});
});
</script>
<table>
<tbody>
<tr><th>shopid</th><th>shop_name</th></tr>
<?php foreach ($stmt as $v):?>
<tr data-href="http://〇〇リンク先〇〇">
<td><?= $v['shopid']; ?></td>
<td><?= $v['shop_name']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>
■失敗したコード：
行全体のリンクは成功しましたが、fetch( PDO::FETCH_ASSOC )を使用すると、
行の項目のところに、うまく値が入りません。未だに疑問です。
<?php
$dsn = 'mysql:dbname=〇〇;host=〇〇';
$user = '〇〇';
$password = '〇〇';
try{
$dbh = new PDO( $dsn, $user, $password );
}catch( PDOException $error ){
echo "接続失敗:".$error->getMessage();
die();
}
$sql = 'select shopid,shop_name from shop_table ';
$stmt = $dbh->query( $sql );
$result = $stmt->fetch( PDO::FETCH_ASSOC );
?>
<html>
<head>
<title>サンプル</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
}).find('a').hover( function() {
$(this).parents('tr').unbind('click');
}, function() {
$(this).parents('tr').click( function() {
window.location = $(this).attr('data-href');
});
});
});
</script>
<table>
<tbody>
<tr><th>shopid</th><th>shop_name</th></tr>
<?php foreach ($result as $v):?>
<tr data-href="http://〇〇リンク先〇〇">
<td><?= $v['shopid']; ?></td>
<td><?= $v['shop_name']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>
?>
</body>
</html>
あなたの回答
tips
プレビュー
