如何在html中使用滑块更改表格单元格的值



我有这个项目,其中有一个表,我希望能够使用滑块更改单元格的数值。示例:当滑块设置为10时,包含数字的单元格的值应更改为已输入的值+10,或滑块所在的任何值。带有非美国文本的sales应保持原样。我似乎无法编写一个函数来获取滑块的值并将该值添加到表单元格中。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Другата Слънчева Система</title>

<!-- Зареждане на библиотеката и стиловете -->
<script src="suica.min.js"></script>
<link rel="stylesheet" type="text/css" href="Solar.css">

<!-- основен код -->
<script>


//главна функция, инициализира графичните обекти 
function main()
{

//построяване на полето за рисуване
p = new Suica();
background([0,0,0.35]);
//demo(1200,1,0.5);

orbit = document.getElementById('orbit');
var r = orbit;

//построяване на слънцето
star = sphere([0,0,0],30);
star.image = new Suica.Image('2k_sun.jpg');
star.image.scale = [1,1];
star.light = true;
//построяване на меркурий
planet1 = sphere([0,0,0],6);
circle([0,0,0],45).custom({mode:Suica.LINE});
planet1.image = new Suica.Image('2k_mercury.jpg');
planet1.image.scale = [1,1];

//построяване на венера
planet2 = sphere([0,0,0],8);
circle([0,0,0],75).custom({mode:Suica.LINE});
planet2.image = new Suica.Image('2k_venus_atmosphere.jpg');
planet2.image.scale = [1,1];

//построяване на земя
planet3 = sphere([0,0,0],14);
circle([0,0,0],130).custom({mode:Suica.LINE});
planet3.image = new Suica.Image('2k_earth_daymap.jpg');
planet3.image.scale = [1,1];

//построяване на луната
moon1 = sphere([0,0,0],6);
moon1.image = new Suica.Image('2k_moon.jpg');
moon1.image.scale = [1,1];

//построяване ма марс
planet4 = sphere([0,0,0],12);
circle([0,0,0],190).custom({mode:Suica.LINE});
planet4.image = new Suica.Image('2k_mars.jpg');
planet4.image.scale = [1,1];

//построяване на юпитер
planet5 = sphere([0,0,0],25);
circle([0,0,0],280).custom({mode:Suica.LINE});
planet5.image = new Suica.Image('2k_jupiter.jpg');
planet5.image.scale = [1,1];

//построяване на сатурн
planet6 = sphere([0,0,0],22);
circle([0,0,0],340).custom({mode:Suica.LINE});
planet6.image = new Suica.Image('2k_saturn.jpg');
planet6.image.scale = [1,1];

//построяване на уран
planet7 = sphere([0,0,0],18);
circle([0,0,0],400).custom({mode:Suica.LINE});
planet7.image = new Suica.Image('2k_uranus.jpg');
planet7.image.scale = [1,1];

//построяване на нептун
planet8 = sphere([0,0,0],16);
circle([0,0,0],460).custom({mode:Suica.LINE});
planet8.image = new Suica.Image('2k_neptune.jpg');
planet8.image.scale = [1,1];


p.nextFrame = loop;
lookAt( [1500,0,900], [0,0,0], [0,0,1] );
}
//виж лекция 14 движение по дъга
function loop()
{
t = Suica.time;
planet1.center = [(45)*Math.cos(t*3,5),(45)*Math.sin(t*3,5),0];

planet2.center = [75*Math.cos(t*2.5),75*Math.sin(t*2.5),0];

planet3.center[1] = (130)*Math.sin(t*2);
planet3.center[0] = (130)*Math.cos(t*2);

moon1.center[0] = planet3.center[0] + 30*Math.cos(4*t);
moon1.center[1] = planet3.center[1] + 30*Math.sin(4*t);

planet4.center = [190*Math.cos(t*1.1),190*Math.sin(t*1.1),0];

planet5.center = [280*Math.cos(t*0.8),280*Math.sin(t*0.8),0];

planet6.center = [340*Math.cos(t*0.6),340*Math.sin(t*0.6),0];

planet7.center = [400*Math.cos(t*0.4),400*Math.sin(t*0.4),0];

planet8.center = [460*Math.cos(t*0.2),460*Math.sin(t*0.2),0];
}
//функция за проверка на отговора от задача 1
function comp()
{
var n1 = Number(document.getElementById('num1').value);
if (n1 > 4000 && n1 < 5000)
{
alert('Правилен отговор!');
return true;
}
else
{ 
alert('Грешен отговор!');
return false;
}
}
function show_value2(x)
{
document.getElementById("slider_value2").innerHTML=x;
}

</script>   
</head>
<body onload="main()">
<!--Заглавие и подзаглавие --> 
<h1>Другата слънчва система</h1>
<h4>Пламен Николаев Велков, Матматика и Информатика задочно, Факултетен № 50449</h4>
<br>

