web-dev-qa-db-ja.com

テーブル行<tr>にハイパーリンクを追加する方法

複数の行を形成するために、ループ内でテーブル行<tr>を生成するテーブルがあります。

各<a>に個別の<tr>リンクを付与したい。テーブルでは<td>にのみデータを追加できるため、それを実現することはできません。

これを達成する他の方法はありますか？

javascriptphpcsshtml-table
15
Rajasekar

HTML：

<table>
    <tr href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr href="http://Apple.com">
      <td>Apple</td>
    </tr>
    <tr href="http://google.com">
      <td>Google</td>
    </tr>
</table>

jQuery ライブラリを使用するJavaScript：

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

ここでこれを試すことができます： http://jsbin.com/ikada

CSS（オプション）：

table tr {
    cursor: pointer;
}

または、HTMLの有効なバージョンとdata-hrefの代わりにhref：

<table>
    <tr data-href="http://myspace.com">
      <td>MySpace</td>
    </tr>
    <tr data-href="http://Apple.com">
      <td>Apple</td>
    </tr>
    <tr data-href="http://google.com">
      <td>Google</td>
    </tr>
</table>

JS：

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});

CSS：

table tr[data-href] {
    cursor: pointer;
}
29
ahmet2106

@ ahmet2016をプレーオフし、W3C標準を維持します。

HTML：

<tr data-href='LINK GOES HERE'>
    <td>HappyDays.com</td>
</tr>

CSS：

*[data-href] {
    cursor: pointer;
}

jQuery：

$(function(){       
    $('*[data-href]').click(function(){
        window.location = $(this).data('href');
        return false;
    });
});
10
Michael J. Calkins

テーブルの行をリンクに変える最も簡単な方法は、window.locationでonclick属性を使用することです。

<table>
<tr onclick="window.location='/just/a/link.html'">
<td></td>
</tr>
</table>
8
jonstout

各_<tr>_をクリック可能にする場合は、clickイベントを各_<tr>_に追加できます。さらに、.delegate()を追加することもできます。 _<tr>_要素のクリックを管理するtableのハンドラー。

_$('#myTable').delegate('tr','click',function() {
    alert( 'i was clicked' );
});
_

このコードは、あなたのtableがmyTable IDを持っていると想定しています：

_<table id="myTable">
    <tr><td> cell </td></tr>
    <tr><td> cell </td></tr>
</table>
_

これが意図したものではない場合は、質問を明確にし、使用している関連するJavaScriptコードを投稿してください。

2
user113716

最初の回答に同意します。詳細情報が必要です。しかし、リンクのテーブルを作成しようとしているだけの場合は、

<tr><td><a href="...">...</a></td></tr>
1
Nicole Bartley

プレミアム提案は、テーブルを生成するときにタグを追加することです。テーブルがレンダリングされた後にそれを行う必要があり、JavaScriptを使用したい場合は、常に次のようなものを追加できます

var mytable = document.getElementById("theTable")
var myrows = mytable.rows

for(i=0;i < myrows.length;i++)
{
  var oldinner;
  oldinner = myrows[i].cells[0].innerHTML;
  myrows[i].cells[0].innerHTML = "<a>" + oldinner + "</a>";
}

または、すべてのセルに対してそれを行う必要がある場合は、常に

var mytable = document.getElementById("theTable")
var myrows = mytable.rows

for(i=0;i < myrows.length;i++)
{
  mycells = myrows[i].cells;

  for(a=0;a < mycells.length;a++)
  {
    var oldinner;
    oldinner = mycells[a].innerHTML;
    mycells[a].innerHTML = "<a>" + oldinner + "</a>";
  }
}

これがお役に立てば幸いです

1
CE Thomas

PHP：

echo "<tr onclick=\"window.location='".$links[$i]."'\">......";

JQueryなしのJavaScript：

 x=1;
 .
 .
 for (...) {
   var tr=document.createElement('tr');
   tr.onclick=function() { window.location='page'+(x++)+'.html'}
   tr.style.cursor='pointer';
 .
 }

ユーザーが各行をクリックできるようにするため、配列を使用してページをロードすることもできます。

 x=0;
 var pages=["pagea.html","pageb.html"]
 .
 .
 for (...) {
   var tr=document.createElement('tr');
   tr.onclick=function() { window.location=page[x++];}
   tr.style.cursor='pointer';
 .
 }
1
mplungjan
<tr><td><a></a></td></tr>

この？

0
dqhendricks

jQuery.wraptdに返されたアンカー、次にtrおよび jQuery.appendTotableに追加します

$('ith anchor element in array').wrap('<td />').wrap('<tr />').appendTo('table#table_id');
0
naveen

data-hrefスクリプトを使用して、任意のhtml要素にhrefを追加できます。要素にdata-href属性のみを追加するため、htmlが有効になります。

https://github.com/nathanford/data-href/

0
Fizer Khan

Nicoleが提案したように、withとinsideを単純に生成できます。

<tr><td><a href="url">title of the url</a></td></tr>

または、jQueryが含まれている場合のように、URLをtrタグに挿入します

$('tr.clickable').click(function(){
  window.location = $(this).attr("title");
});

クリックでそのページに移動します（基本的に、タグのように機能するようにtrをハックします（ただ考えて、実際に試してはいけません）。

0
Jerry Deng

加える

表示スタイルを表示に変更：ブロック

このように同じサイズを追加します：

CSS：

#Table a {
display:block;
}
#Table td {
width:100px;
hright:100px
}

HTML：

<table id="Table">
    <tr><td><a onclick="" href="#"> cell </a></td></tr>
    <tr><td> cell </td></tr>
</table>
0
Abudayah