Question

我正在尝试在表格中使用排序。我使用下面给出的方法，但使用波纹管方法排序数字时出错。此方法正常工作但数量为ASC和DESC顺序。我不明白为什么会发生这种情况。伙计们，你对此有什么想法吗？

function sortTable(n, selector) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
///table = document.getElementById(selector);
table = $(selector);
switching = true;

//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = $(table).find('tr'); ///table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 0; i < (rows.length - 1) ; i++) {
        //start by saying there should be no switching:
        shouldSwitch = false;
        /*Get the two elements you want to compare,
        one from current row and one from the next:*/
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        /*check if the two rows should switch place,
        based on the direction, asc or desc:*/
        if (x != null && y != null) {
            if (dir == "asc") {
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    //if so, mark as a switch and break the loop:
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                    //if so, mark as a switch and break the loop:
                    shouldSwitch = true;
                    break;
                }
            }
        }
    }
    if (shouldSwitch) {
        /*If a switch has been marked, make the switch
        and mark that a switch has been done:*/
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        //Each time a switch is done, increase this count by 1:
        switchcount++;
    } else {
        /*If no switching has been done AND the direction is "asc",
        set the direction to "desc" and run the while loop again.*/
        if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
        }
    }
}
}

Answer 1

如果要使用任何特定列对表行进行排序并按数字排序，可以通过将行排序到数组中来利用内置的 Array.prototype.sort 方法，排序数组，然后按所需顺序将行放入表中。 E.g：

＆＃13;

function sortMe(evt) {
  var table = this;          // Table clicked on
  var cell = evt.target;     // Cell clicked on
  var col = cell.cellIndex;  // Column number
  
  // Put rows into an array
  var rowArray = [].slice.call(table.rows);
  // Or for ECMAScript 2015
  // var rowArray = Array.from(table.rows);

  // Sort rows
  rowArray.sort(function(a, b) {
  
    // Get values of col to sort on
    a = a.cells[col].textContent;
    b = b.cells[col].textContent;

    // If numeric, sort as number
    if (isNumeric(a)) {
      return a - b;
    }
    // Other sort options here, e.g. as dates
    // Otherwise, sort as string
    return a.localeCompare(b);
  });
  
  // Put rows back in table in order
  var tbody = table.tBodies[0];
  rowArray.forEach(function (row) {
    tbody.appendChild(row);
  })

}

// Helper function
// Check if value is numeric, '2' returns true
function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

// Attach listener to table
window.onload = function() {
  document.querySelector('table').addEventListener('click', sortMe, false);
}

＆＃13;

table {
  border-collapse: collapse;
}
td {
  border: 1px solid #bbbbbb;
  width: 5em;
}

＆＃13;

<table>
  <tr><td>A<td>3
  <tr><td>D<td>0
  <tr><td>B<td>1
  <tr><td>C<td>2
</table>

＆＃13;

任何列中的单击都会对列进行排序。您可以添加额外内容，例如添加页眉和页脚，在升序和降序排序之间切换，处理空白单元格等。

您可以考虑在标题单元格中使用类或数据属性来控制要使用的排序类型。

Answer 2

var filter='';

function myFunction() {
    var input, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    var product = object.filter(filterByID)
    console.log(product);
}



function filterByID(item) {

    if (item.First_Name.toUpperCase().indexOf(filter) > -1) {
        return true;
    }
    return false;
}

var object = [
  {
    "First_Name": "Adele",
  },
  {
    "First_Name": "Neeraj",
  },
   {
    "First_Name": "Nitin",
  },
]

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<h2>My Phonebook</h2>

<input type="text" id="myInput" oninput="myFunction()" placeholder="Search for names.." title="Type in a name">

如何在javascript

2 个答案: