选择一个单选按钮,然后显示表格中所选行的值

时间:2018-07-19 17:37:38

标签: javascript jquery spring-mvc

当我单击状态单选按钮时,应在下表下方显示整行。

创建另一个表的目的是我试图编辑第二个数据表中的代码。请注意,有多个行和多个单选按钮,如果我选择任何一个单选按钮,我应该能够在单独的表中显示相应的行并保存。

您能帮我显示表格吗,然后我可以处理保存部分吗?

<div style="overflow: auto; max-height: 450px; width: 420px;">
  <table class="mytable">
    <tr>
      <th width="120" align="center" colspan="2">Status</th>
      <th width="130" align="center">Name</th>
      <th width="50" align="center">Code</th>
      <th width="50" align="center">level</th>
      <th width="120" align="center">Date</th>
    </tr>

    <%
      int index = 1;
    %>

    <c:forEach items="${List.Rates}" var="state">
      <tr id="rateRow1<%=index%>">      
      <td align="center"><input id="dummyRadio<%=index%>" name="<%=index%>" type="radio"/></td>
      <td align="left" id="rateAdjType<%=index%>" title="<c:out value="${state.key.Status}"/>"><c:out value="${state.key.Status}"/></td>        
      <td><c:out value="${state.Name}"/></td>   
      <td><c:out value="${state.Code}"/></td>   
      <td><c:out value="${state.level}"/></td>  
      <td><c:out value="${state.date}"/></td>                   
      </tr>         
    </c:forEach>

table row

1 个答案:

答案 0 :(得分:0)

您需要为每个td添加类名称,并向单选按钮示例添加一个新类:

<c:forEach items="${List.Rates}" var="state">
  <tr id="rateRow1<%=index%>">        
    <td align="center"><input id="dummyRadio<%=index%>" class="class_radio" name="<%=index%>" type="radio"/></td>
    <td align="left" id="rateAdjType<%=index%>" title="<c:out value="${state.key.Status}"/>"><c:out value="${state.key.Status}"/></td>      
    <td class="class_name"><c:out value="${state.Name}"/></td> 
    <td class="class_code"><c:out value="${state.Code}"/></td> 
    <td class="class_level"><c:out value="${state.level}"/></td>    
    <td class="class_date"><c:out value="${state.date}"/></td>                 
  </tr>           
</c:forEach>

稍后,您可以按以下方式获取每个td值:

$(".classradio").change(function(){
  var name = $(this).parent().find(".class_name").val();
  var code = $(this).parent().find(".class_code").val();
})