【发布时间】：2018-04-21 09:01:28
【问题描述】：
我正在使用 Electron 制作一个应用程序，并有一个客户列表，其中包含他们的姓名和位置。我有一个允许用户添加客户的按钮，但是这样做时表格会显示索引。我有另一个按字母顺序对名称进行排序的按钮，但如果其中有包含索引的行，它会首先显示那些...
我想要的是一些限制，即在排序时将带有 (0)(1) 的行放在列表的末尾而不是开头。
客户已正确排序，但是当我希望单词在 0 之前时，所有带有 0 的行都排在带有实际单词的行之前。
代码： 出于某种原因，在这段代码 sn-p 中它实际上没有显示 0 或 1 索引，但它仍然在有文本的行之前对没有任何内容的行进行排序...
const back = document.getElementById('back');
const cust = document.getElementById('cust');
const custDiv = document.getElementById('custDiv');
const addCust = document.getElementById('addCust');
const inv = document.getElementById('inv');
const invDiv = document.getElementById('invDiv');
const addItem = document.getElementById('addItem');
// add customer
function appendRowCust() {
var custList = document.getElementById('custList'), // table reference
row = custList.insertRow(custList.rows.length), // append table row
i;
// insert table cells to the new row
for (i = 0; i < custList.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
// create DIV element and append to the table cell
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode(''); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('class', style); // set DIV class attribute
div.setAttribute('className', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
// sort customers
function sortCustTable() {
var custList, rows, switching, i, x, y, shouldSwitch;
custList = document.getElementById("custList");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = custList.getElementsByTagName("TR");
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; 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")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// Check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// I 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;
}
}
}table {
background-color: black;
color: white;
}
tr:nth-child(even) {
background-color: #656565;
}
tr:nth-child(odd) {
background-color: #505050;
}
td {
width: 300px;
max-width: 300px;
height: 30px;
text-align: center;
}<div id="custDiv">
<div class="addBtns">
<button id="addCust" onclick="appendRowCust()">add customer</button>
</div>
<div style="width: 355px; margin: 0 auto; height: 50px;">
<button id="sortCust" onclick="sortCustTable()">sort</button>
</div>
<div class="custScroll">
<table id="custListTop">
<tr>
<td contenteditable="false">Customers</td>
<td contenteditable="false">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>Someone</td>
<td>something</td>
</tr>
</table>
</div>
</div>【问题讨论】：
标签： javascript html css list sorting