如何根据行表（数据库）检查复选框？

Question

我有一个可以在modal（bootstrap）中编辑/更新数据构建的表单，我想根据我的行表检查复选框...

这是我的编辑/更新表单：

<td><fieldset id="menu_e">
<input type="checkbox" name="menu" value="User" class="ceksmenu">User<br />
<fieldset id="sub_menu_user_e">
<input type="checkbox" name="sub_menu_user" value="User1" class="ceksmuser">User1
<input type="checkbox" name="sub_menu_user" value="User2" class="ceksmuser">User2
<input type="checkbox" name="sub_menu_user" value="User3" class="ceksmuser">User3<br />
</fieldset>
<input type="checkbox" name="menu" value="Monitoring" class="ceksmenu">Monitoring<br />
<fieldset id="sub_menu_monitoring_e">
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring1" class="ceksmmonit">Monitoring1
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring2" class="ceksmmonit">Monitoring2
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring3" class="ceksmmonit">Monitoring3<br />
</fieldset>
<input type="checkbox" name="menu" value="Parameter" class="ceksmenu">Parameter<br />
<fieldset id="sub_menu_parameter_e">
<input type="checkbox" name="sub_menu_parameter" value="Parameter1" class="ceksmparam">Parameter1
<input type="checkbox" name="sub_menu_parameter" value="Parameter2" class="ceksmparam">Parameter2
<input type="checkbox" name="sub_menu_parameter" value="Parameter3" class="ceksmparam">Parameter3</fieldset>
</fieldset>
</td>

这是我的表格代码：

<tbody>
   <c:forEach var="row" items="${requestScope.authorityuser}">
      <tr>
          <td>${row.id_authority}</td>
          <td>${row.nama_authority}</td>
          <td><c:forEach var="u" items="${row.menu}">|${u}| </c:forEach></td>
          <td><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
          <td><c:forEach var="u" items="${row.sub_menu_monitoring}">|${u}| </c:forEach></td>
          <td><c:forEach var="u" items="${row.sub_menu_parameter}">|${u}| </c:forEach></td>
          <input type="hidden" name="id_authority" value="${row.id_authority }">
          <td><a href="#update" role="button" data-toggle="modal"
             class="update" id_update="${row.id_authority}"
                        nama_authority="${row.nama_authority}" menu="${row.menu}" 
                                sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}" 
                                    sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
              </a><a href="#delete" role="button" data-toggle="modal"
                                class="delete" id_delete="${row.id_authority}">
                                 <i class="icon-trash"></i> <spring:message code="delete" text="default text" />
                            </a></td>
                </tr>
                </c:forEach>
        </tbody>

我尝试过这样做并不起作用:(

<script type="text/javascript">
  $(document).ready(function() {
     $('.update').click(function() {
       if($('input:checkbox[name=sub_menu_user]').is(':checked')){
           $('input:checkbox[name=sub_menu_user]').prop('checked', true);
      }else{
           $('input:checkbox[name=sub_menu_user]').prop('checked', false);
      }
     var id_update = $(this).attr("id_update");
     var nama_authority = $(this).attr("nama_authority");
     var menu = $('input:checkbox[name=menu]').is(':checked');
     var sub_menu_user = $('input:checkbox[name=sub_menu_user]').is(':checked');
     var sub_menu_monitoring = $('input:checkbox[name=sub_menu_monitoring]').is(':checked');
     var sub_menu_parameter = $('input:checkbox[name=sub_menu_parameter]').is(':checked');

     $('#id_authority_e').val(id_update);
     $('#id_authority_l').val(id_update);
     $('#nama_authority_e').val(nama_authority);
     $('#menu_e').val(menu);
     $('#sub_menu_user_e').val(sub_menu_user);
     $('#sub_menu_monitoring_e').val(sub_menu_monitoring);
     $('#sub_menu_parameter_e').val(sub_menu_parameter);
  });
  $('.delete').click(function() {
     var id_delete = $(this).attr("id_delete");
     $('#id_authority_d').val(id_delete);
  });
     $('#example').dataTable({
  });
});
</script>

这是我表的输出

怎么可能？任何帮助都将是愉快的：）

这是我的编辑/更新表格

这是我的表

Answer 1

我只是看了javascript部分，这是我的答案。

您必须阅读HTML中的文本并对其进行解析，因为您需要能够获取特定的单元格。使用 row_id ，您可以将搜索范围缩小到 类名 ，以获得正确的单元格。

我希望 jsFiddle 上的简短工作演示可以帮助您解决问题＆＃34;。

<强> HTML：

<table class="data-table">
    <tr id="row_1"><td class="authority">...</td> 
        <!-- id should be constructed something like id="row_${row.id_authority}" -->
        <td class="...">...</td>
        <td class="users">|user1|user2|user3|</td>
        <td class="...">...</td>
        <td> <a href="#update" class="update" id_update="1">edit</a>  </td>
        <!-- id_update should be as in your code id="${row.id_authority}" -->
    </tr>  
</table>

<强>使用Javascript：

$(function(){
    $(".update").click(function(){
        var id_update = $(this).attr("id_update");
        var users = $("#row_" +  id_update).find(".users").text().split("|").slice(1,-1);
        for(var user in users)
            alert(users[user]);
    });
});
// tested on Windows 7 with Chrome 33+

编辑：添加了一些＆＃34;代码＆＃34;

可能的JSP代码：

<c:forEach var="row" items="${requestScope.authorityuser}">
    <tr id="row_${row.id_authority}">
        <td class="...">${row.id_authority}</td>
        <td class="...">...</td>
        <td class="users"><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
        <td class="...">...</td>
        <td>
            <a href="#update" role="button" data-toggle="modal"
            class="update" id_update="${row.id_authority}"
            nama_authority="${row.nama_authority}" menu="${row.menu}" 
            sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}" 
                sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
            </a> ...
        </td>
    </tr>
</c:forEach>

<强> 编辑：

我更新了jsFiddle（此链接与上面的链接不同）。

重要的部分就在这里......

for(var user in users){
    // it could be optimized, but like this it could work.
    $("input[name='sub_menu_user'][value='" + users[user] + "']")[0].checked=true;
}
// tested on Windows 7 with Chrome 33+