Question

我有以下html表（如果需要，我可以提供html）。单元格中的每个名称都是li中的锚标记。例如，如果单击'curly'，我想循环遍历该列中的每个单元格，并看到其他类如应用的那样卷曲。（我的目的是应用验证，因此列中不超过3个名称的块可以是红色的。）

任何人都知道如何实现这一目标？

 HTML: <div class="container">
    <table id="tbl_calendar" class="table table-bordered calendar">
        <thead>
            <tr>
                <td><span class="glyphicon glyphicon-calendar"></span></td>
                <td id="2015-11-30" style="font-weight: bold;">Monday <br> 30/11/2015 </td>
                <td id="2015-12-01" style="font-weight: bold;">Tuesday <br> 01/12/2015</td>
                <td id="2015-12-02" style="font-weight: bold;">Wednesday <br> 02/12/2015</td>
                <td id="2015-12-03" style="font-weight: bold;">Thursday <br> 03/12/2015</td>
                <td id="2015-12-04" style="font-weight: bold;">Friday <br> 04/12/2015</td>
            </tr>

            <tr><td id='910' style='font-weight: bold'> 9-10 </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td></tr><tr><td id='1011' style='font-weight: bold'> 10-11 </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>

这显示了“预订”约会的样子。

Answer 1

使用.index()获取包含所点击链接的td的列号。然后将其替换为选择器以在所有行中查找相同的列。

$("td a").click(function() {
    var col = $(this).closest("td").index()+1; // +1 because :nth-child is 1-based
    $(this).closest("table").find("td:nth-child("+col+") a.booked").each(function() {
        // do something with the booked anchors
    });
});

如果您只想计算预订商品的数量，则不需要循环，只需使用.length。

$("td a").click(function() {
    $(this).addClass("booked");
    var col = $(this).closest("td").index()+1; // +1 because :nth-child is 1-based
    var booked = $(this).closest("table").find("td:nth-child("+col+") a.booked");
    if (booked.length > 3) {
        alert("Too many items booked for " + $(this).closest("table").find("tr:first td:nth-child("+col+")").text());
    }
});

Answer 2

这是我对我的问题的解决方案，感谢来自@barmer的指针，我已经能够更好地理解jQuery了。请随时改进我的答案（尤其是超长if语句）。

        var clickedDoctorId = clickedApp.attr("id").slice(-1);
        var col = $(clickedApp).closest("td").index()+1; //gets the column index of the clicked appointment.
        var booked = $(clickedApp).closest("table").find("td:nth-child("+col+") a.booked"); //gets any booked appointments in the clicked column
        var bookedAppArray = [];

        booked.each(function() {
            //compares the doctor Id of each booked appointment in the selected column, with the clicked doctorId
          if(($(this).attr("id")).slice(-1) == clickedDoctorId){

              //appointment row index of appointment booked for the same doctor as the click:
              var appRowIndex = $(this).closest('tr')[0].sectionRowIndex;
              //add booked appointment index to the array:
              bookedAppArray.push(appRowIndex);
          }
        });

        var clickedAppRowIndex = $(clickedApp).closest('tr')[0].sectionRowIndex;
        //alert(clickedAppRowIndex);

        //check if array contains 3 value before, or 3 values after the clicked appointment:
        if((clickedAppRowIndex - 1 in bookedAppArray && clickedAppRowIndex - 2 in bookedAppArray && clickedAppRowIndex - 3 in bookedAppArray) || (clickedAppRowIndex + 1 in bookedAppArray && clickedAppRowIndex + 2 in bookedAppArray && clickedAppRowIndex + 3 in bookedAppArray))  {
            return true;
        }

jquery迭代表中的单元格列

2 个答案: