Data transfer to the correct table row

December 8, 2021

so let me start from the beginning Two timers one timer is where u select when the meeting starts and one where u select the ending of the meeting, i also have a table.

first of all both timers are in another html so I used LocalStorage to get the values of the timers here on the Main html

Now the table it made from 14 rows and 3 columns
First column is with hours starting from 07:00 AM and ending at 20:00 PM
Second column will be filled with names of the meetings
And third column will be filled with the duration of the meeting

I also have a for that reads all the table column values and if it finds the same time as the time entered in the starting hour timer should add the duration of the meeting in on the third column with the id"ora",

and works fine but when it adds the meeting duration it always added on the first row !
So I need that he puts the duration of the meeting in the same row as the
Starting Hour.

Please help !

Here is the code :

  <table id="tbl-1">
              <tr id="07:00">
                <td class="time">07:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="08:00">
                <td class="time">08:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="09:00">
                <td class="time">09:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="10:00">
                <td class="time">10:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="11:00">
                <td class="time">11:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="12:00">
                <td class="time">12:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="13:00">
                <td class="time">13:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="14:00">
                <td class="time">14:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="15:00">
                <td class="time">15:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="16:00">
                <td class="time">16:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="17:00">
                <td class="time">17:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="18:00">
                <td class="time">18:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="19:00">
                <td class="time">19:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="20:00">
                <td class="time">20:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
            </table>

<script>
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);

var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;

for (var i = 1; i < numRows; i ++) {
    var ID = tbl.rows[i].id;
    var cells = tbl.rows[i].getElementsByTagName('td');
    for (var ic=0,it=cells.length;ic<it;ic++) {

      if (y == cells[ic].innerHTML) {
        document.getElementById("ora").innerHTML=x;
      }
       console.log(cells[ic].innerHTML)
    }
}

>Solution :

This is because you are duplicating the same id everywhere.
You can select the 3rd TD per startT(y) by a single selector:

`tr[id="${y}"] td:nth-child(3)`

Try now to Run example below & enjoy a single LINE javascript!

var y= prompt('What is start time?','09:00');

document.querySelector(`tr[id="${y}"] td:nth-child(3)`).innerHTML = 'SELECTED'

<table id="tbl-1">
              <tr id="07:00">
                <td class="time">07:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="08:00">
                <td class="time">08:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="09:00">
                <td class="time">09:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="10:00">
                <td class="time">10:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="11:00">
                <td class="time">11:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="12:00">
                <td class="time">12:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="13:00">
                <td class="time">13:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="14:00">
                <td class="time">14:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="15:00">
                <td class="time">15:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="16:00">
                <td class="time">16:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="17:00">
                <td class="time">17:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="18:00">
                <td class="time">18:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="19:00">
                <td class="time">19:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
              </tr>
              <tr id="20:00">
                <td class="time">20:00</td>
                <td id="nume"></td>
                <td id="ora"></td>
            </table>