时间戳

首页 > 解决方案 > 想要使用 jQuery 以垂直方式获取 td 选择框选定值

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

问题描述

在此处输入图像描述

我想以垂直方式读取所有选定的值。星期一（2018 年 9 月 24 日）的示例我必须读取第一个循环中的所有选择框值。接下来星期二（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 动态获取。

标签： javascriptjquery

解决方案

先说几个问题。ID's 不应该被重复，你正在这样做id="monday" id="tuesday"...与id="dateDay"

不知道为什么你$('#rosterTable .dateDay').each(function()不需要循环那些日子，因为你<select>的 's 已经有了这些日子的课程。

做这个

var monday = [];
var tuesday = [];
$('.monday').each(function() {
    monday.push($(this).val());
}
$('.tuesday').each(function() {
    tuesday.push($(this).val());
}

依此类推，这将为您将每天的​​数据放入一个不错的数组中。然后转成JSON

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

如果您想向数组添加键/值，您将在选择时指定值的标题是什么，以便它知道如何标记它。您可以为每个选择做这样的事情

<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()});
}

推荐阅读