Can't get the values of my table (getElementById not working)

I'm trying to get a line of a dynamic table once the " reserver" button is clicked (or the line itself is clicked 'if that matters')but the 'getElementById' doesn't return anything ( i want to display them in an input) here is the code

HTML / PHP

<div class="form1">
            <div>
            <label>Code creneau1</label>
            <input type="text" id="nop" name='nop'>
            <label>Code creneau2</label>
            <input type="text" id="seh" name='seh'>
            <label>Code creneau3</label>
            <input type="text" id="row" name='row'>
            <label>Code creneau4</label>
            <input type="text" id="name" name='name'>
            
            </div>
        <table class="table table-striped" id="res">
        <thead>
            <tr>
                <th>code salle</th>
                <th> type </th>
                <th>etage</th>
                <th>capacité</th>
                <th> action</th>
                
                
            </tr>
        </thead> 
 <tbody><?php
        while ($donnees = $requete->fetch() and $donnees2 = $requete2->fetch())
                 {
                    $donnees_ar=$_POST['date'];
                    $code_cr=$_POST['heure'];
                // echo $donnees2['id_res'].'<br>';
              
            
                 if($donnees['code_salle']!=$donnees2['code_salle'] and $donnees2['date_res']=$_POST['date']){
 echo "<tr id='try'>

                <td >".$donnees['code_salle']."</td>
                <td >".$donnees['type_salle']."</td>
                <td >".$donnees['capacity']."</td>
                <td >".$donnees['etage']."</td>
                
                <td>
                  <a href='#0' id='he' class='cd-popup-trigger'>reserver</a>
                </td> 
            </tr>";
          }
        }; 
      }
         ?>

the JS

    <script src="js/main.js"></script>
   <script>
        var tbl= document.getElementById("res");
        for(var x=1;x<tbl.rows.length;x++ ){
            tbl.rows[x].onclick =function {
               document.getElementById('name').value=this.cells[0].innerHTML;
               document.getElementById('row').value=this.cells[1].innerHTML;
               document.getElementById('seh').value=this.cells[2].innerHTML;
               document.getElementById("nop").value=this.cells[3].innerHTML;

            }
        }
    </script>

1 answer

  • answered 2022-05-04 10:41 Shayan Faghani

    You have been declared the JavaScript inside the JS file itself. in this case, The JS file Won't run for your HTML and won't affect anything written in your HTML. Also, you have declared your onClick function in the wrong way. To do this, you need to move the tag inside your HTML. For a better demonstration:

    var table= document.getElementById("res");
    
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                tableText(this);
            };
        }
    }
    
    function tableText(tableCell) {
        alert(tableCell.innerHTML);
    }
    <div class="form1">
                <div>
                <label>Code creneau1</label>
                <input type="text" id="nop" name='nop'>
                <label>Code creneau2</label>
                <input type="text" id="seh" name='seh'>
                <label>Code creneau3</label>
                <input type="text" id="row" name='row'>
                <label>Code creneau4</label>
                <input type="text" id="name" name='name'>
                
                </div>
            <table class="table table-striped" id="res">
            <thead>
                <tr>
                    <th>code salle</th>
                    <th> type </th>
                    <th>etage</th>
                    <th>capacité</th>
                    <th> action</th>
                    
                    
                </tr>
            </thead> 
     <tbody>
     <?php
            while ($donnees = $requete->fetch() and $donnees2 = $requete2->fetch())
                     {
                        $donnees_ar=$_POST['date'];
                        $code_cr=$_POST['heure'];
                    // echo $donnees2['id_res'].'<br>';
                  
                
                     if($donnees['code_salle']!=$donnees2['code_salle'] and $donnees2['date_res']=$_POST['date']){
     echo "<tr id='try'>
    
                    <td >".$donnees['code_salle']."</td>
                    <td >".$donnees['type_salle']."</td>
                    <td >".$donnees['capacity']."</td>
                    <td >".$donnees['etage']."</td>
                    
                    <td>
                      <a href='#0' id='he' class='cd-popup-trigger'>reserver</a>
                    </td> 
                </tr>";
              }
            }; 
          }
             ?>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum