Filling an html table through javascript

Question

This is a project for uni for PHP/JavaScript. The concept is that we create an empty table, then get an input from the user and put this text in the odd lines of the table. Thing is, I've created the table and I can't get to pass the text to multiple paragraphs located inside the cells of the odd lines. I tried with getElementById to fill the cell's paragraph but I found out that each paragraph needs a unique id and so it fills only the first cell. Then I tried getElementsByClassName but this doesn't work cause there's no .innerHTML for it. Basically, all I want to do is take the same input and distribute it to multiple paragraphs or directly to the cells if there's a way. Code is at the bottom. The script doesn't work right now, I just left it in.

Thank you

<body>

    <p class="p1">5th excercise Php</p><br><br><br>
    <input type="button" id="btn" value="Give Input"><br><br>
    <?php
    echo "<table>"; 

for($i=1;$i<=10;$i++){ 

    echo "<tr>"; 
        for($j=1;$j<=10;$j++){
            if($i % 2 == 0){
               echo "<td style='background-color:green;color:green;'>"."<p>"."."."</p>"."</td>";
                }
            else{
                echo "<td style='background-color:red; color:red;'>"."<p>"."."."</p>"."</td>";
            }
        } 
    echo "</tr>"; 
} 

echo "</table>";
    ?>
<script>
document.getElementById("btn").onclick= function(){f()}
function f(){
    var x= prompt("Give input");
    document.getElementById("").style.color = "black";
    document.getElementById("").innerHTML= x;

}
</script>
</body>

ChrisM · Accepted Answer · 2019-11-27 21:13:41Z

Since this is a homework assignment from school, I won't share any code samples.

Solution 1: I would consider that the php loop already knows which rows are odd and even, so leveraging this with a class attribute would be easy enough.

Then use getElementsByClassName() to create a variable that can be iterated over in the javascript to fill in the values.

Solution 2: Use getElementsByTagName() in your javascript to iterate over the TR's and calculate which rows are even or odd and make changes accordingly to the TD elements within .

This requires more work but will teach you more about how the getElement-style functions work.

seasick · Accepted Answer · 2019-11-27 20:44:13Z

0

You could add an id element to your paragraphs like this

"<p id='id_{$j}'>"

The 'id_{$j}' part will lead to to strings like id_0, id_1, etc.

Then you'd have to iterate through all columns in the JavaScript part and using those ids to set their innerHtml.

answered Nov 27, 2019 at 20:44

seasick

4461 gold badge4 silver badges19 bronze badges

Comments

pom421 · Accepted Answer · 2019-11-27 21:44:30Z

The difficulty you can meet, is that getElementByClassName renders an HTMLCollection, that is a pseudo collection but not something you can easily iterates over.

But you can steal (JS power!) the behavior of Array to that purpose. Like that:

  const allCells = document.getElementsByClassName("first");

  Array.prototype.forEach.call(allCells, function(elt) {
    elt.innerHTML = choice;
  });

So you just have to add a class name ("first" in my example) in the table cell you want (= the odd lines cells).

Zeshan · Accepted Answer · 2019-11-28 00:07:38Z

This can be achieved in different ways. Here i am giving you simple solution which simply add two classes even and odd in paragraph tag and using querySelector we can get all odd rows and add innerHtml easily.

document.getElementById("btn").onclick = function() {
  f()
}

function f() {
  var x = prompt("Give input");

  document.querySelectorAll('.odd').forEach(p => {
    p.innerHTML = x;
    p.style.color='black';
  });

}

<body>

  <p class="p1">5th excercise Php</p><br><br><br>
  <input type="button" id="btn" value="Give Input"><br><br>
  <table>
    <tr>
      <td style='background-color:green;color:green;'>
        <p class='even'></p>
      </td>
    </tr>
    <tr>
      <td style='background-color:red;color:red;'>
        <p class='odd'></p>
      </td>
    </tr>
      <tr>
      <td style='background-color:green;color:green;'>
        <p class='even'></p>
      </td>
    </tr>
    <tr>
      <td style='background-color:red;color:red;'>
        <p class='odd'></p>
      </td>
    </tr>
      <tr>
      <td style='background-color:green;color:green;'>
        <p class='even'></p>
      </td>
    </tr>
    <tr>
      <td style='background-color:red;color:red;'>
        <p class='odd'></p>
      </td>
    </tr>
  </table>


</body>

Here i have removed php code as i am not aware how to add it on stackoverflow but you can add your rows using php and it will work for you.

Collectives™ on Stack Overflow

Filling an html table through javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related