<h3>
Слънчевата система е съставена от астрономически обекти.В средата й се намира Слънето, а около него кръжат небесн тела.
Те включват планетите, планети джуджета, спътници, астероиди, комете, междупланетарен прах и газ.Всички те включително и Слънето
около което обикалят са се сформирали преди около 4,6 милярда години при разпадането на молекулярен облак.
<br>
Осемте планети заемат основната част от масата в слънчевата система. Те обикалят около Слънето в почти кръгови орбити, които лежат на приблизително една равнина - еклиптика.
Планетите се разделят на два основни типа: газови гиганти и планети от земен тип. Вътрешните четири планети са по-малки и са от земен тип, предимно съставени от скали и метал.
Външите четири планети са значилно по-големи от тип газови гиганти съставени предимно от водород и хелий.
<br>
Освен планетите и техните спътници в слънчевата система има и по-малки обекти. Те са концентрирани в две области: Първата е астероиден пояс който се намира между Марс и Юпитер, неговият състав е подобен на планетите от земн тип.
Втората област се намира отвъд орбитата на Нептун - транснептунови обекти. Те са съставени предимно от замръзнали вода, метан и амоняк. Има пет транснептунови обекта които са имат необходимата маса, за да бъдат заобиколени от собствена гравитация.
Те се квалифицират като планети джуджета: Церера, Плутон, Хаумея, Макемаке и Ерида. 
Шест от планетите и три планети джуджета имат естествени спътници, а външните планети имат и пръстени съставени от прах и други частици.
<br>
За измерване на разстоянието между обекти в слънчвата система е приета астрономическа единица(съкратено AU, от astronomical unit) със стойност средното разстоянието между Слънцето и Земята(приблизително 150 мил. километра).
Меркурий е най-близко до Слънцето(0,387AU), а най-далечната планета е Нептун(30,068 AU).
</h3>
<!-- --> 

<div class="slidecontainer">
Орбитална обикола:<span id="slider_value2" style="color:black;font-weight:bold;"></span><br>
<input type="range" min="-50" max="50" step="10" name="slide" value="0" onchange="show_value2(this.value)"> 
</div>

<canvas width="1000" height="600" style="border: solid 1px Black;">

</canvas>

<br>
<br>
<h5>
На този етап единствената, известна на астрономията, планетата на която има живот е Земята. Намира се в така наречената обитаема зана на слънчевата система.
В астрономията и астробиологията обитаема зона е област около звезда, в която на повърхността на дадена планета може да има течна вода и достатъчно силно атмосферно налягане. 
Областта в която тази зона е базирана на разположението на Земята в слънчевата система и също така количеството лъчиста енергия, която тя получава от Слънцето.
Обитаемата зана е разлина във всяка слънчева система, понеже звездата намираща се в центъра на дадена слънчва система е различна от Слънцето. Има слънца които горят с много по-голяма температута
от нашето и такива с по-ниска температура, която е определящо за обитаемата зона на разглежданата слънчева система.
Понеже течната вода е основополагаща за живот на нашета планета, дори и малки промени в температурана на повърхността могат да имат катастрофален ефект върху биосферата. 
С напредването на науката можем да добием представа какви биха били тези променте ако орбитата на Земята се измени от настоящата.
</h5>
<!-- Tаблица с имперични данни за слънчвата система, необходима за решаване на задачи --> 
<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>

<h6>Задача 1: С помоща на интерактивния модел на слънчевата система и таблицата, намерете с колко стандартни астрономически единици(AU) трябва да се доближи Земята,
за да започнат да кипят океаните на повърхносста?
<input type="text" id="num1" value="" size="10"> AU
<button onclick="comp()">Провери</button></h6>
<noscript>

</noscript>

</body>

欢迎来到stackoverflow。

这里是一个使用纯Javascript的简单实现。


function changeTRdata(numberChange){
var table = document.getElementsByTagName('table')[0];
for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
if(j==2){
let updateVal = [];
col_arr = col.innerText.split(',');
col_arr.forEach(function(numb){updateVal.push(numberFormat(Number(numb)+numberChange,','))})
col.innerText = updateVal.join();

}
else
{
var cellVal = col.innerText.replace(',','');
if(!isNaN(cellVal)){

cellVal = Number(cellVal) +numberChange;
col.innerText = numberFormat(cellVal,',');
}

}
}  
}
}
function numberFormat(_number, _sep) {
_number = typeof _number != "undefined" ? _number : "";
_number = _number.toString();
_number = _number.replace(new RegExp("^(\d{" + (_number.length%3? _number.length%3:0) + "})(\d{3})", "g"), "$1 $2").replace(/(d{3})+?/gi, "$1 ").trim();
if(typeof _sep != "undefined" && _sep != " ") {
_number = _number.replace(/s/g, _sep);
}
return _number;
}
function show_value2(x)
{
let oldval =document.getElementById("slider_value2").innerHTML;
let change = Number(x)-Number(oldval);

changeTRdata(change)
document.getElementById("slider_value2").innerHTML=x;
}

这是的工作演示

最新更新