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

将incidentId代替this传递给内嵌点击处理程序

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

而不是

<tr onclick="changeIncidentValue(this)">

或者，当您传递this时，使用DOM遍历方法从第一个TD元素获取值

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

Answer 2

使用find()和eq()从第一列获取incidentId，

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

或者您可以直接设置eventsId的值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=""/>

在行单击时使用jquery获取表格单元格值

3 个答案: