xml代碼如何用JS動態轉換成表格？
[英]How can I convert xml code dynamically to table with JS?
問題描述
我想將 xml 代碼顯示為表格以提高可讀性。 我不想使用 XML 解析器，只是一個快速復制、粘貼轉換器。 但是我現在編碼的方式仍然非常耗時。 有沒有辦法動態轉換它？ 那么對於 xml 中的每個標簽，一個新的行/單元格等等？
在此示例中，XML 已在文本區域中。 它包含 2 名員工。 （這會更多，這就是為什么我說耗時）使用一個按鈕，你首先將它轉換為一個名為“輸出”的 div 的 innerHTML。 我認為將數據放入文檔並將其轉換為表格是必要的。 但如您所見，這意味着我必須為所有員工調整 JS 代碼 + 表。 有時 xml 將包含隨機編號的員工。 所以動態的方式會更好。 先感謝您
function convertxml() { var getxml = document.getElementById("inputxml").value; document.getElementById("outputxml").innerHTML = getxml; name = document.getElementsByTagName("name")[0].childNodes[0].nodeValue; document.getElementById("name").innerHTML = name; adress = document.getElementsByTagName("adress")[0].childNodes[0].nodeValue; document.getElementById("adress").innerHTML = adress; birthday = document.getElementsByTagName("birthday")[0].childNodes[0].nodeValue; document.getElementById("birthday").innerHTML = birthday; }
input, button { display: block; } #outputxml { display: none; } textarea { height: 300px; width: 500px; }
<textarea id="inputxml"> <employee> <name>John Doe</name> <birthday>01-01-1990</birthday> <adress>Streetname 123</adress> </employee> <employee> <name>Jane Doe</name> <birthday>02-02-2000</birthday> <adress>Streetname 123</adress> </employee> </textarea> <button id="convertxml" type="button" onClick="convertxml()">Convert</button> <div id="outputxml"></div> <table> <tr> <th></th> </tr> <tr> <td class="label">Name:</td> <td id="name"></td> </tr> <tr> <td class="label">Adress:</td> <td id="adress"></td> </tr> <tr> <td class="label">Birthday:</td> <td id="birthday"></td> </tr>
1 個解決方案
解決方案1
1 2022-04-26 14:30:43
除非絕對必要，否則我不會將 xml 放在<textarea>中，但更一般地說，我會創建一個動態表，使用 xpath，這樣：
function convertxml() { dest = document.querySelector('#theTable'); let area = document.evaluate( '//textarea', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); const data = new DOMParser().parseFromString( area.snapshotItem(0).textContent, 'text/xml' ); results = data.evaluate( '//employee', data, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); for (let i = 0; i < results.snapshotLength; i++) { let node = results.snapshotItem(i); let info = data.evaluate( './/*', node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); let row = []; for (let i = 0; i < info.snapshotLength; i++) { let item = info.snapshotItem(i); row.push(item.textContent); } dest.insertAdjacentHTML( 'beforeend', `<tr><td>${row[0]}</td><td>${row[1]}</td></td><td>${row[2]}</td></tr>` ); } }
<.doctype html> <html> <head> <link rel="stylesheet" href="lib/style.css"> <script src="lib/script.js"></script> </head> <body> <textarea id="inputxml"> <doc> <employee> <name>John Doe</name> <birthday>01-01-1990</birthday> <adress>Streetname 123</adress> </employee> <employee> <name>Jane Doe</name> <birthday>02-02-2000</birthday> <adress>Streetname 124</adress> </employee> </doc> </textarea> <button id="convertxml" type="button" onClick="convertxml()">Convert</button> <table id='theTable' border='1'><tr><td>Name</td><td>Birthday</td><td>Address</td></tr></table> </body> </html>
如何在循環的幫助下從 xml 文件動態獲取表到 ajax？
[英]How can I fetch table from xml file to ajax dynamically with the help of loop?
如何使用JavaScript或jQuery將動態生成的表轉換為DataTable？
[英]How can I convert dynamically generated table into DataTable using JavaScript or jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.