1

一部のデバイスはまだjsを処理できないため、現在、js以外の機能をサイトに追加しています。一部の人々は、ページをより高速にロードするためにjsをオフにしています（接続が遅い、古いコンピューターのようにデバイスが遅いなど）。

だから、今私は問題を抱えています: 私は、それぞれが特定のプロファイルにリンクされるようにし<table>たいにリストされたプロファイルを持つページを持っています. <tr>たくさんのコードがあり、テキストだけがクリック可能になるため、リンクを<td>同じように配置する<tr><td><a>Name</a></td><td><a>Address</a></td></tr>ことは良い解決策ではありません。

また

<a><tr><td>Text</td></tr></a>

動作しません。

これを実現するためのJavascriptなしのソリューションはありますか?

前もってありがとうネイメクリフ

4

3 に答える 3

1

それは不可能だと思います。要素のコンテンツをtdリンクにすることができ、HTML5 の規則 (およびブラウザーの慣行) によって、テーブル全体をリンクにすることができます。ただし、中間レベルのテーブル行要素trは、HTML のリンクに変換できません。

td行のセルが同じ宛先を指すように、それぞれのコンテンツをリンクにすると、ある意味では機能しますが、使い勝手は良くありません。行のセルが実際には1 つのリンクであることを示すものは何も表示されないため、ユーザーには何が起こっているのかわかりません。その上、それらは別々のリンクであるため、タブ移動が厄介になります。

テーブルの内容と性質に応じて、おそらく 1 つの列をある意味で「プライマリ」として選択し (キャプションやタイトルなど、行ヘッダーと見なされる可能性のあるデータを使用して)、` ... を使用できます。その列のセルのみ。

于 2012-07-12T10:25:50.263 に答える
0

HTMLアンカーを作成する必要があるように聞こえますか？

<a href="#BLA">BBBB</a>

<a name="BLA"></a>

ここの内容。

于 2012-07-12T10:08:10.310 に答える
0

これは、JavaScript を使用しなくても、リンクを何十回、何百回、何千回も不必要に複製することなく実行できます。サポートしているブラウザ、具体的にはサポートしている CSS に少し依存しますが、最近のほとんどのブラウザのように position:absolute と td:first-child を処理できる場合、同様の問題について私が思いついたのは次のとおりです。

最初の列にリンクを配置します。

<table class="search_results">
    <tr>
        <td><a href="#">Some text</a></td>
        <td>more text</td>
        <td>more text</td>
    </tr>
</table>

これは完全に問題のないマークアップであるため、唯一の問題は、そのリンクをテーブルの幅に広げることです。かなり標準的なCSSを使用して、このようにしました：

table.search_results a {position:absolute;display:block;width:98%;}

幅を好きなように変更すると、原則として作業は完了です。それはすべて比較的簡単ですが、私のように流動的/レスポンシブなレイアウトがあり、リンクに標準的なスタイルを設定し、テーブルにパディングを追加する場合は、これらのルールが必要になります (必要に応じて上からコピーして追加します)。追加）。

table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

説明: 最初のルールは、最初の td のみのすべてのパディングを削除します。デフォルトでは、td のパディングは .5em です。2 番目のルールは、同じパディングをリンクに追加します。そうしないと、セルの内容がずれてしまいます。また、すべての列が同じように見えるように、a にあるいくつかの標準スタイルを修正します。これを逆に行うこともできます (リンク スタイルを td に追加します)。最後の 2 つのルールを使用して、リンクのデフォルトのホバー効果を取り除き、適切なクラスのテーブルの tr に配置します。

これは私が関心のあるブラウザで動作しますが、もちろん関心のあるブラウザでテストする必要があります:) この記事で誰かが数分節約できることを願っています!

于 2013-12-06T16:17:22.157 に答える