弹出带有表格ID的显示界面

时间:2018-09-21 10:44:23

标签: javascript jquery css html5

当我单击“选择”按钮时,它应该显示HTML弹出窗口,并且由于某种原因没有发生。

是ID问题还是硬编码?

主要思想是单击并从随机数组列表中读取某种列表。

以下:带有回调ID和显示内容的我的.js。

有什么想法吗?

<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
            <table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
                    <tr class ="bb cls-{id} active-{active}">
                        <td class="active-{active}" id="{id}-question" width="70%">{question}</td>
                        <td class="cls-{id} active-{active}" width="30%">
                            <button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
                        </td>
                    </tr>
            </table>

                <div id="projectPopUp"  class="popup-window" style="display:none">
                    <div class="popuptitle" id="details-name"></div>
                        <table width="100%" id="detailsgrid">
                            <tr>
                                <td style="text-align:left">Start Time</td>
                                <td> <select id="details-startTime" data-role="none"></select></td>
                            </tr>
                            <tr>
                                <td style="text-align:left">End Time</td>
                                <td> <select id="details-endTime" data-role="none"></select></td>
                            </tr>
                        </table>
                    <div>
                        <button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
                        <button class="smallButton" onClick="submitProjectPopup()">Submit</button>
                    </div>
            </div>

            <table style="display: none;" id="sectionRowTemplate">
                <tr width="100%" class="bb cls-{id}-row2 sectionheader">
                    <td class="cls-{id}" colspan="3">{question}</td>
                </tr>
            </table>

JavaScript代码:

var buildQuestionnaire = function(){
    parseInitialDataHolder();

    for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
        var id = i;
        var data = {
            id: id,
            question: ARRAY_OF_QUESTIONS[i].question,
            inspectionResult: '',
            active: true
        };
        var initialdata = initialdataholder[id];
        if(initialdata) {
            data = initialdata;
        }
        dataholder.push(data);

        if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
            $('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
            $("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
            $("#" + id + "-inspectionResult").click(resultHandler.bind(data));
            updateActiveStatus(data);
            commentvisibilitymanager(data);
        }
        else {
            $('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
        }
    }

}
//to show the popup
$('#projectPopUp').show();

//to close the popup
$('#projectPopUp').hide();

$(document).ready(function() {
    buildQuestionnaire();
});

0 个答案:

没有答案