How do i dynamically assign table IDs?

Question

I am writing a PHP script which is running a for loop. I am creating multiple tables inside the loop and i want to dynamically name the tables based on the loop.

I have already tried the following code but it doesn't work:

<table id="gameweek_history<? echo $i; ?>">
<script>function doCSV<? echo $i; ?>() {
    var table1 = document.getElementById("gameweek_history<? echo $i; ?>").innerHTML;
<button onclick="doCSV(<? echo $i; ?>)">Export HTML Table To CSV File</button>

Could you please explain to me what i need to change ?

_tried the following code but it doesn't work_ - What didn't work? What were the error conditions? How did it fail? How do you know it didn't work? Please review: [How to Ask](https://stackoverflow.com/help/how-to-ask) — Randy Casburn, May 26 '19 at 15:50
@Randy i apologize for not clarifying what did not work. When i click on the buttons, the file does not get downloaded. Could you clarify which php tags you are referring to? — Zain, May 26 '19 at 16:16
` echo $i; >` is _**likely to be**_ not valid syntax for your installation of PHP. You can find the correct syntax on [this page](https://php.net/manual/en/function.echo.php). You can find a related question here: https://stackoverflow.com/questions/2020445/what-does-mean-in-php — Randy Casburn, May 26 '19 at 16:27

score 0 · Answer 1 · answered May 26 '19 at 15:50

<?php

$count = 3;
for($i=0; $i<$count; $i++) {

?>

    <table id ="gameweek_history<?php echo $i; ?>">

            <script>function doCSV<?php echo $i; ?>() {
            var table1 = document.getElementById("gameweek_history<?php echo $i; ?>").innerHTML;

            <button onclick="doCSV(<?php echo $i; ?>)">Export HTML Table To CSV File</button>
    </table>

<?php
}
?>

gives output:

<table id ="gameweek_history0">

            <script>function doCSV0() {
            var table1 = document.getElementById("gameweek_history0").innerHTML;

            <button onclick="doCSV(0)">Export HTML Table To CSV File</button>
    </table>


    <table id ="gameweek_history1">

            <script>function doCSV1() {
            var table1 = document.getElementById("gameweek_history1").innerHTML;

            <button onclick="doCSV(1)">Export HTML Table To CSV File</button>
    </table>


    <table id ="gameweek_history2">

            <script>function doCSV2() {
            var table1 = document.getElementById("gameweek_history2").innerHTML;

            <button onclick="doCSV(2)">Export HTML Table To CSV File</button>
    </table>

You can do this, but why would you want to do it that way? Why create a separate function for every table if they all do the same? — Andreas, May 26 '19 at 15:52

score 0 · Answer 2 · answered May 26 '19 at 15:51

0

You should remove the PHP code from your javascript. Write it this way:

<script>function doCSV(i) {
   var table1 = document.getElementById("gameweek_history"+i).innerHTML;
   // do something here with table1
</script>

<table id ="gameweek_history<? echo $i; ?>">
<button onclick="doCSV(<? echo $i; ?>)">Export HTML Table To CSV File</button>

answered May 26 '19 at 15:51

Scott Flodin

320
1
5

2

Or move the button "into" the table (e.g. in the ``). This way you already "know" the table and don't need any ids at all. – Andreas May 26 '19 at 15:54

How do i dynamically assign table IDs?

2 Answers2