使用 javascript 对数组表进行排序
sort array tables with javascript
我正在做一个练习,我必须从 table 中读取数据并在数组中守卫以对序列进行排序:
- 有货,购买;
- 有货,无货;
- 已售出,正在购买;
- 已售出,无库存。
有人能帮我说说如何读取同一行的两个单元格然后在数组之间分配并生成一个新的 table 已经订购了吗?
我的代码如下:
<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)
应该是你需要的:
<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>
我正在做一个练习,我必须从 table 中读取数据并在数组中守卫以对序列进行排序:
- 有货,购买;
- 有货,无货;
- 已售出,正在购买;
- 已售出,无库存。
有人能帮我说说如何读取同一行的两个单元格然后在数组之间分配并生成一个新的 table 已经订购了吗? 我的代码如下:
<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)
应该是你需要的:
<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>