循环用尽的Javascript

Question

I have a confusing problem where a line of code in my function is running before a loop which is stated above it. In my HTML I have:

<textarea id="textBox"></textarea>
<button id="submitButton" onclick="parseData()">submit</button>
<div id="put"></div>

And my JS function is:

function parseData() {
    var data = $("#textBox").val();
    var tab = /\t/;
    data = data.split(tab);
    $("#put").html($("#put").html() + "<table>");
    for (var i = 0; i < data.length; i++) {
        $("#put").html($("#put").html() + "<tr>"+data[i]+"</tr>");
    };
    $("#put").html($("#put").html() + "</table>");
    return;
};

The resulting html in $("#put") is this:

<table></table>
"SiO2 (%)Al2O3 (%)TiO2 (%)CaO2 (%)MgO2 (%) 8.21.25.31.51.8 45.32.52.60.210.5 65.23.48.70.0662.3 20.11.85.42.540.2 18.91.12.34.810.7"

I'm not sure why the final </table> is being placed before the for loop runs, and I'm not sure why the <tr> tags aren't being added within the for loop. Any pointers?

Answer 1

jQuery automatically closes up tags upon insertion. Try this.

function parseData() {
    var data = $("#textBox").val();
    var tab = /\t/;
    var put_html = $("#put").html() + "<table>";
    data = data.split(tab);
    for (var i = 0; i < data.length; i++) {
        put_html += "<tr>"+data[i]+"</tr>";
    };
    put_html += '</table>';
    $("#put").html(put_html);
    return;
};

However, I notice that you aren't using <td> elements. You might want to look into fixing that too.

Answer 2

Every time you are adding content into the html() property rather than building the entire content and adding it.

Since you are using jQuery you can bind the event using jQuery rather than adding that directly in the HTML

<textarea id="textBox"></textarea>
<button id="submitButton">submit</button>
<div id="put"></div>

$(function(){
    $("#submitButton").click(function(){
        parseData();
    });

    function parseData() {
        var data = $("#textBox").val();
        var tab = /\t/;
        data = data.split(tab);

        // Build your html
        $("#put").html('htmlstructure');
        return;
    }
});

Also you can look for something similar like concatenating the string in an array so that you don't create string isntances each time when you append, since strings are immutable.

Good example