php循环的Javascript函数

Question

I have this situation:

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById("commentDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

and the php code

<?php
echo "<table><tr  onclick='myFunction()'><td>Row A1</td></tr>"; //A1 row from my table
echo "<tr><td><div id='commentDIV' style='display:none'> Row B1</div></td></tr></table>"; // the B1 row show after click on the A1
?>

Everything works fine, when I click on the first row, the second appearance.

How can I use/modify my javascript function in this situation?

<?php
    $x=0;
    while($x<10){
        echo "<table><tr  onclick='myFunction()'><td>Row A$x</td></tr>"; //Ax row from my table
        echo "<tr><td><div id='commentDIV' style='display:none'> Row B$x</div></td></tr></table>"; // the Bx row must show after click on the Ax
        $x++;
    }
?>

Please help and save my day! Many thanks!

Answer 1

The problem is that you are using the same id "commentDIV" for all Divs so you should change the loop and function.

1. Add $x to div id originally known as commentDIV
2. Change the myFunction call to include the $x number
3. Add the id argument to the myFunction definition
4. Append the passed id to the getElementById value

Like this:

<?php 
$x=0;
while($x<10){
  echo "<table><tr  onclick='myFunction($x)'><td>Row A$x</td></tr>";
  //                                    ^^--- 2. add $x
  echo "<tr><td><div id='commentDIV_$x' style='display:none'> Row B$x</div></td></tr></table>";
  //                               ^^^--- 1. add $x
$x++;}
?>

The javascript code changes to this:

<script type="text/javascript">
    function myFunction(id) {
         //             ^^--- 3. add id
         var x = document.getElementById("commentDIV_" + id);
         //                                         ^ ^^^^^--- 4. append id
         if (x.style.display === "none") {
            x.style.display = "block";
         } else {
            x.style.display = "none";
         }
    }
</script>

Answer 2

id attribute should be unique at the document, try to change the duplicate ones by common classes like :

<?php
    $x=0;
    while($x<10){
        echo "<table><tr  onclick='myFunction(this)'><td>Row A$x</td></tr>"; //Ax row from my table
        echo "<tr><td><div class='commentDIV' style='display:none'> Row B$x</div></td></tr></table>"; // the Bx row must show after click on the Ax
        $x++;
    }
?>

NOTE: You should pass the 'this' object as an argument to your function.

Then in your js, you could use the passed argument to search for the related div using the class name self.nextElementSibling.querySelector(".commentDIV") and finally toggle the display like :

 function myFunction(self) { var related_div = self.nextElementSibling.querySelector(".commentDIV"); related_div.style.display = (related_div.style.display === 'none') ? 'block' : 'none' } 

 <table border=1> <tr onclick='myFunction(this)'> <td>Row A1</td> </tr> <tr> <td> <div class='commentDIV' style='display:none'> Row B1</div> </td> </tr> <tr onclick='myFunction(this)'> <td>Row A2</td> </tr> <tr> <td> <div class='commentDIV' style='display:none'> Row B2</div> </td> </tr> </table> 

Answer 3

First of all, IDs need to be unique to function properly, so I would rather use classes.

As stated, this table will be echoed 10 times:

<table>
  <tr onclick="myFunction(this)">
    <td>Row A$x</td>
  </tr>
  <tr>
    <td>
      <div class="commentDIV" style="display:none">Row B$x</div>
    </td>
  </tr>
</table>

Next, modify the javascript such that the element gets passed as a parameter, then get the first child of the next element:

function myFunction(e) {
  var x = e.nextElementSibling.children[0];
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}