エラー改善：IEだけ表の行リンク()が機能しない

2020.03.24
html備忘録
, HTML, IEだけ, IE不具合, jQuery, テーブル, 動かない, 行リンク

1. エラー改善：IEだけ表の行リンク(<tr data-href=”hoge”>)が機能しない

エラー改善：IEだけ表の行リンク(<tr data-href=”hoge”>)が機能しない

前記事に引き続きIEだけできないシリーズ。

今回はtableの行に対してリンクを張る<tr data-href=”hoge”> です。
こいつ結構便利で、MySQLでレコードをテーブルに流して行リンク貼ると記載文字数を大きく減らせます。

なので多用していたのですがIEで見てみると動かない！

まずは解決方法について

こう書くとTRタグでのリンクが可能になります。

jQuery( function($) {
    $('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');
        });
    });
});

jQuery( function($) {

$('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');

});

リンクが動かなかった原因について

data-hrefについて記載したjsを確認します。

私の場合は下の様に書いていました。

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');
        });
    });
});

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');

});

そう、tbodyから書き始めてます。

んで、リンクが飛ばない書いたテーブルを見るとこんな感じ

<table>
  <colgroup>
    <col style="width:25%;">
    <col style="width:25%;">
    <col style="width:25%;">
    <col style="width:25%;">
  </colgroup>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  @foreach($hogas as $hoga)
  <tr data-href="/hogehoge/{{$hoga['id']}}/edit">
    <td>{{$hoga->column01}}</td>
    <td>{{$hoga->column02}}</td>
    <td>{{$hoga->column03}}</td>
    <td>{{$hoga->column04}}</td>
  </tr>
  @endforeach
</table>

<table>

</colgroup>

<tr>

</tr>

@foreach($hogas as $hoga)

<td>{{$hoga->column01}}</td>

<td>{{$hoga->column02}}</td>

<td>{{$hoga->column03}}</td>

<td>{{$hoga->column04}}</td>

</tr>

@endforeach

</table>

はい、tbodyもtheadも書いてませんね。

これが原因でした。というかね、これで動く様に解釈してくれるchrome様スバらしいです。

まとめ

まぁこういう細かいのは経験しないと解らない事なので、今回は良い経験をさせてもらったなと思います。

エラー改善：IEだけ表の行リンク()が機能しない

エラー改善：IEだけ表の行リンク(<tr data-href=”hoge”>)が機能しない

まずは解決方法について

リンクが動かなかった原因について

まとめ

関連

エラー改善：IEでだけプルダウンメニューが動かない！ 2020.03.24

見つめ直す必要がある『価格』と『価値』について 2020.03.26

エラー改善：IEだけ表の行リンク()が機能しない

エラー改善：IEだけ表の行リンク(<tr data-href=”hoge”>)が機能しない

まずは解決方法について

リンクが動かなかった原因について

まとめ

共有:

関連

エラー改善：IEでだけプルダウンメニューが動かない！ 2020.03.24

見つめ直す必要がある『価格』と『価値』について 2020.03.26