how to change values in a table cell with a slider in HTML

Question

I have a table with data in it in HTML and I want to change the data in each cell by adding the value from a slider when it's used by a user. i wanna take the numeric value displayed from the slider and add/subtract to the numeric values of the table rows. So far i have the table and the slider, but i have no idea how to add/subtract the value i get from the slider to the data already in the table.

 function show_value2(x){ document.getElementById("slider_value2").innerHTML=x; }

 <body onload="main()"> <div class="slidecontainer"> Орбитална обикола:<span id="slider_value2" style="color:red;font-weight:bold;"></span><br> <input type="range" min="-50" max="50" step="10" name="slide" value="0" onchange="show_value2(this.value)"> </div> <table border = "1"> <tr> <th>Планета </th> <th>Орбитален обикколка (AU) </th> <th>Средна температура на повърхността(C<sup>o</sup>) </th> <th>Орбитален период (дни) </th> </tr> <tr> <td>Меркурий</td> <td>2,406</td> <td>166,85</td> <td>87</td> <tr/> <tr> <td>Венера</td> <td>4,545</td> <td>463,85</td> <td>244</td> </tr> <tr> <td>Земя</td> <td>6,283</td> <td>13,85</td> <td>365</td> </tr> <tr> <td>Марс</td> <td>9,553</td> <td>-63,15</td> <td>686</td> </tr> <tr> <td>Юпитер</td> <td>32,675</td> <td>-120,15</td> <td>4335</td> </tr> <tr> <td>Сатурн</td> <td>59,879</td> <td>-130,15</td> <td>10,757</td> </tr> <tr> <td>Уран</td> <td>120,515</td> <td>-205,15</td> <td>30,708</td> </tr> <tr> <td>Нептун</td> <td>188,925</td> <td>-220,15</td> <td>60,224</td> </tr> </table> </body>

Answer 1

The code below documents what needs to be done to update the cells with the slider value, but the one problem it doesn't solve that you'll have to work with is that the cells contain formatted non-US string values that don't convert to numbers using JavaScript's conversion techniques.

 // Get references to elements you'll use more than once, only once. let sliderValue = document.getElementById("slider_value2"); // Get all the rows in the table starting with row 2 let rows = document.querySelectorAll("table tr:nth-child(n+2)"); // Do your event binding in JavaScript, not with HTML event attributes like onchange // and in this case the input event is better because it fires immediately as the // element recieves input (you don't have to let go of the slider to see the updated // value). document.getElementById("slider").addEventListener("input", function(){ sliderValue.textContent = this.value; // Loop over all the rows in the table rows.forEach(function(row){ // Loop over all the cells in the row, starting with the second cell row.querySelectorAll("td:nth-child(n+2)").forEach(function(cell){ // Update the cell's content with the old content (converted to a floating // point number and the slider's current value (converted to a number). cell.textContent = parseFloat(cell.textContent) + +sliderValue.textContent; }); }); });

 /* Avoid inline styles. Apply classes instead */ #slider_value2 { color:red; font-weight:bold; }

 <body> <div class="slidecontainer"> Орбитална обикола:<span id="slider_value2">0</span><br> <input type="range" min="-50" max="50" step="10" id="slider" value="0"> </div> <table border = "1"> <tr> <th>Планета </th> <th>Орбитален обикколка (AU) </th> <th>Средна температура на повърхността(C<sup>o</sup>) </th> <th>Орбитален период (дни) </th> </tr> <tr> <td>Меркурий</td> <td>2,406</td> <td>166,85</td> <td>87</td> <tr/> <tr> <td>Венера</td> <td>4,545</td> <td>463,85</td> <td>244</td> </tr> <tr> <td>Земя</td> <td>6,283</td> <td>13,85</td> <td>365</td> </tr> <tr> <td>Марс</td> <td>9,553</td> <td>-63,15</td> <td>686</td> </tr> <tr> <td>Юпитер</td> <td>32,675</td> <td>-120,15</td> <td>4335</td> </tr> <tr> <td>Сатурн</td> <td>59,879</td> <td>-130,15</td> <td>10,757</td> </tr> <tr> <td>Уран</td> <td>120,515</td> <td>-205,15</td> <td>30,708</td> </tr> <tr> <td>Нептун</td> <td>188,925</td> <td>-220,15</td> <td>60,224</td> </tr> </table> </body>

Answer 2

The following should do it:

 function show_value2(x, prep=null){ let trs=[...document.querySelectorAll('table tr')]; trs.slice(1).forEach(tr=>[...tr.children].slice(1) .forEach(td=>{ if (prep) td.dataset.val=+td.textContent.replace(',','.') else td.textContent=(+td.dataset.val+x).toFixed(3) }) ) } show_value2(0,true);

 <div class="slidecontainer"> Орбитална обикола:<span id="slider_value2" style="color:red;font-weight:bold;"></span><br> <input type="range" min="-50" max="50" step="10" name="slide" value="0" oninput="show_value2(+this.value)"> </div> <table border = "1"> <tr> <th>Планета </th> <th>Орбитален обикколка (AU) </th> <th>Средна температура на повърхността(C<sup>o</sup>) </th> <th>Орбитален период (дни) </th> </tr> <tr> <td>Меркурий</td> <td>2,406</td> <td>166,85</td> <td>87</td> <tr/> <tr> <td>Венера</td> <td>4,545</td> <td>463,85</td> <td>244</td> </tr> <tr> <td>Земя</td> <td>6,283</td> <td>13,85</td> <td>365</td> </tr> <tr> <td>Марс</td> <td>9,553</td> <td>-63,15</td> <td>686</td> </tr> <tr> <td>Юпитер</td> <td>32,675</td> <td>-120,15</td> <td>4335</td> </tr> <tr> <td>Сатурн</td> <td>59,879</td> <td>-130,15</td> <td>10,757</td> </tr> <tr> <td>Уран</td> <td>120,515</td> <td>-205,15</td> <td>30,708</td> </tr> <tr> <td>Нептун</td> <td>188,925</td> <td>-220,15</td> <td>60,224</td> </tr> </table>

The function show_value2() can be called in two different ways:

called as show_value2(0,true) will set up the table by copying the current conts of each numeric table cell into the dataset property
called as show_value2(x) will add the numeric value x to the dataset.val property of each cell and put it into the cell again.

how to change values in a table cell with a slider in HTML

Question

2 answers

solution1
0 2020-09-10 15:06:35

solution2
0 2020-09-10 15:12:51

how to change values in a table cell with a slider in HTML

Question

2 answers

solution1 0 2020-09-10 15:06:35

solution2 0 2020-09-10 15:12:51

solution1
0 2020-09-10 15:06:35

solution2
0 2020-09-10 15:12:51