Question

如何使用javascript内联设置范围滑块的默认值。

table, th, td {
  border: 1px solid black;
}

<table id='tab'>
  <tr> 
    <td>Lattitude</td>  
    <td>20</td> 
  </tr> 
  <tr>  
    <td>Longitude</td> 
    <td>25</td> 
  </tr> 
  <tr> 
    <td>value</td>  
    <td id='val'>100</td> 
  </tr>
</table>
ON
<input type="range" min="0" max="100" value="5" onchange="console.log(document.getElementById('tab').rows[2].cells.namedItem('val').innerHTML)">
OFF

在上面的代码中，我将值硬编码为5，但是如果我想通过从表数据value（document.getElementById('tab').rows[2].cells.namedItem('val').innerHTML）中获取值来进行更改。如何注入默认值。

Answer 1

您可以使用Document.querySelector()来允许任何有效的CSS选择器字符串作为参数。

您可以尝试以下方式：

var rInput = document.querySelector('input[type=range]');

var val = document.querySelector('#tab tr:nth-child(2) td:nth-child(2)').textContent;
rInput.value = val;

table, th, td {
  border: 1px solid black;
}

<table id='tab'>
  <tr> 
    <td>Lattitude</td>  
    <td>20</td> 
  </tr> 
  <tr>  
    <td>Longitude</td> 
    <td>25</td> 
  </tr> 
  <tr> 
    <td>value</td>  
    <td id='val'>100</td> 
  </tr>
</table>
ON<input type="range" min="0" max="100" value="5">OFF

更新：正如您在评论中提到的，不允许使用 script 标记，使用内联JavaScript的解决方案：

table, th, td {
  border: 1px solid black;
}

<body onload="var rInput = document.querySelector('input[type=range]');var val = document.querySelector('#tab tr:nth-child(2) td:nth-child(2)').textContent;rInput.value = val;">
  <table id='tab'>
    <tr> 
      <td>Lattitude</td>  
      <td>20</td> 
    </tr> 
    <tr>  
      <td>Longitude</td> 
      <td>25</td> 
    </tr> 
    <tr> 
      <td>value</td>  
      <td id='val'>100</td> 
    </tr>
  </table>
  ON<input type="range" min="0" max="100" value="5" >OFF

</body>

Answer 2

首先给您的滑块一个唯一的ID，以便我们可以使用JavaScript来访问它

<input type="range" id="slider" min="0" max="100" value="5" onchange="console.log(document.getElementById('tab').rows[2].cells.namedItem('val').innerHTML)">

现在只需像这样更改其值

<script "text/javascript">
document.getElementById('slider').value=parseInt(document.getElementById('tab').rows[2].cells.namedItem('val').innerHTML);
</script>

如何通过获取表值来更改范围滑块的默认值

2 个答案: