hrefリンクでブートストラップのクリック可能な行を接続

Question

私はテーブルを動的に作成していて、すべての行をクリック可能にしてURLにリンクし、クリックした後にURLを開くようにします。

私はテーブルを作成し、すべての行をブートストラップでクリック可能な行として設定するようにしました。

 // Table Body 
 
     var tableBody = document.createElement('tbody'); 
 
     tableData.forEach(function(rowData) { 
 
      var row = document.createElement('tr'); 
 
      var IntegrityURL = "integrity://lanwinsvmks1.eu.adglob.net:8001/im/viewissue?selection="; 
 
      var ReqURL = IntegrityURL.concat(rowData[0]); 
 
      row.setAttribute("class", "clickable-row"); 
 
      row.setAttribute("href", ReqURL); 
 
      rowData.forEach(function(cellData) { 
 
       var cell = document.createElement('td'); 
 
       var context = getColor(cellData); 
 
       cell.setAttribute("bgcolor",context); 
 
       cell.appendChild(document.createTextNode(cellData)); 
 
       row.appendChild(cell); 
 
      }); 
 
      tableBody.appendChild(row); 
 
     });

私もdoc.readyでクリック機能を設定します。

$('#OverviewTable tr').click(function() { 
 
     var href = $(this).find("tr").attr("href"); 
 
     if(href) { 
 
      window.location = href; 
 
     } 
 
    });

HTMLの結果は右に見えますが、行ではありませんclick（）関数は呼び出されません。

私には何が欠けていますか？

Answer 1

あなたはこれを試すことができます：ご質問がある場合は下記にコメントしてください。

$('.clickable-tr').on('click', function(){ 
 
    var myLink = $(this).attr('href'); 
 
    window.location.href = myLink; 
 
});

.clickable-tr{ 
 
    cursor: pointer; 
 
    background: #eee; 
 
} 
 

 
table{ 
 
    width: 100%; 
 
} 
 

 
thead tr th{ 
 
    text-align: left; 
 
} 
 

 
tr td{ 
 
    padding: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Column1</th> 
 
     <th>Column2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="clickable-tr" href="https://stackoverflow.com"> 
 
     <td> 
 
     Data 1 example 
 
     </td> 
 
     <td>Data 1 Example</td> 
 
    </tr> 
 
    
 
    <tr class="clickable-tr" href="https://stackoverflow.com"> 
 
     <td> 
 
     Data 2 example 
 
     </td> 
 
     <td>Data 2 Example</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

更新：jsコードで説明

、我々はclickable-trクラスを持つ要素をターゲットにしています。 $(this)を使用して、現在の要素/クリックのみが選択されているとします。その後、attr()を使用して、現在のhref属性を取得しており、window.location.hrefを使用してリダイレクトすることができます。

Answer 2

あなたはこのために試すことができます。

var href = $(this).find("tr").attr("href"); 

次のようになります：番目の「のよう

var href = $(this).attr("href"); 

$(document).ready(function() 
{ 
    $('#movies tr').each(function(i,e) 
    { 
     $(e).children('td:not(:last)').click(function() 
     { 
     //here we are working on a td element, that's why we need 
     //to refer to its parent (tr) in order to find the <a> element 
     var href = $(this).closest("tr").find("a").attr("href"); 
     if(href) 
     { 
      window.location = href; 
     }    
     }); 
    }); 
}); 

Answer 3

うーん、あなたがいるかもしれません'はすでにhref attrを持つ' tr '要素です