Javascript 按時間日期排序表 div

Question

我有一張這樣的桌子

 <div class="wrapper-3OdqYJdx"> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">John</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>1:59:08 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">David</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:10:00 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">Vonn</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:40:02 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">Anna</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>3:02:01 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> </div>

如何按時間日期對這個表進行排序，僅使用 javascript，而不使用 jquery，最新的在上面？

我在這里讀到了按數字排序： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_number

我正在考慮刪除 HTML 中的所有 < span > 和 </ span > 以獲得完整的日期格式，然后將其轉換為 unix 時間戳，然后使用 w3schools 中的代碼對其進行排序。

但我不知道該怎么做。 你能幫我么？

編輯：

場景是：我無法控制表格或生成的代碼。 這是一個顯示在我屏幕上的可移動表格，因此我使用名為“Javascript Injector”的瀏覽器擴展程序將 javascript 添加到當前 HTML 中，對日期進行排序，刪除包含“debt”一詞的行，突出顯示具有帶有紅色的“全部支付”一詞 - 這是我想要關注的行。

由於它是添加到瀏覽器擴展程序的代碼，因此我必須不時單擊該擴展程序。 那么您能幫我添加一個 function 以每 30 秒自動重復一次排序嗎？ 非常感謝你的協助。

Answer 1

這是日期和時間的排序

我假設類名是 static。 如果是動態的，我們需要更多代碼

我還添加了一些 CSS 用於可視化

1/11/2022 1:59:08 PM的日期字符串可以在沒有 RegExp 的情況下解析，所以我按原樣使用它

 const container = document.querySelector(".wrapper-3OdqYJdx") const getDateFromSpans = spans => new Date(`${spans[0].textContent} ${spans[1].textContent}`); const rows = [...container.querySelectorAll(".bodyRow-OX45")].sort((a,b)=> getDateFromSpans(a.querySelectorAll('.timeCell-OX45 span')) - getDateFromSpans(b.querySelectorAll('.timeCell-OX45 span'))) container.append(...rows)

 .bodyRow-OX45 { border: 1px solid black; } span::after { content: " - " }

 <div class="wrapper-3OdqYJdx"> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="ticker-OX45">John</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>1:59:08 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="ticker-OX45">David</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:10:00 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="ticker-OX45">Vonn</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:40:02 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="ticker-OX45">Anna</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>3:02:01 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> </div>

Answer 2

我會將容器的children列表轉換為[Date, Element]對數組，按第一列排序，然后將[Date, Element]對的排序數組轉換回Element數組。 最后，您只需將生成的數組循環到 append 將子元素一一放入容器中。

 var map = Array.prototype.map; var mainEl = document.getElementById("main"); var childEls = map.call(mainEl.children, function (el) { var d = el.children[0].textContent; var t = el.children[1].textContent; return [Date.parse(d + " " + t), el]; }).sort(function (a, b) { return a[0] - b[0]; }).map(function (pair) { return pair[1]; }); for (let childEl of childEls) { mainEl.appendChild(childEl); }

 <div id="main"> <div><span>1/11/2022</span> <span>1:59:08 PM</span> David</div> <div><span>1/11/2022</span> <span>12:10:00 AM</span> Anna</div> <div><span>1/11/2022</span> <span>12:40:02 AM</span> John</div> <div><span>1/11/2022</span> <span>3:02:01 PM</span> Vonn</div> </div>

萬一您不知道map或call ：

> | [1, 2, 3].map(function (x) {
  |   return x + 1;
  | })
< | [2, 3, 4]
> | Array.prototype.map.call([1, 2, 3], function (x) {
  |   return x + 1;
  | })
< | [2, 3, 4]

map.call模式是必需的，因為mainEl.children沒有map方法（在瀏覽器控制台中輸入document.children.map看看會發生什么）。

邊注

正如評論中所建議的，在現代 JS 語法中，您可以編寫childEls = [...mainEl.children].map(...) ，歸結為相同的結果。 然而，幾年前我做了一個性能測試來比較像map.call(mainEl.children, ...)和[...mainEl.children].map(...)這樣的東西，現代語法是比舊的慢很多。 也許從那以后事情發生了變化，我讓你自己檢查:-)

編寫自己的“解析”function 可能是個好主意，因為您永遠不知道Date.parse(...)的瀏覽器實現如何處理非標准日期格式。 只需從d + " " + t中選擇各個位，然后使用new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)創建一個Date object 。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

Answer 3

上面的另一個變體。 查詢所有元素以查找包含日期的spans並生成用於比較的時間戳。 數組sort function 可以在重新生成 HTML 之前比較這些值以根據需要對結果進行排序。

 const d=document; const q=(e,n=d)=>n.querySelector(e); const qa=(e,n=d)=>n.querySelectorAll(e); const parent=q('div.wrapper-3OdqYJdx'); const col=qa('div.timeCell-OX45'); const nodes=[]; col.forEach( div=>{ let tmp={ node:div.parentNode, time:new Date( [...qa('span', div ) ].map( span=>{ return span.textContent; }).join(' ') ).getTime() }; nodes.push( tmp ) }); nodes.sort( (a,b)=>{ if( a.time > b.time )return 1; if( a.time < b.time )return -1 if( a.time==b.time )return 0; }); parent.innerHTML=''; nodes.forEach( obj=>parent.appendChild( obj.node ) );

 span{padding:0.25rem}

 <div class="wrapper-3OdqYJdx"> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">John</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>1:59:08 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">David</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:10:00 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">Vonn</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:40:02 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">Anna</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>3:02:01 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> </div>

Answer 4

您在 Dom 中的類可能是動態生成的，因此此答案將對您有所幫助：

 const times = document.querySelectorAll('div[class*="timeCell"] span:first-child') const data=[]; times.forEach( item => { data.push({ time: new Date(item.innerText+" "+item.nextElementSibling.innerText ).getTime(), parent: item.parentElement.parentElement }) }) data.sort(function (a, b) { return a.time - b.time; }); const newDom = document.querySelector('div[class*="wrapper"]'); data.forEach(item => newDom.append(item.parent));

 div[class*="timeCell"] span:first-child{ color:red; }

 <div class="wrapper-3OdqYJdx"> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">John</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>1:59:08 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">David</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:10:00 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">Vonn</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>12:40:02 AM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> <div class="bodyRow-OX45"> <div class="cell-OX45 symbolCell-OX45"> <div class="name-OX45">Anna</div> </div> <div class="cell-OX45 descriptionCell-OX45">paid</div> <div class="cell-OX45 timeCell-OX45"><span>1/11/2022</span><span>3:02:01 PM</span></div> <div class="cell-OX45 buttonsCell-OX45"> <div title="Edit" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA"></div> <div title="Remove" role="button" class="button-mpsUn-6R apply-common-tooltip button-165AA dangerous-165AA"></div> </div> </div> </div>