循环运行顺序错误的Javascript

Javascript for loop running out of sequence

本文关键字：Javascript 错误 顺序 运行 循环      更新时间：2023-09-26

我遇到了一个令人困惑的问题，函数中的一行代码在上面所述的循环之前运行

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

我的JS函数是：

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;
};

$("#put")中产生的html如下：

<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"

我不确定为什么在for循环运行之前放置最后的</table>，也不确定为什么没有在for循环中添加<tr>标记。有指针吗？

插入标签后，jQuery会自动关闭标签。试试这个。 
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;
};

但是，我注意到您没有使用<td>元素。你可能也想考虑一下解决这个问题。

每次向html()属性中添加内容时，而不是构建整个内容并添加它。

由于您使用的是jQuery，您可以使用jQuery绑定事件，而不是直接在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;
    }
});

此外，您还可以寻找类似的东西，比如在数组中连接字符串，这样您就不会在每次追加时创建字符串，因为字符串是不可变的。

的好例子

相关文章：