htmledit_views">

业务需求

1、查询后台，动态显示。

2、查看页面动态勾选已选择内容

 

代码部分

html hljs">动态生成表格代码

html hljs"><table style="font-size: 17px;" border="1">
    <tbody>
    <tr class="firstRow">
        <td style="display:none;"></td>
        <td width="20%" valign="top" style="word-break: break-all; text-align: center">服务人群</td>
        <td width="40%" valign="top" style="word-break: break-all;text-align: center">服务内容</td>
        <td width="20%" valign="top" style="word-break: break-all;text-align: center">选择服务项目</td>
        <td width="20%" valign="top" style="word-break: break-all;text-align: center">备注</td>
    </tr>
    <c:forEach var="item" items="${serviceTable1}" varStatus="status">
        <tr>
            <td style="display:none;"><input type="hidden" value="${item.id}" ></td>
            <td  width="20%" >${item.targetCrowd}</td>
            <td width="40%">${item.content}</td>
            <td width="20%"  class="jt-check-td"><br/> <input  type="checkbox" name="checkItem" onchange="checkMark('markCheck_'+${ status.index},$(this))"/></td>
            <td width="20%" ><input class="jt-td-input" type="text"/></td>
        </tr>
    </c:forEach>
    
    </tbody>
</table>
获取选中的表格行代码
//获取选中的表格行
var result = []; // 数组
var tr = $("#serviceTable tr"); // 获取table中每一行内容
for (var i = 1; i < tr.length; i++) {// 遍历表格中每一行的内容
    var tds = $(tr[i]).find("td");
    var packageId= $(tr[i]).find('td:eq(0)').find('input').val();
    var targetCrowd = $(tr[i]).find("td")[1].innerText;
    var content= $(tr[i]).find("td")[2].innerText;
    var checkItem= $(tr[i]).find('td:eq(3)').find("input[type=checkbox]").prop("checked");
    var remark= $(tr[i]).find('td:eq(4)').find('input').val();
    if (tds.length > 0) {
        result.push({
            "packageId" : packageId,
            "targetCrowd" : targetCrowd,
            "content" : content,
            "checkItem" : checkItem,
            "remark" : remark
        })
    }
}

html hljs">提交事件代码
$("#serviceData").val(JSON.stringify(result));

动态加载表格及复选框勾选

html hljs"><table style="font-size: 17px;" border="1">
    <tbody>
    <tr class="firstRow">
        <td width="20%" valign="top" style="word-break: break-all; text-align: center">服务人群</td>
        <td width="40%" valign="top" style="word-break: break-all;text-align: center">服务内容</td>
        <td width="20%" valign="top" style="word-break: break-all;text-align: center">选择服务项目</td>
        <td width="20%" valign="top" style="word-break: break-all;text-align: center">备注</td>
    </tr>
    <c:forEach var="item" items="${serviceTable1}">
        <tr>
            <td width="20%">${item.targetCrowd}</td>
            <td width="40%">${item.content}</td>
            <td width="20%"  class="jt-check-td">
                <input  type="checkbox" name="markValue1" value="7"<c:if test="${fn:contains(signAgreement.allPackageId,item.packageId)}">checked="checked"</c:if>/>
                    </td>
            <td width="20%">${item.remark}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>