行のjqueryを使用してテーブルのセル値を取得する

Question

私は単純なテーブルを持っています。特定の行をクリックした後にその行にincidentIdの値を取得し、隠し空変数に代入します。

私のテーブル

<table class="table table-striped"> 
    <thead style="background-color: #F0F1F2"> 
     <tr> 
     <th>Incident Id</th> 
     <th>Party Name</th> 
     <th>Max Rank</th> 
     <th>Incident Description</th> 
     </tr> 
    </thead> 
    <tbody> 
    <c:forEach items="${incidents}" var="incident"> 
     <tr onclick="changeIncidentValue(this)">         
     <td>${incident.incidentId}</td> 
     <td>xxx</td> 
     <td>${incident.partyNameMaxRank}</td> 
     <td>${incident.incidentDesc}</td> 
     </tr> 
    </c:forEach>       
</tbody> 
</table> 
<input type="hidden" id="incidentId" value=""/> 

JS機能

<script> 
    function changeIncidentValue(incidentId){ 
     $('#incidentId').val(incidentId); 
     console.log($('#incidentId').val()); 
    } 
</script> 

Answer 1

ハンドラ

<tr onclick="changeIncidentValue(${incident.incidentId})"> 

代わりの

をクリックインライン化する incidentIdの代わり thisを渡します

---

それとも、あなたがthisを渡しているように、第一のカラムからincidentIdを取得するために、最初のTD要素

function changeIncidentValue(elem){ 
    $('#incidentId').val($(elem).find('td:first').text()); 
} 

Answer 2

使用find()とeq()から値を取得するには、DOMのトラバーサル方法でそれを使用し、

function changeIncidentValue(ths){ 
    $('#incidentId').val($(ths).find('td:eq(0)').text()); 
    consle.log($('#incidentId').val()); 
} 

また、incidentIdの値onclickイベントを直接設定することもできます。

<tr onclick="$('#incidentId').val(${incident.incidentId})">         
    <td>${incident.incidentId}</td> 
    <td>xxx</td> 
    <td>${incident.partyNameMaxRank}</td> 
    <td>${incident.incidentDesc}</td> 
    </tr> 

Answer 3

https://jsfiddle.net/ew73yjaa/

jQueryの

$('.t').on('click',function(){ 
    console.log($(this).find('td').first().text()); 
    $('#incidentId').val($(this).find('td').first().text()); 
}) 

HTML

<table class="table table-striped"> 
<thead style="background-color: #F0F1F2"> 
    <tr> 
    <th>Incident Id</th> 
    <th>Party Name</th> 
    <th>Max Rank</th> 
    <th>Incident Description</th> 
    </tr> 
</thead> 
<tbody> 
    <tr class="t">         
    <td>1</td> 
    <td>xxx</td> 
    <td>2</td> 
    <td>3</td> 
    </tr>     
</tbody> 
</table> 
<input id="incidentId" value=""/>