将PHP变量传递到表中的JavaScript函数

Question

I am trying to pass a variable from a table that was populated by a PHP query.

On each row of the table there are three buttons. One is a delete button that if clicked it will run a JavaScript alert which passes a variable to another PHP page where it is deleted from the database. The problem is when the button is clicked the variable passed is always the variable from the last row of the table. Not the row being clicked.

The code:

<table class="table table-bordered table-striped js-dataTable-full-pagination">
<?php while($row = mysqli_fetch_assoc($result)) { ?>
    <tr>
        <td class="text-center"><a href="/record.php?report=<?php echo $row['recordnumber']; ?>"><?php echo $row['recordnumber']; ?></a></td>
        <td class="font-w600"><?php echo $row["description"];?></td>
        <td class="hidden-xs"><?php echo $row["type"];?></td>
        <td class="hidden-xs"><?php echo $row["user"];?></td>
        <td class="hidden-xs"><?php echo $row["edate"];?></td>
        <td class="text-center">
            <a class="btn btn-xs btn-primary" href="/updaterecordform.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="Edit Record"><i class="fa fa-pencil"></i></a>
            <a class="btn btn-xs btn-danger" onclick="myFunction()" data-toggle="tooltip" title="Delete Prefix"><i class="fa fa-close"></i><script>
                function myFunction() {
                  swal({
                      title: 'Are you sure?',
                      text: 'You will not be able to recover this Record!',
                      type: 'warning',
                      showCancelButton: true,
                      confirmButtonColor: '#d26a5c',
                      confirmButtonText: 'Yes, delete it!',
                      closeOnConfirm: false,
                      html: false
                  }, function () {
                      window.location.href = 'deleterecord.php?id=<?php echo $row['recordnumber']; ?>'
                  });
                }
                </script></a>
            <a class="btn btn-xs btn-primary" href="/record.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="View Details"><i class="fa fa-list-ul"></i></a>
        </td>
    </tr>
<?php } ?>
</table>

Answer 1

The while($row = mysqli_fetch_assoc($result)) loop declares the javascript function myFunction a number of times, all with the same name. Like this

<?php while($row = mysqli_fetch_assoc($result)) { ?>
    <script>
    function myFunction() {} // this function name is repeated in the while loop
    <script>
<?php } ?>

Functions cannot have the same name. The simplest solution is to use different names.

<td class="text-center">
    <a class="btn btn-xs btn-primary" href="/updaterecordform.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="Edit Record"><i class="fa fa-pencil"></i></a>
    <a 
        class="btn btn-xs btn-danger" 
        onclick="myFunction<?php echo $row["recordnumber"];?>()" // <-- edited line
        data-toggle="tooltip" title="Delete Prefix"
    >
    <i class="fa fa-close"></i>
        <script>
            function myFunction<?php echo $row["recordnumber"];?>() { // <-- edited line
              swal({
                  title: 'Are you sure?',
                  text: 'You will not be able to recover this Record!',
                  type: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#d26a5c',
                  confirmButtonText: 'Yes, delete it!',
                  closeOnConfirm: false,
                  html: false
              }, function () {
                  window.location.href = 'deleterecord.php?id=<?php echo $row['recordnumber']; ?>'
              });
            }
        </script></a>
    <a class="btn btn-xs btn-primary" href="/record.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="View Details"><i class="fa fa-list-ul"></i></a>
</td>

A better and also simple solution is to use recordnumber as function parameter

<td class="text-center">
    <a class="btn btn-xs btn-primary" href="/updaterecordform.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="Edit Record"><i class="fa fa-pencil"></i></a>
    <a 
        class="btn btn-xs btn-danger" 
        onclick="myFunction(<?php echo $row["recordnumber"];?>)" 
        data-toggle="tooltip" title="Delete Prefix"
    >
    <i class="fa fa-close"></i>
    <a class="btn btn-xs btn-primary" href="/record.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="View Details"><i class="fa fa-list-ul"></i></a>
</td>

Where you put the javascript function outside the while loop so that it is not repeated

<script>
function myFunction(recordnumber) {
  swal({
      title: 'Are you sure?',
      text: 'You will not be able to recover this Record!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d26a5c',
      confirmButtonText: 'Yes, delete it!',
      closeOnConfirm: false,
      html: false
  }, function () {
      window.location.href = 'deleterecord.php?id=recordnumber';
  });
}
</script></a>

Answer 2

The answer is simple, you call you function myFunction() for ALL elements of your table.

Then when you call myFunction() which one must be executed ? Javascript decide to execute the last one.

You must refactor this code by using data-id on each element and call just ONE function that use this id.