Result
テーブル上のマウスの位置を表示する
jQuery
$("table tr td").mouseenter(function () { //ポインタ追加 $(this).css("cursor", "pointer"); //ユーザーへの表記は+1する var col = $(this).closest("tr td").prevAll("tr td").length += 1; var row = $(this).closest("tr").prevAll("tr").length; //テーブル上のマウスの位置を取得して現在地を表示する $('#result').html("上から<b>" + row + "</b>番目、左から<b>" + col + "</b>番目にいます");}); |
css
table { border: 1px solid #DFDFDF; background-color: #F9F9F9; width: 100%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif; color: #333;}table td, table th { border-top-color: white; border-bottom: 1px solid #DFDFDF; color: #555;}table th { font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif; font-weight: normal; padding: 7px 7px 8px; text-align: left; line-height: 1.3em; font-size: 14px;}table td { font-size: 12px; padding: 4px 7px 2px; vertical-align: top;}span{ display:inline-block; margin:10px 0 0 10px; padding:10px; font-size: 12px; font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif; color:#333;}b{color:blue;font-size:22px;} |
html
<table> <tr> <th>順番</th> <th>メニュー</th> <th>説明</th> <th>金額</th> </tr> <tr> <td>1</td> <td>うどん</td> <td>粉を練って作る麺</td> <td>290円</td> </tr> ・ ・ ・</table> |
via
転送中
jquerybyexample.blogspot.com
