javascript - 可点击的表格单元格 - 基于单元格内容的不同下拉列表

Question

下表中的每个单元格均由 php/mysql 生成(通过日期 foreach 员工的 循环 生成的单元格。除标题外，每个单元格均可单击.

当用户单击某个单元格时，我希望出现一个下拉框，其中包含许多选项，具体取决于单元格中是否有移位。

目前，如果我单击任何员工行上的空单元格，它将在第一个员工的第一个空单元格中打开下拉列表。

如何以动态方式命名或识别这些下拉列表，以便 JavaScript 函数为正确的单元格打开正确的下拉列表？

我知道使用数组/列表是最合适的，但不知道如何让js来识别它。

底部的时间表的完整代码将放置:

echo "<td onclick='myFunction()' class='dropbtn'>";
echo "<div class='dropdown'>";
echo "<div id='dropdown' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
echo "</td>;

作为员工行上的每个空单元格(不是未分配的单元格)。

Javascript:

function myFunction() {
    document.getElementById("dropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

PHP生成时间表

$week = $_POST['week'];
$year = $_POST['y'];

for($i=0;$i<7;$i++){  
$gendates = new DateTime();
$gendates->setISODate($year,$week,1 + $i); 
$datesarray[$i] = $gendates->format('Y-m-d'); 
}

echo "<table class='editweektable'><tr>";
    echo "<th>Employee</th>";
        foreach($datesarray as $key => $date){
            echo "<th>".date("D", strtotime($date))."<br>".date("d-m", strtotime($date))."</th>";
        }
    echo "</tr>";

    $getunassigned->execute();
    while($row = $getunassigned->fetch(PDO::FETCH_ASSOC)){

        echo "<tr><td>Unassigned</td>";
            foreach($datesarray as $key => $date){
                echo "<td>";
                if($row['date'] == $date){
                    echo date("H:i", strtotime($row['starttime']))." - ".date("H:i", strtotime($row['finishtime']));
                } else { 
                    //empty cell 
                }
                echo "</td>";
            }
        echo "</tr>";
    }

    $getemployees->execute();

    while($row1 = $getemployees->fetch(PDO::FETCH_ASSOC)){

        echo "<tr><td>".$row1['fname']." ".$row1['lname']."</td>";
            foreach($datesarray as $key => $date){
            echo "<td  onclick='myFunction()' class='dropbtn'>";
            $eid = $row1['eid'];
            $getemployeeshifts->execute();
            $row2 = $getemployeeshifts->fetch(PDO::FETCH_ASSOC);
            $count = $getemployeeshifts->rowCount();
            if($count == 0){
                echo "<div class='dropdown'>";
                echo "<div id='myDropdown' class='dropdown-content'>";
                echo "<a href='#'>Link 1</a>";
                echo "<a href='#'>Link 2</a>";
                echo "<a href='#'>Link 3</a>";
                echo "</div>";
                echo "</div>";

            } else {
                echo date("H:i", strtotime($row2['starttime']))." - ".date("H:i", strtotime($row2['finishtime']));
            }


            echo "</td>";
            }
        echo "</tr>";    
    }
    echo "</table>";

Answer 1

我将动态生成的下拉列表的 ID 更改为与单元格相关的内容(日期和员工)

echo "<div class='dropdown'>";
echo "<div id='MyDropdown".$eid.$date."' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";

然后是 JavaScript

function myFunction(eid, date) {
    document.getElementById("MyDropdown"+eid+date).classList.toggle("show");
}