javascript - 使用Javascript在ARRAY中获取PHP变量时出现问题

Question

This question already has answers here:

How to alert inline of button
                            
                                （4个答案）
                            
                    
                    
                         How to get innerHTML of this element in javascript?
                            
                                （2个答案）
                            
                    
                    
                         JavaScript - onClick to get the ID of the clicked button
                            
                                （15个答案）
                            
                    
                上个月关闭。
        

    

我在显示PHP变量时遇到问题。
T[1]代表表中的用户名。我想做的是，当我单击某人的名字时，它会在警报上显示该名字。但是，尽管JS函数位于循环内，但我的警报仅在表上显示第一个用户名。

<? 
while($T=mysql_fetch_array($res))
    {
        echo' <tr>      
            <td><img src="data:image/jpeg;base64,'.base64_encode($T[0]).'" class="rounded-circle" height="40" width="40"  />
                <b id="myP" onclick="myFunction()">'.$T[1].'</b></td>
            <td><b>'.$T[2].'</b></td>
            <td><b>'.$T[3].'</b></td>
            <td><b>'.$T[4].'</b></td>
        </tr>

                <script>
    function myFunction() {
  x = document.getElementById("myP").innerHTML;
    alert(x);
    }
</script>

 ' ;
        } 
            ?>  

最佳答案

html中的id attribute应该是唯一的。该php循环将产生具有相同id的多个元素：myP。当您需要多个元素被同一个“ id”引用时，请使用classes而不是ID。例如，class="myP"。

另外，由于您的JavaScript也在该php循环内，因此相同的javascript <script>标记将多次嵌入html中。您不需要多个JavaScript脚本即可完成所要尝试的操作。

这是单个客户端脚本的示例，如果其元素为类myP（使用getElementsByClassName，forEach和addEventListener），则该脚本将为每个元素提醒单元格内容：

// Get an array of all elements of class "myP":
let aryMyP = [... document.getElementsByClassName("myP")];

// Add an event listener to each element aquired:
aryMyP.forEach(function(myP)
{
  myP.addEventListener('click', function()
  {
    alert("You clicked " + myP.innerText);
  });
});

table, th, td {
  border: 1px solid black;
}

<p>Click the first cell in any row:</p>
<table>
  <tr>
    <td class="myP">Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
    <td>Row 1 Cell 3</td>
    <td>Row 1 Cell 4</td>
  </tr>
   <tr>
    <td class="myP">Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
    <td>Row 2 Cell 3</td>
    <td>Row 2 Cell 4</td>
  </tr>
<table>

关于javascript - 使用Javascript在ARRAY中获取PHP变量时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60625884/

上一篇：javascript - (节点:28917) UnhandledPromiseRejectionWarning: TypeError: data is not iterable

下一篇：javascript - 如何动态调用单元格而不是调用相同的单元格

Answer 1

html中的id attribute应该是唯一的。该php循环将产生具有相同id的多个元素：myP。当您需要多个元素被同一个“ id”引用时，请使用classes而不是ID。例如，class="myP"。

另外，由于您的JavaScript也在该php循环内，因此相同的javascript <script>标记将多次嵌入html中。您不需要多个JavaScript脚本即可完成所要尝试的操作。

这是单个客户端脚本的示例，如果其元素为类myP（使用getElementsByClassName，forEach和addEventListener），则该脚本将为每个元素提醒单元格内容：

// Get an array of all elements of class "myP":
let aryMyP = [... document.getElementsByClassName("myP")];

// Add an event listener to each element aquired:
aryMyP.forEach(function(myP)
{
  myP.addEventListener('click', function()
  {
    alert("You clicked " + myP.innerText);
  });
});

table, th, td {
  border: 1px solid black;
}

<p>Click the first cell in any row:</p>
<table>
  <tr>
    <td class="myP">Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
    <td>Row 1 Cell 3</td>
    <td>Row 1 Cell 4</td>
  </tr>
   <tr>
    <td class="myP">Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
    <td>Row 2 Cell 3</td>
    <td>Row 2 Cell 4</td>
  </tr>
<table>