Question

下表中的每个单元格，由php / mysql生成（由loop生成的单元格通过日期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");
}

Answer 2

永远不要复制元素的id并解决DOM元素的引用，你可以将它传递给函数：）

更新：添加了在线示例：https://jsfiddle.net/gdn5mfvo/

示例表，不要重复ID

<table style="width:500px">
  <tr>
    <td onclick='myFunction(this)' class='dropbtn'>
        <div class='dropdown hide'>
            <div id='myDropdown1' class='dropdown-content'>
                <a href='#'>Link 1</a>
                <a href='#'>Link 2</a>
                <a href='#'>Link 3</a>
            </div>
        </div>
        click here
    </td>
    <td onclick='myFunction(this)' class='dropbtn'>
        <div class='dropdown hide'>
            <div id='myDropdown2' class='dropdown-content'>
                <a href='#'>Link 1</a>
                <a href='#'>Link 2</a>
                <a href='#'>Link 3</a>
            </div>
        </div>
        click here
    </td>    
  </tr>
</table>

示例JS

<script>
    function myFunction(elem) {
        // elem points to the td clicked
        // elem.firstChild.nextSibling refernce to <div class='dropdown hide'> of the clicked td
        console.log(elem.firstChild.nextSibling.classList.toggle('hide'));
    }
</script>

示例css

<style>
    table, th, td {
       border: 1px solid black;
       height:10px;
    }
    .hide{
    display:none;
    }
</style>

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

2 个答案: