xml代码如何用JS动态转换成表格？
[英]How can I convert xml code dynamically to table with JS?
问题描述
I want to display xml code as a table for better readability.
我想将 xml 代码显示为表格以提高可读性。 I don't want to use XML parser, just a quick copy, paste converter.我不想使用 XML 解析器，只是一个快速复制、粘贴转换器。 But the way I'm coding it right now, is still very time consuming.但是我现在编码的方式仍然非常耗时。 Is there a way to convert it dynamically?有没有办法动态转换它？ So for every tag in the xml code a new row/cell etc?那么对于 xml 中的每个标签，一个新的行/单元格等等？
In this example the XML is already in the text area.在此示例中，XML 已在文本区域中。 It contains 2 employees.它包含 2 名员工。 (This will be a lot more, that's why I said time consuming) With a button you first convert it to innerHTML of a div called "output". （这会更多，这就是为什么我说耗时）使用一个按钮，你首先将它转换为一个名为“输出”的 div 的 innerHTML。 I thought that was neccesairy to get the data into the document and convert it to a table.我认为将数据放入文档并将其转换为表格是必要的。 But as you can see, that would mean I would have to adjust the JS code + table for all employees.但如您所见，这意味着我必须为所有员工调整 JS 代码 + 表。 And some times the xml will contain random number employees.有时 xml 将包含随机编号的员工。 So a dynamical way would be better.所以动态的方式会更好。 Thank you in advance先感谢您
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
I wouldn't place the xml in a <textarea> unless it's absolutely necessary, but, more generally, I would create a dynamic table, using xpath, this way:除非绝对必要，否则我不会将 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.