Creating XML file from HTML table?

Question

Currently I have a XML file and XSL file. The XSL file takes the XML file and creates an editable table in HTML. What I need to do now is to be able to click on a button and the table values are saved in a new XML file. What is the best method for doing this? It seems PHP would be good for making the XML file but have no idea how to get the values from a XSL made table. Preferably I would like to do it with XSL but if not JavaScript or PHP. If someone could point me in the right direction, even just by telling me which language can do this I would be very thankful.

XSL:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
    <table border="2">
        <tr>
            <th>firstname</th>
            <th>lastname</th>
            <th>age</th>
        </tr>

        <xsl:for-each select="people/person">
        <tr>
            <td><span contenteditable="true"><xsl:value-of select="firstname"/></span></td>         
            <td><span contenteditable="true"><xsl:value-of select="lastname"/></span></td>
          <td><span contenteditable="true"><xsl:value-of select="age"/></span></td>


        </tr>
        </xsl:for-each>
    </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

XML format I want:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="table.xsl"?>
<people>
    <person>
        <firstname>John</firstname>
        <lastname>Johnson</lastname>
        <age>20</age>
    </person>   
</people>

UPDATE: From here Getting value from table cell in javascript...not jquery I am now getting a list of values but they include the span tags so I am getting <span contenteditable="true">John</span>. How do I remove the span tags so I just get "John"? Below is the JavaScript I am using.

function GetCellValues()
{
    var table = document.getElementById('mytable');
    for (var r = 0, n = table.rows.length; r&lt;n; r++)
    {
        for (var c = 0, m = table.rows[r].cells.length; c&lt;m; c++)
        {
            alert(table.rows[r].cells[c].innerHTML);
        }
    }
}

score 1 · Accepted Answer · answered Apr 23 '14 at 14:27

the two problems you need to master before you can think about transformation of something are:

how to get the data back to the server
how to make sure that if someone sends crap your server code doesn't crash (crap like adding < > to the cell content or JavaScript etc.

Typically you use a HTML form, but that doesn't apply in your case, so you need to have a JavaScript and probably an Ajax call. To collect your data you can use this:

    function getCellValues() {
            var total = [];
            var table = document.getElementById('mytable');
            for (var r = 0; r < table.rows.length; r++) {
                var oneRow = [];
                for (var c = 0; c < table.rows[r].cells.length; c++) {
                    oneRow.push(table.rows[r].cells[c].children[0].innerHTML);
                }
                total.push(oneRow);
            }
            // Here you would post it;
            alert(JSON.stringify(total));
        }

A few pointers:

Other than in Java, in JavaScript line endings are evaluated for automatic semicolon insertion, so it makes a difference if you have your opening brackets on the same line (good) or the next (not so good)
The function here collects a two dimensional JavaScript array. Depending on your specific needs you might want to construct an array of more specific JavaScript objects (see below)
as in Java we usually start functions with a lower case
On the server side you still need to sanitize your input
There are MUCH better ways to do this - they come with a learning curve: Dojo, jQuery, AngularJS

A better way of collection:

    function getCellValues() {
            var total = [];
            var table = document.getElementById('mytable');
            for (var r = 0; r < table.rows.length; r++) {
                var oneRow = {};
                oneRow.firstName = table.rows[r].cells[0].children[0].innerHTML;
                oneRow.lastName = table.rows[r].cells[1].children[0].innerHTML;
                oneRow.age = table.rows[r].cells[2].children[0].innerHTML;
                total.push(oneRow);
            }
            // Here you would post it;
            alert(JSON.stringify(total));
        }

Hope that helps. (P.S.: the build in JSON object is only in decent browsers.

score 0 · Answer 2 · answered Apr 23 '14 at 14:22

If you want the content of an HTML element as plain text then use the textContent property (W3C DOM as implemented in most browsers) or the innerText property (older IE versions) e.g.

function getTextContent(element) {
  return typeof element.textContent != 'undefined' ? element.textContent : element.innerText;
}

function GetCellValues()
{
    var table = document.getElementById('mytable');
    for (var r = 0, n = table.rows.length; r&lt;n; r++)
    {
        for (var c = 0, m = table.rows[r].cells.length; c&lt;m; c++)
        {
            alert(getTextContent(table.rows[r].cells[c]));
        }
    }
}

The check in the getTextContent function might need to be improved to cater for all kind of browsers, in case one does not implement neither textContent nor innerText, in that case a recursive walk of all text descendant nodes can help.

Creating XML file from HTML table?

2 Answers2