使用javascript排序数组表

时间:2015-04-09 01:44:39

标签: javascript arrays jquery-ui-sortable

我正在做一个练习,我可以从表中读取数据并在数组中保护以对序列进行排序:

  1. 可用,购买;
  2. 可用,无库存;
  3. 已售出,购买;
  4. 已售出,没有库存。
  5. 有人可以帮我说一下如何读取同一行的两个单元格然后在数组之间分配并生成一个已订购的新表格吗? 我的代码如下:

     <table id="giftreg-table" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
            <thead>
            <tr>
                <th>prod0</th>
                <th>sold</th>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
    
            <tr>
                <td>prod0</td>
                <td>available</td>
                <td>buy</td>
            </tr>
            <tr>
                <td>prod2</td>
                <td>sold</td>
                <td>buy</td>
            </tr>
    
            <tr>
                <td>prod2</td>
                <td>sold</td>
                <td>buy</td>
            </tr>
    
            <tr>
                <td>prod4</td>
                <td>available</td>
                <td>no Stock</td>
            </tr>
            <tr>
                <td>prod6</td>
                <td>available</td>
                <td>buy</td>
            </tr>
    
            <tr>
                <td>prod2</td>
                <td>sold</td>
                <td>buy</td>
            </tr>
    
            <tr>
                <td>prod5</td>
                <td>available</td>
                <td>buy</td>
            </tr>
    
            <tr>
                <td>prod3</td>
                <td>sold</td>
                <td>buy</td>
            </tr>
    
            <tr>
                <td>prod4</td>
                <td>available</td>
                <td>no Stock</td>
            </tr>
    
            <tr>
                <td>prod4</td>
                <td>available</td>
                <td>no Stock</td>
            </tr>
            </tbody>
        </table>
        <button onclick="sortTable()">Order</button>
    
            <script>
                var TableIDvalue = "giftreg-table";
                var TableLastSortedColumn = -1;
    
                var arrayOldTable = new Array();
                var arrayNewTable = new Array();
                var arrayTitle = new Array();
                var arrayFirst = new Array();
                var arraySecond = new Array();
                var arrayThird = new Array();
                var arrayFourth = new Array();
    
    
    
                function sortTable() {
                    var _sold = /sold/gi;
                    var _noStock = /no Stock/gi;
                    var _available = /available/gi;
                    var _buy = /buy/gi;
    
                    var table = document.getElementById("giftreg-table");
    
                    var line;
    
                    for (var i = 0; i < table.rows.length; i++) {
                        var row = table.rows[i];
                        line = "";
                        for (var j = 0; j < row.cells.length; j++) {
                            var cell = row.cells[j];
    
                            line += cell.innerHTML;
    
                        }
                        if (line.search(_available, _buy) == -1) {
                            arrayFirst[i] = linha
    
                        }
    
                        if (rows.indexOf(_available, _noStock)) {
                            arraySecond[i] = line;
                        }
                        if (rows.indexOf(_sold, _buy)) {
                            arrayThird[i] = line;
                        }
                        if (rows.indexOf(_sold, _noStock)) {
                            arrayFourth[i] = line;
                        } else {
                            arrayTitle[i] = line;
                        }
    
                    }
                    //NewTable();
                    arrayNewTable[0] = arrayTitle;
                    arrayNewTable[1] = arrayFirst;
                    arrayNewTable[2] = arraySecond;
                    arrayNewTable[3] = arrayThird;
                    arrayNewTable[4] = arrayFourth;
                    //var newTableBody = document.createElement("tbody");
                    for (var i = 0; i < table.rows.length; i++) {
    
                        document.writeln(arrayNewTable[i]);
                    }
                    createTable(arrayNewTable);
    
                }
    
                function createTable(newTable) {
                    var table = document.createElement('table'),
                        tableBody = document.createElement('tbody');
    
                    tableData.forEach(function(rowData) {
                        var row = document.createElement('tr');
    
                        rowData.forEach(function(cellData) {
                            var cell = document.createElement('td');
                            cell.appendChild(document.createTextNode(cellData));
                            row.appendChild(cell);
                        });
    
                        tableBody.appendChild(row);
                    });
    
                    table.appendChild(tableBody);
                    document.body.appendChild(table);
                }
            </script>
    

    在这里看一个我认为最明显的例子来理解我的问题:http://jsfiddle.net/Helder666/yzmp2psz/2/(注意:下面评论中的这个coloqueo linck)

1 个答案:

答案 0 :(得分:0)

应该是你需要的:

   <html>
   <body>
   <table id="giftreg-table" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
           <thead>
           <tr>
               <th>prod0</th>
               <th>sold</th>
               <th>Quantity</th>
           </tr>
           </thead>
           <tbody>

           <tr>
               <td>prod0</td>
               <td>available</td>
               <td>buy</td>
           </tr>
           <tr>
               <td>prod2</td>
               <td>sold</td>
               <td>buy</td>
           </tr>

           <tr>
               <td>prod2</td>
               <td>sold</td>
               <td>buy</td>
           </tr>

           <tr>
               <td>prod4</td>
               <td>available</td>
               <td>no Stock</td>
           </tr>
           <tr>
               <td>prod6</td>
               <td>available</td>
               <td>buy</td>
           </tr>

           <tr>
               <td>prod2</td>
               <td>sold</td>
               <td>buy</td>
           </tr>
           <tr>
               <td>prod3</td>
               <td>sold</td>
               <td>no Stock</td>
           </tr>
           <tr>
               <td>prod5</td>
               <td>available</td>
               <td>buy</td>
           </tr>



            </tbody>
       </table>    
    <button onclick="sortTable()">Order</button>

           <script>
               var TableIDvalue = "giftreg-table";
               var TableLastSortedColumn = -1;
            var availableArray = new Array();
            var soldArray = new Array();
            var _sold = /sold/i;
            var _noStock = /no Stock/i;
            var _available = /available/i;
            var _buy = /buy/i;
            var head,tail,result;

            function sortTable()
            {
                var sold,quantity;
                var table = document.getElementById("giftreg-table");
                for (i=1;i< table.rows.length;i++)
                {
                    row= table.rows[i];
                    sold=row.cells[1].innerHTML;

                    result=_available.test(sold);
                    console.log ("i="+i+",sold=" + sold +","+result);
                    if (result)
                        availableArray.push(i)
                    else
                        soldArray.push(i)
                }
                head="";
                tail="";

                var newTable = document.createElement("table");
                newTable.setAttribute("border","1"); 
                newTable.setAttribute("cellpadding","10"); 
                newTable.setAttribute("cellspacing","0"); 
                newTable.setAttribute("style","border-collapse:collapse;");
                for (i=0;i<availableArray.length;i++)
                {

                    row= table.rows[availableArray[i]];
                    quantity=row.cells[2].innerHTML;
                    result=_buy.test(quantity);
                    if (_buy.test(quantity))
                        head=head+"<tr>"+row.innerHTML+"</tr>";
                    else
                        tail=tail+"<tr>"+row.innerHTML+"</tr>";
                }
                head=head+tail;
                tail="";
                for (i=0;i< soldArray.length;i++)
                {

                    row= table.rows[soldArray[i]];
                    quantity=row.cells[2].innerHTML;
                    result=_buy.test(quantity)
                    if (_buy.test(quantity))
                        head=head+"<tr>"+row.innerHTML+"</tr>";
                    else
                        tail=tail+"<tr>"+row.innerHTML+"</tr>";
                }
                newTable.innerHTML=head+tail;
                document.body.appendChild(newTable);
            }
           </script>
   </body>
   </html>