Question

我试图通过单击表头来对HTML中的表进行排序。排序适用于字符串，但在比较数字时，它评估“10”＆lt; “2”。显然，我正在比较字符串，但我无法从表格单元格中获取数字。这是一个正在发生的事情的实例：

 <script type="text/javascript" >
      function sortBy() {
          var table = document.getElementById("table");
          var rows = table.getElementsByTagName("tr");
          var number = rows[1].getElementsByTagName("td")[0].innerHTML;
          document.write(number);  // This should be printing "7".
      }
 </script>

 <?php 
      echo "<table id='table'>
         <thead><tr><th onclick='sortBy()'>CLICK ME</th></thead></tr>
         <tbody><td><input readonly value='7'></td></tbody>";
 ?>

在这个例子中，我试图得到整数7。我已经尝试了parseInt(number)，但评估为NaN，因此我尝试编写number的内容并打印文本字段而不是文本字段的内容。我通过打印number.length检查了这一点，得到了29，而不是1。

我已尝试number.value，但那是undefined。

我已尝试将.innerHTML替换为.value，但那也是undefined。

我有什么方法可以把它转换成数字吗？或者至少剥离html标签等等？我意识到我可以使用字符串和它的长度来装配我自己的比较逻辑（如果（A.length＆gt; B.length）{A更大}其他{比较像普通}），但这很麻烦，不会帮助我明白这个问题。

Answer 1

问题是你没有选择正确的标签;您需要为保留值的<input>添加选择器。

function sortBy() {
    var table = document.getElementById("table");
    var rows = table.getElementsByTagName("tr");
    var number = rows[1].getElementsByTagName("td")[0].getElementsByTagName("input")[0].getAttribute("value");
    document.write(number);  // This should be printing "7".
}

Answer 2

使用Element.getAttribute和parseInt来正确检索和解析值：

var number = rows[1].getElementsByTagName("td")[0].getAttribute('value')
document.write(parseInt(number));

Answer 3

除了表结构需要进行一些更正之外，通过使用onPostExecute函数，您将输出innerHTML标记包含的所有内容。
要更正JavaScript代码，我建议使用查询选择器，如下所示：

td

function sortBy() {
  var table = document.getElementById("table");
  var rows = table.getElementsByTagName("tr");
  var number = rows[1].querySelector("td > input").value;
  console.log(number);
}

Answer 4

您可以尝试使用Number()函数创建一个新的Number包装类，其中包含字符串中的值。即使该值实际上是一个数字，这应该继续有效。

 <script type="text/javascript" >
      function sortBy() {
          var table = document.getElementById("table");
          var rows = table.getElementsByTagName("tr");
          var number = rows[1].getElementsByTagName("td")[0].innerHTML;
          document.write(Number(number));  // This should be printing "7".
      }
 </script>

 <?php 
      echo "<table id='table'>
         <thead><tr><th onclick='sortBy()'>CLICK ME</th></thead></tr>
         <tbody><td><input readonly value='7'></td></tbody>";
 ?>

在MDN documentation页面阅读更多内容。

无法在JavaScript

4 个答案: