Question

我有一个填充内容的HTML表格，我想将其转换为XML。我不能使用jQuery或ANY库。我必须使用vanilla JavaScript来执行此操作。 Nearly every tutorial I find says how to convert XML to HTML,但没有人说如何在不使用详细for loop或jQuery的情况下从XML转换为HTML。

经过更多的研究，我认为我需要的是this方法，但我无法弄清楚如何使用它。它似乎想要将XML文档作为参数，但我想基于我的HTML表创建一个新的XML文件。

有没有办法在没有循环或jQuery的情况下将HTML表转换为XML？谢谢！

Answer 1

有没有办法将HTML表转换为没有循环的XML - ＆gt; 是的，使用递归，但循环可能更容易。

关于代码的大小，在普通的javascript IS代码中操作html DOM很重，这就是为什么像jquery这样的库。

Answer 2

您可以使用XSLT将XML转换为HTML

http://en.wikipedia.org/wiki/XSLT

Answer 3

以下是我没有XML DOM API的解决方案。

function export2xml() {
  let data = `
    <?xml version="1.0" encoding="UTF-8"?>
    <js-skills-list>
    ${Array.from(document.querySelectorAll("tbody tr"))
      .map(
        skill => `
      <skill>
        <name>${skill.children[0].innerText}</name>
        <author>${skill.children[1].innerText}</author>
        <description>${skill.children[2].innerText}</description>
      </skill>
    `
      )
      .join("")}
    </js-skills-list>
  `;
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], {
    type: "text/xml"
  }));
  a.setAttribute("download", "data.xml");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #aaa;
  padding: 0.5rem;
  text-align: left;
}

td {
  font-size: 0.875rem;
}

.btn-group {
  padding: 1rem 0;
}

button {
  background-color: #fff;
  border: 1px solid #000;
  margin-top: 0.5rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

<h3>JavaScript Skills</h3>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Author</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jQuery</td>
      <td>John Resig</td>
      <td>The Write Less, Do More, JavaScript Library.</td>
    </tr>
    <tr>
      <td>React</td>
      <td>Jordan Walke</td>
      <td>React makes it painless to create interactive UIs.</td>
    </tr>
    <tr>
      <td>Vue.js</td>
      <td>Yuxi You</td>
      <td>The Progressive JavaScript Framework.</td>
    </tr>
  </tbody>
</table>

<div class="btn-group">
  <button onclick="export2xml()">xml</button>
</div>

将HTML表转换为XML

3 个答案: