Question

我正在尝试创建一个表，以便在选择不同的报表时显示某些行。但是，当选择报告时，第一个选择会在屏幕上被推到右侧。有人请告诉我是什么原因引起的吗？

<table border="0">
    <tr>
        <td><p>Please select a report:</p></td>
        <td>
            <select class="form-control" id="reporttype" name="reporttype"> 
                <option value="" selected="selected">Select Report</option>
                <option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
                <option id ="locationreports" value="locationreports" >Location Stats</option>
            </select>
        </td>
    </tr>
    <tr>
        <td id="location" style="display: none;">
            <select name="Location" id="loc" multiple="multiple" required size="9">
                <option value="OPERATIONS">Operations</option>
                <option value="CCC">Contact Center</option>
                <option value="QA">QA Department</option>
                <option value="DS">DeSoto</option>
                <option value="PS">Palma Sola</option>
                <option value="LWR">Lakewood Ranch</option>
                <option value="NR">North River</option>
                <option value="SDL">SDL</option>
                <option value="FSC">FSC</option>
            </select>

            <button id="add" type="button">ADD ALL</button>
            <button id="rem" type="button">REMOVE ALL</button>

            <textarea id="selected" rows="10" readonly></textarea>
        </td>
    </tr>
    <tr>
        <td id="employeelist" style="display: none;">
            <cfquery name="GetActiveEmps" datasource="tco_associates">
                SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
                WHERE assoc_status = 'ACTIVE' 
                and assoc_last NOT LIKE 'Test%' 
                and len(assoc_last) > 0 
                ORDER BY assoc_last
            </cfquery>    

            <select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="9">
                <cfoutput query="GetActiveEmps">
                    <option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
                </cfoutput>
            </select>

            <button id="add1" type="button">ADD ALL</button>
            <button id="rem1" type="button">REMOVE ALL</button>

            <textarea id="selected1" rows="10" readonly></textarea>
        </td>
    </tr>
    <tr>
        <td id="chosendates" style="display: none;">
            <label for="StartDate">From</label>
            <input type='text' name="StartDate" id="StartDate" value="" required/>

            <label for="EndDate">To</label>
            <input type='text' name="EndDate" id="EndDate" value="" required/>
        </td>
    </tr>
    <tr>
        <td id="formattype" style="display: none;">
            <label for="Format">Format</label>
            <select name="Format" required>
                <option selected value="">Select Format</option>
                <option value="print">Print</option>
                <option value="pdf">Preview</option>
                <option value="xls">Excel</option>
            </select>
        </td>
    </tr>
    <tr>
        <td id="submitbtn" style="display: none;">
            <input type="submit"  name="submit" value="Continue" />
        </td>
    </tr>
</table>

<script>
    $(document).on('change', '#reporttype', function() {
        var value = $(this).val();

        //var checklistreport = $("#checklistreport");
        //var locationreport = $("#locationreport");
        var location = $("#location");
        var employeelist = $("#employeelist");
        var chosendates = $("#chosendates");
        var formattype = $("#formattype");
        var submitbtn = $("#submitbtn");

        if (value == "checklistreports") {
            //checklistreport.show();
            //locationreport.hide();
            location.show();
            employeelist.show();
            chosendates.show();
            formattype.show();
            submitbtn.show();
        } else if (value == "locationreports") {
            //checklistreport.hide();
            //locationreport.show();
            location.show();
            employeelist.hide();
            chosendates.show();
            formattype.show();
            submitbtn.show();
        } else {
            //checklistreport.hide();
            //locationreport.hide();
            location.hide();
            employeelist.hide();
            chosendates.hide();
            formattype.hide();
            submitbtn.hide();
        }
    });
</script>

<!--<div id="locationreport" style="display: none;">-->
<form name="generatereport" method="post" action="_location_queries.cfm">
<!--<div id="checklistreport" style="display: none;">-->
<form name="generatereport" method="post" action="_checklists_queries.cfm">

</form> 

<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = true;
    }

    reflectChange();
});

document.getElementById('rem').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = false;
    }

    reflectChange();
});

document.getElementById('loc').addEventListener('change', reflectChange);

function reflectChange() {
    document.getElementById('selected').value = '';

    for ( var i=0; i<opts.length; i++ ) {
        if(opts[i].selected)
        document.getElementById('selected').value += opts[i].text+'\n';
    }
}

// End JS for Showing Chosen Locations in textarea

// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');

document.getElementById('add1').addEventListener('click', function() {
    for ( var i=0; i<opts1.length; i++ ) {
        opts1[i].selected = true;
    }

    reflectChange1();
});

document.getElementById('rem1').addEventListener('click', function() {
    for ( var i=0; i<opts1.length; i++ ) {
        opts1[i].selected = false;
    }

    reflectChange1();
});

document.getElementById('EmployeeName').addEventListener('change', reflectChange1);

function reflectChange1() {
    document.getElementById('selected1').value = '';

    for ( var i=0; i<opts1.length; i++ ) {
        if(opts1[i].selected)
        document.getElementById('selected1').value += opts1[i].text+'\n';
    }
}

// End JS for Showing Chosen Associates in textarea
   </script>

https://jsfiddle.net/bobrierton/o2gxgz9r/10040/

Answer 1

这是因为用于选择报告的选择列表位于第一行的第二个表格单元格中，并且当显示后续表格行中的内容时，第一列的宽度会增加，这反过来会推动右边第二列。下面的屏幕截图就是一个例子。

避免将选择列表推到右侧的一种方法是将colspan属性用于后续行（即添加colspan="2"），或者将选择列表移动到第一行中列并使用CSS使其与右侧对齐（例如，使用float）。

选择选项后，第一个表选择跳过屏幕

1 个答案: