Question

我想以垂直方式读取所有选定的值。星期一（09/24/2018）的示例我必须读取所有在第一个循环中的选择框值。接下来是星期二（2018年9月25日），我必须阅读第二个循环中的所有选择框值。

<table class="myTable" id="rosterTable">
                <col>
                <colgroup span="2"></colgroup>
                <colgroup span="2"></colgroup>
                <tr>

                    <th colspan="1" scope="colgroup">Roster & Leave Details</th>
                    <th colspan="1" scope="colgroup">Monday</th>
                    <th colspan="1" scope="colgroup">Tuesday</th>
                    <th colspan="1" scope="colgroup">Wednesday</th>
                    <th colspan="1" scope="colgroup">Thursday</th>
                    <th colspan="1" scope="colgroup">Friday</th>
                    <th colspan="1" scope="colgroup" bgcolor="#feb236"><font
                        color="#feb236">Saturday</font></th>
                    <th colspan="1" scope="colgroup" bgcolor="#feb236"><font
                        color="#feb236">Sunday</font></th>
                </tr>
                <tr>
                    <th scope="col">${employees.currentWeek}'th-Week</th>
                    <c:forEach items="${employees.days}" var="days">
                        <th id="dateDay" class="dateDay" scope="col">${days}</th>
                    </c:forEach>
                </tr>

                <tr>
                    <th># Name</th>
                    <th>IST / Leave Details</th>
                    <th>IST / Leave Details</th>
                    <th>IST / Leave Details</th>
                    <th>IST / Leave Details</th>
                    <th>IST / Leave Details</th>
                    <th>IST / Leave Details</th>
                    <th>IST / Leave Details</th>
                </tr>
                <c:forEach items="${employees.listEmployee}" var="employee">
                    <tr>
                        <th id="empName" class="empName" scope="row">${employee.firstName}${employee.lastName}</th>
                        <td class="selectedShiftValue" id="monday"><select class="monday">
                                <option value="NONE"> --SELECT--<option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                        <td class="selectedShiftValue" id="tuesday"><select class="tuesday">
                                <option value="NONE"> --SELECT--</option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                        <td class="selectedShiftValue" id="wednesday"><select class="wednesday">
                                <option value="NONE"> --SELECT--</option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                        <td class="selectedShiftValue" id="thursday"><select class="thursday">
                                <option value="NONE"> --SELECT--</option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                        <td class="selectedShiftValue" id="friday"><select class="friday">
                                <option value="NONE"> --SELECT--</option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                        <td class="selectedShiftValue" id="saturday"><select class="saturday">
                                <option value="NONE"> --SELECT--</option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                        <td class="selectedShiftValue" id="sunday"><select class="sunday">
                                <option value="NONE"> --SELECT--</option>
                                <c:forEach items="${employees.roster}" var="roster">
                                    <option value="">${roster.shiftId} / ${roster.shiftValue}</option>
                                </c:forEach>
                            </select></td>
                    </tr>
                </c:forEach>
            </table>

以下代码将在星期一将所有员工带走。对于星期一，所有第一个选择框值都需要选择。

$('#rosterTable .dateDay').each(function()
            {
                  alert($(this).html());
                  $('#rosterTable .empName').each(function()
                   {
                      alert($(this).html());
                      // here monday all select box values needs to fetch. 

                   });
            });

任何以垂直方式获取选择框值的想法。

最后，我需要以下格式的json。

{
"Object" : [
    {
        "name":"GanesanSundareswaran",
        "date":"09/24/2018",
        "shiftDetails":" value selected from monday first select box towards the first name in the th section"
    },
    {
        "name":"ArunRathesh",
        "date":"09/24/2018",
        "shiftDetails":" value selected from monday second select box towards the second name in the th section"
    },
    {
        "name":"VishnuGopal",
        "date":"09/24/2018",
        "shiftDetails":" value selected from monday third select box towards the third name in the th section"
    }
]

}

该雇员的姓名将动态地从db获取。

Answer 1

首先没有几个问题。 ID应该never be repeated，而您正在使用id="monday" id="tuesday" ...与id="dateDay"

不确定$('#rosterTable .dateDay').each(function()为何要使用<select>，因为var monday = []; var tuesday = []; $('.monday').each(function() { monday.push($(this).val()); } $('.tuesday').each(function() { tuesday.push($(this).val()); }已经有了带日期的课程。

这样做

var monday= JSON.stringify(monday);
var tuesday = JSON.stringify(tuesday);

，依此类推，这会将每天的数据放入一个适合您的数组中。然后转换为JSON

<select class="monday" data-label="name">
<select class="monday" data-label="date">
<select class="monday" data-label="shiftDetails">

如果要将键/值添加到数组中，则将在选择上指定值的标题，以便知道如何对其进行标记。您可以按选择执行以下操作

var monday = [];
var tuesday = [];
$('.monday').each(function() {
    var key = $(this).attr('data-label');
    monday.push({key: $(this).val()});
}
$('.tuesday').each(function() {
    var key = $(this).attr('data-label');
    tuesday.push({key: $(this).val()});
}

然后，如果您要将键/值添加到数组中，请执行此操作

while (c < t) loop

想要使用jQuery以垂直方式获取td选择框所选值

1 个答案: