javascript - 迭代 jSTL 标签中的隐藏值

Question

我正在使用 Ajax 调用来设置隐藏值，然后我需要迭代它以形成一个表。

值正在隐藏值中设置，但我无法使用 jSTL 标记形成表格。

隐藏字段:

<input type="hidden" name="hiddenResult" id="hiddenResult" />

表体:

<tbody>
        <c:set var="searchresult" value="${hiddenResult}"></c:set>
        <c:forEach items="${searchresult}" var="searchresult" varStatus="loop">
            <tr>
                <td>${searchresult.schoolName}</td>
                <td>${searchresult.districtName}</td>
                <td>${searchresult.ltiKey}</td>
                <td>${searchresult.ltiSecret}</td>
                <td>
                    <input type="checkbox" name="selectedLtiKeys" id="selectedLtiKeys${loop.index}" style="display: none;" value="${searchresult.ltiKey}"> 
                    <c:if test="${searchresult.status == 'Active'}">
                        <img id="activate${loop.index}" src="../image/activate_button.png"
                                                    onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},false);">
                        <img id="inactivate${loop.index}" style="display: none;" src="../image/inactivate_button.png"
                                                    onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},true);">
                    </c:if> 
                    <c:if test="${searchresult.status == 'InActive'}">
                        <img id="inactivate${loop.index}" src="../image/inactivate_button.png"
                                                        onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},true);">
                        <img id="activate${loop.index}" src="../image/activate_button.png" style="display: none;"
                                                onclick="selectedLtiKeys${loop.index}.checked = (!selectedLtiKeys${loop.index}.checked); javascript:toggleImage(${loop.index},false);">

                    </c:if>
                </td>
            </tr>
        </c:forEach>
</tbody>

Answer 1

我不知道任何响应类定义。那么我将告诉您有关如何通过 ajax 调用更新表格的基本信息。首先加载表格数据页面。 假设加载表格后如下:

<table summary="search result" id="data-table" class="search-result" cellspacing="0" style="">
    <thead>
        <tr>
            <th scope="" class="" id="">id</th>
            <th scope="" class="" id="">name</th>
            <th scope="" class="" id="">email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>some name</td>
            <td>some@some.com</td>
        </tr>
    </tbody>
</table>

现在进行 ajax 调用并通过下面的代码片段更新您的表格。

function updateData() {

    var obj = $("#data-table tr");

    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'updateData.html',
        data: '', // what you want to sent
        success: function(responseData,textStatus) {
            if (textStatus == 'success' && responseData.length > 0) {
                $('#data-table tbody').html('');

                var row = '';
                for(var i = 0; i< responseData.length;i++){

                var id = responseData[i].id;
                var name = responseData[i].name;
                var email = responseData[i].email;
                // Now prepare the data for the table
                row += '<tr>'+'<td>'+id+'</td>'+'<td>'+name+'</td>'+'<td>'+email+'</td></tr>';

            }
            $('#data-table tbody').html(row);   

            }
        }, error: function(responseData) {
            // show your error message
        }
    });

}

JsFiddle