Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/70.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在HTML中使用滑块更改表格单元格中的值_Javascript_Html - Fatal编程技术网

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

Javascript 如何在HTML中使用滑块更改表格单元格中的值,javascript,html,Javascript,Html,我有一个HTML格式的表,其中包含数据,我想通过添加用户使用时滑块中的值来更改每个单元格中的数据。我想从滑块中获取显示的数值,并对表行的数值进行加/减。到目前为止,我有表格和滑块,但我不知道如何将从滑块获得的值与表格中已有的数据相加/相减 函数显示值2(x){ document.getElementById(“slider_value2”).innerHTML=x; } Сббббббб Планета ббббббб Саааааааааааааааааа Орбитален перио

我有一个HTML格式的表,其中包含数据,我想通过添加用户使用时滑块中的值来更改每个单元格中的数据。我想从滑块中获取显示的数值,并对表行的数值进行加/减。到目前为止,我有表格和滑块,但我不知道如何将从滑块获得的值与表格中已有的数据相加/相减

函数显示值2(x){
document.getElementById(“slider_value2”).innerHTML=x;
}

Сббббббб
Планета 
ббббббб
Саааааааааааааааааа
Орбитален период (дни) 
Меркурий
2,406
166,85
87
Венера
4,545
463,85
244
Земя
6,283
13,85
365
Марс
9,553
-63,15
686
Юпитер
32,675
-120,15
4335
Сатурн
59,879
-130,15
10,757
Уран
120,515
-205,15
30,708
Нептун
188,925
-220,15
60,224

下面的代码记录了使用滑块值更新单元格所需的操作,但它无法解决的一个问题是,单元格包含格式化的非US字符串值,这些值不能使用JavaScript的转换技术转换为数字

//获取对要使用多次(仅一次)的元素的引用。
让sliderValue=document.getElementById(“slider_value2”);
//从第2行开始获取表中的所有行
让rows=document.queryselectoral(“表tr:n子项(n+2)”);
//使用JavaScript进行事件绑定,而不是像onchange这样的HTML事件属性
//在这种情况下,输入事件更好,因为它在
//元素接收输入(不必松开滑块即可查看更新的
//价值)。
document.getElementById(“滑块”).addEventListener(“输入”,函数(){
sliderValue.textContent=this.value;
//循环表中的所有行
rows.forEach(函数(行){
//循环行中的所有单元格,从第二个单元格开始
row.querySelectorAll(“td:n子(n+2)”).forEach(函数(单元){
//使用旧内容更新单元格的内容(转换为浮动
//点编号和滑块的当前值(转换为数字)。
cell.textContent=parseFloat(cell.textContent)+sliderValue.textContent;
});
});
});
/*避免内联样式。改为应用类*/
#滑块_值2{
颜色:红色;
字体大小:粗体;
}

Бббббббббббббббб
Планета 
ббббббб
Саааааааааааааааааа
Орбитален период (дни) 
Меркурий
2,406
166,85
87
Венера
4,545
463,85
244
Земя
6,283
13,85
365
Марс
9,553
-63,15
686
Юпитер
32,675
-120,15
4335
Сатурн
59,879
-130,15
10,757
Уран
120,515
-205,15
30,708
Нептун
188,925
-220,15
60,224

以下各项应能做到这一点:

函数show_value2(x,prep=null){ 让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) }) ) } 显示值2(0,真);

Сббббббб
Планета 
ббббббб
Саааааааааааааааааа
Орбитален период (дни) 
Меркурий
2,406
166,85
87
Венера
4,545
463,85
244
Земя
6,283
13,85
365
Марс
9,553
-63,15
686
Юпитер
32,675
-120,15
4335
Сатурн
59,879
-130,15
10,757
Уран
120,515
-205,15
30,708
Нептун
188,925
-220,15
60,224

什么是XTML???一个输入错误,很抱歉,这是HTMLSo。当一个滑块值更改时,所有单元格都应该受到影响吗?是的,当滑块移动时,我希望所有单元格的数值都受到用户设置的滑块值的影响,例如