Question

如何按优先级对列表项进行排序？这是待办事项清单。用户可以输入项目，选择优先级，然后添加到列表中。

这是我的HTML表单：

<input id="task" type="text"/>

<select id="priority">
    <option id="Normal">Normal</option> 
    <option id="Urgent">Urgent</option>
    <option id="Critical">Critical</option>
    <option id="If You Can">If You Can</option>
</select>

<button onclick="amitFunction()">Add</button>

<hr/>

<table>
    <tr>
        <th id="result"></th>
        <th id="priorit"></th>
    </tr>
<table>

这是我的JS：

 function amitFunction() {    
    /* Define vars and values  */
    var lia = document.createElement("p");
    var lib = document.createElement("p");
    var item = document.getElementById('task').value;
    var pro = document.getElementById('priority').value;
    var pro_array = ['Urgent','Critical','Normal'];
    var item_list = document.createTextNode(item);
    var item_pro = document.createTextNode(pro);

    lia.appendChild(item_list);
    lib.appendChild(item_pro);

    /*  Check if text is less than 6 chars or more than 42 chars  */
    if (item.length<6) {
        alert('Your text must have a least 6 chars');
    } else if (item.length>42) {
        alert('Your text must have less than 42 chars');
    } else {
        document.getElementById("result").appendChild(lia);
        document.getElementById("priorit").appendChild(lib);
        document.getElementById('task').value='';
    }

    /*  Change text color base on priority  */
    if (pro==pro_array[0]) {
        $("p:last-child").css('color','red');
    }
    if (pro==pro_array[1]) {
        $("p:last-child").css('color','orange');
    }
    if (pro==pro_array[2]) {
        $("p:last-child").css('color','green');
    }

    /*  Delete text when user clicks on it  */
    $([lia,lib]).click(function(){
        $([lia,lib]).css('color','gray');
        $([lia,lib]).css("text-decoration", "line-through");
    });
}

我需要的是，当用户添加新项目时，它将按优先级顺序排序。

第一：紧急
第二名：严重
第三名：正常
第四名：如果可以

用户添加的每个新项目都应该按照这样排序。我怎么能这样做？

这是the complete script (JSBin)以了解我的需要。

Answer 1

首先，我建议您在每次创建TODO任务时创建一个新的表行，但是我决定保留尽可能多的代码并实现您的要求。我承认这不是最好的决定，并且可以进行很多优化，但是我要离开它，因为它只是因为代码中可能有许多有趣的案例可能会教你一些新东西。排序已实施。我希望这会有所帮助：）

你的HTML，原样：

0.000016 0.000045 0.000062
0.000063 0.000063 0.000063
0.000079 0.000078 0.000045
0.000062 0.000062 0.000062
0.000062 0.000062 0.000062
0.000077 0.000073 0.000062
0.000062 0.000045 0.000063

和编辑过的JS代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<input id="task" type="text"/>
<select id="priority">
 <option id="Normal">Normal</option> 
<option id="Urgent">Urgent</option>
<option id="Critical">Critical</option>
<option id="If You Can">If You Can</option>
 </select>

<button onclick="amitFunction()">Add</button>

<hr/>
<table>
  <tr>
    <th id="result"></th>
<th id="priorit"></th>
  </tr>
<table>
</body>
</html>

这是一个有效的例子：

https://jsbin.com/kudipacexi/edit?html,js,output

实际上有很多方法，另一种方法是不为列表保留全局集合，而是直接使用DOM元素进行排序，但是你仍然需要保留一些优先级的数字表示为了按优先级排序它们。将每个元素订阅到单击处理函数，然后根据函数的调用者添加直通样式也可能是个好主意。我建议的另一件事是，如果你涉及jQuery而不是只关注Vanilla JS，那么尝试使用jQuery来进行大部分DOM操作。

Answer 2

因为你有一张桌子我建议用它作为输出。

您可以重新排列选择，以便为每个选项添加优先级编号和颜色属性，如：

<option value="2" color="green">Normal</option>

该表可以包含第一列作为当前行优先级。该栏将被隐藏。

每次必须添加新行时，将对表行执行排序过程。

摘录：

＆＃13;

$('button').on('click', function (e) {
    var priorityValue = $('#priority option:selected').val();
    var priorityText = $('#priority option:selected').text();
    var colorVal = $('#priority option:selected').attr('color');
    var taskValue = $('#task').val();
    if (taskValue.length < 6) {
        $('#errMsg').text('Your text must have a least 6 chars');
        return;
    } else if (taskValue.length > 42) {
        $('#errMsg').text('Your text must have less than 42 chars');
        return;
    }
    $('#errMsg').text('');

    //
    // create the new table row...
    //
    var newRow = $('<tr/>', {style: 'color:' + colorVal})
            .append($('<td/>', {style: "display: none", text: priorityValue}))
            .append($('<td/>', {text: taskValue}))
            .append($('<td/>', {text: priorityText}));


    //
    // enlarge current table rows with the current one and sort elements
    //
    var tableRowsSorted = $('#result tbody').append(newRow).find('tr').get().sort(function(a, b) {
        var p1 = +$(a).find('td:first').text();
        var p2 = +$(b).find('td:first').text();
        return p1 - p2;
    });

    //
    // append/replace the taable body
    //
    $('#result tbody').append(tableRowsSorted);

    //
    // reset input text
    //
    $('#task').val('');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input id="task" type="text"/><span id="errMsg" style="color: red;"></span>
<select id="priority">
    <option value="2" color="green">Normal</option>
    <option value="0" color="red">Urgent</option>
    <option value="1" color="orange">Critical</option>
    <option value="3" color="black">If You Can</option>
</select>

<button>Add</button>

<hr/>
<table id="result">
    <thead>
    <tr>
        <th style="display: none">priority</th>
        <th>result</th>
        <th>priority</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

＆＃13;

如何在JavaScript中按优先级排序列表？

2 个答案: