How to loop over table rows to export values in a CSV

Question

I have this table here and would like to save its content in a CSV. At the moment I am as far as this only works for the first row of the table. But I can add more rows via a button and now I want the saving to CSV to work for all rows.

I can't handle looping over the table, can anyone show me how?

Here's a fiddle: https://jsfiddle.net/jg3Lpt74/31/

 function csv() { var titel = document.getElementById('titel').value; var vorname = document.getElementById('vorname').value; var nachname = document.getElementById('nachname').value; var email = document.getElementById('email').value; const rows = [[titel, vorname, nachname, email]]; let csvContent = "data:text/csv;charset=utf-8,"; rows.forEach(function (rowArray) { let row = rowArray.join(";"); csvContent += row + "\\r\\n"; }); var encodedUri = encodeURI(csvContent); var link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "export.csv"); document.body.appendChild(link); // Required for FF link.click(); // This will download the data file named "my_data.csv". } 

 <table id="myTable" border=1> <thead> <tr> <th>#</th> <th>Geschlecht</th> <th>Anrede</th> <th>Titel</th> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td> <p> <label> <input type="checkbox" name="chk"/> <span></span> </label> </p> </td> <td> <div class="input-field"> <div> <select class="browser-default genderSelect" required> <option value="new" selected>Bitte auswählen</option> </select> </div> </div> </td> <td> <div class="input-field"> <div> <select class="browser-default gsAddress" required> </select> </div> </div> </td> <td> <input name="titel" id="titel" type="text"> </td> <td> <input name="vorname" id="vorname" type="text" class="validate"> </td> <td> <input name="nachname" id="nachname" type="text" class="validate"> </td> <td> <input name="email" id="email" type="text" class="validate"> </td> </tr> </tbody> </table> 

Answer 1

With more rows you can no longer use the same ids in each row of the table.

If you add titel , vorname etc. as class names rather than ids, then you will be able to call document.getElementsByClassName('titel'); to get the whole titel column as a collection of entries and then iterate over this collection

Answer 2

Problem

The input elements within your initial table row have id tags. You're adding a new row by appending a clone the last row of the table.

var newRow = $("#myTable tr:last").clone().appendTo("#myTable");

This means that all new inputs will have the same id s. If you attempt to access the input values via the input id s then you will only get the first one present in the DOM.

Furthermore, in your csv function you are only getting the inputs once. You need to get them every time you access a row.

Solution

Change the table in your HTML to have inputs of the form:

<input name="titel" class="titel" type="text">

Note that the id attribute has been changed to a class . The full tbody :

<tbody>
    <tr>
        <td>
            <p>
                <label>
                <input type="checkbox" name="chk"/>
                <span></span>
                </label>
            </p>
        </td>
        <td>
            <div class="input-field">
                <div>
                <select class="browser-default genderSelect" required>
                    <option value="new" selected>Bitte auswählen</option>
                </select>
                </div>
            </div>
        </td>
        <td>
            <div class="input-field">
                <div>
                <select class="browser-default gsAddress" required>
                </select>
                </div>
            </div>
        </td>
        <td>
            <input name="titel" class="titel" type="text">
        </td>
        <td>
            <input name="vorname" class="vorname" type="text" class="validate">
        </td>
        <td>
            <input name="nachname" class="nachname" type="text" class="validate">
        </td>
        <td>
            <input name="email" class="email" type="text" class="validate">
        </td>
    </tr>
</tbody>

In your csv function get a NodeList of your table rows. You then step through the list, ie accessing the table row by row, and get the inputs from each row by their class name. From this you can build your csv file.

function csv() {
    var rowList = document.getElementById('myTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    let csvContent = "data:text/csv;charset=utf-8,";

    for( var r = 0; r < rowList.length; r++  ) {
        var row = rowList[ r ];
        var titel = row.getElementsByClassName('titel')[0].value;
        var vorname = row.getElementsByClassName('vorname')[0].value;
        var nachname = row.getElementsByClassName('nachname')[0].value;
        var email = row.getElementsByClassName('email')[0].value;
        csvContent += [titel, vorname, nachname, email].join(";") + "\r\n";
    }

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "export.csv");
    document.body.appendChild(link); // Required for FF

    link.click(); // This will download the data file named "my_data.csv".
}