1

PHP連想配列からの単語とそのカウントのhtmlテーブルを表示する次のコードがあります。テーブルには、最大 10 列 x 10 行 (可変) を含めることができます。

| col1  | col2 | col3  | col4 |
|-------|------|-------|------|
| word1 |  50  | word4 |  25  |
| word2 |  44  | word5 |  21  |
| word3 |  39  | word6 |  16  |, etc.

<td>CSSはホバー時に個々のセルを強調表示し、下線を引きます。ただし、ホバー/ハイライト/アンダースコア<td>は、数字ではなく、単語を含むセルでのみ機能する必要があります。単語は常に奇数列に配置され、数字は常に偶数列に配置されます。

それを行うコードを提案できますか？ホバーに関連するブラウザーの問題のため、jQuery でこれを行う必要があるかもしれないことを読みました。これが私がこれまでに持っているものです。前もって感謝します。:)

?>
<table id="word-table">
<?echo "<th>Word Counts</th>";?>
  <tbody>
    <?
      foreach ($rows as $cols) {
        echo '<tr><td>' . implode('</td><td class="nth-child(2n-1)">', $cols) . '</td></tr>';
      }
    ?>
  </tbody>
</table>
<?

#word-table td:nth-child(2n-1) {
    background: #CCFFCC;
}

#word-table td:nth-child(2n) {
    display: block;
    background: #CCE0FF;
    margin-right: 7px;
    text-align: center;
}

#word-table tbody td:hover 
{
    cursor: hand;
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    background: #FFFFCC;
}
4

2 に答える 2

4

これには jQuery は必要ありません。CSS を使用できます。

td:nth-child(odd):hover{
  ...
}

ほとんどのブラウザーで確実に動作します: http://caniuse.com/css-sel3
デモ: http://jsfiddle.net/PV6jV/

また、クラスとして追加していることに気付きnth-child(2n-1)ました -:nth-childは疑似クラスであるため、実際に追加する必要はありません。

于 2013-04-16T01:22:30.843 に答える
1

明示的な方がよい

<? foreach ($rows as $cols): ?>
  <tr>
       <td> <?php echo $cols[0]; ?></td>
       <td class="highlight"> <?php echo $cols[1]; ?></td>
       <td> <?php echo $cols[0]; ?></td>
       <td class="highlight"> <?php echo $cols[3]; ?></td>
   </tr>
<?php endforeach; ?>
于 2013-04-16T01:25:19.950 に答える