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

这是index.php

这个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>

如何点击按钮排序列表并重新显示排序列表
尝试从9个文本框中捕获值

你的代码需要认真研究。你有很多重复的语句可以用循环来解决，在你重新定义变量的每一行，比如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"等标识的所有元素。然后，我们在访问它们的for循环中，以1乘1的方式将它们推送。所有元素都使用索引（请注意，这就是我所要做的，因为这比一行重复相同的代码10行，只更改一个数字要好。），然后我们返回排序后的数组。请注意，当我们调用values.sort( function(a,b) { return a-b } )时，我们正在将一个函数作为参数传递给。这是因为默认情况下，.sort()方法按字符串排序，按字母数字升序排列。因此，数组[1, 3, 200, 15000]将被排序为[1, 15000, 200, 3]，这显然不是按数字顺序排列的。通过提供附加函数作为参数，我们告诉它减去两者（它充当我们的比较器），然后将为我们提供准确的数字结果。

相关内容

最新更新

热门标签：