如何对数组中的列表进行排序并将其显示在文本框中

问题描述：

此JavaScript用于随机数并显示为9个文本框。

<script> 
     function GetRandom() 
     { 
      var myElement = document.getElementById("no1") 
      myElement.value = Math.floor((Math.random() * 1000) + 1); 
      var myElement = document.getElementById("no2") 
      myElement.value = Math.floor((Math.random() * 100) + 1); 
      var myElement = document.getElementById("no3") 
      myElement.value = Math.floor((Math.random() * 10000) + 1); 
      var myElement = document.getElementById("no4") 
      myElement.value = Math.floor((Math.random() * 1000) + 1); 
      var myElement = document.getElementById("no5") 
      myElement.value = Math.floor((Math.random() * 10000) + 1); 
      var myElement = document.getElementById("no6") 
      myElement.value = Math.floor((Math.random() * 1000) + 1); 
      var myElement = document.getElementById("no7") 
      myElement.value = Math.floor((Math.random() * 1000) + 1); 
      var myElement = document.getElementById("no8") 
      myElement.value = Math.floor((Math.random() * 1000) + 1); 
      var myElement = document.getElementById("no9") 
      myElement.value = Math.floor((Math.random() * 10000) + 1); 
     } 
    </script>

这个JavaScript是需要9文本框值到数组和排序列表

<script> 
     function sortlist() 
     { 
      var captureNumb = document.getElementById("no1"); 
      var captureNumb = document.getElementById("no2"); 
      var captureNumb = document.getElementById("no3"); 
      var captureNumb = document.getElementById("no4"); 
      var captureNumb = document.getElementById("no5"); 
      var captureNumb = document.getElementById("no6"); 
      var captureNumb = document.getElementById("no7"); 
      var captureNumb = document.getElementById("no8"); 
      var captureNumb = document.getElementById("no9"); 
      var captureNumb = document.getElementById("no1"); 

      var numbers = captureNumb.value.split(" "); 
      captureNumb.value = numbers.sort(function (a, b) { 
       return a - b 
      }).join(" "); 
     } 
    </script> 

</head> 
<body> 
    <div class="form-inline"> 
     <div class="col-xs-12"> 
      <div class="form-group"> 

       <input type="text" class="form-control" id="no1" name="no1" placeholder="No 1"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no2" name="no2" placeholder="No 2"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no3" name="no3" placeholder="No 3"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no4" name="no4" placeholder="No 4"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no5" name="no5" placeholder="No 5"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no6" name="no6" placeholder="No 6"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no7" name="no7" placeholder="No 7"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no8" name="no8" placeholder="No 8"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputName2"></label> 
       <input type="text" class="form-control" id="no9" name="no9" placeholder="No 9"> 
      </div> 
      <br><br><br> 
      <div align="center"> 



       <button type="button" class="btn btn-primary" onclick="GetRandom()">Populate</button> 

       <button type="button" class="btn btn-primary" onclick="sortlist()" >Sort list</button> 
       <button type="button" class="btn btn-primary">Primary</button> 
      </div> 
     </div> 
    </div>

如何点击按钮sortlist中，并通过排序列表重新显示后续？
试图捕获来自9个文本框的值。

不要在单个问题中提出无关的问题。将你的问题集中在这里的一个方面，并要求另一个问题作为一个单独的问题。 – Teepeemm

您正在将'document.getElementById（“no1”），document.getElementById（“no2”），...，document.getElementById（“no9”）分配给相同的'var captureNumb' –

答

您的代码需要认真查看。你有很多可以用循环解决的重复语句，并且在你重新定义一个变量的每一行上，如var myElement = ...连续两行，将它分配给一个变量真的没有意义，因为你永远不会引用myElement并且它的值在下一行被覆盖。

根据您要求的有关排序的内容，您需要从某些数据结构中动态插入它们。

<?php 
    $values = someGeneratingFunction(); 
    $values = someSortFunction($values); 
    for($i=0;$i<count($values);$i++) { 
     echo "<input type=\"text\" class=\"form-control\" id=\"no" . $i . "\" name=\"no" . $i . "\" placeholder=\"No 1\">" 
    } 
    // Note the insertion of the ID values ("no1", "no2" etc.) using the loop instead of repeatedly typing the same thing. 
?>

记住上面的代码中不使用您提供的完整的HTML结构，但你可以以此为如何实现你想要的一个总体思路。当你调用一个排序方法，你可以重新运行该代码，它只会打印的所有元素，他们已经把一切为了在阵列values英寸

编辑

考虑低于JavaScript。

function sortList() { 
    var values = []; 
    for(i=1;i<10;i++) { 
     values.push(document.getElementById("no".concat(i))); 
    } 
    return values.sort(function(a,b) { return a-b }); 
}

我们初始化数组持有的ID "no1"，"no2"等。然后，我们把他们的，1 1，在for循环中访问他们所有标识的所有元素使用索引（注意，这是我得到的是，因为这比重复同一行代码10行更好，只是改变了一个数字），然后我们返回我们的排序数组。注意，当我们调用values.sort(function(a,b) { return a-b })时，我们将一个函数作为参数传递。这是因为默认情况下，.sort()方法按字母顺序排序，按字母顺序排列。所以数组[1, 3, 200, 15000]将被排序为[1, 15000, 200, 3]，这显然不是以数字顺序。通过提供附加功能作为参数，我们告诉它减去两个（它充当我们的比较器），然后将为我们提供准确的数字结果。

hello @James，我不是很理解。这意味着我不需要用户JavaScript？ –

您可以使用JavaScript或PHP做你想做的事我相信，我只是用PHP写了我的答案，因为我更熟悉，解决方案的逻辑保持不变。 – James

输出是这样的：https://gyazo.com/b0d2268703c3b41d711a50d6f627accb –

如何对数组中的列表进行排序并将其显示在文本框中

相关推荐