Question

我正在使用普通jane JavaScript和Jquery的混合来动态创建表。我使用for循环来遍历从Ajax调用返回的数据，但它没有创建新行。因此，我使用警报输出html，我可以看到表格元素的混合，包括显示的tbody，即使我没有明确地创建一个tbody。

Ajax代码，在“完成”的地方，我创建了一个表：

function performSearch(){
    var q = $("input[name='search']").val();
    var url = "performsearch.php";
    $.ajax({
        url: url,
        method: "post",
        data: { 'q' : q },
        dataType: "json"
    }).done(function(data) {
        /* the table creating part of the code - something wrong in here */
        var output = $("#output");
        var table = document.createElement("table");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        var button = document.createElement("button");
        output.append( $(table) );
        $(table).append( $(tr) );
        $(tr).append( $(td).attr("colspan","100%") );
        $(td).append( $(button).attr("type","button").on("click",function() {
                 exportOutput(data);
             }).html("Export"));

        $(table).append("<tr>\n"); // I'm clearly adding a tr tag, but it doesn't show up
        $(table).append("   <th>id</th>\n");
        $(table).append("   <th>processed thru</th>\n");
        $(table).append("</tr>"); //ending the tr tag

        for(i=0;i<data.length;i++){ //let's say only one record is returned
            $(table).append("<tr>\n"); //clearly adding a tr tag, but it's not showing up
            $(table).append("   <td>"+data[i]['id']+"</td>\n");
            $(table).append("   <td>"+data[i]['processed_thru']+"</td>\n");
            $(table).append("</tr>\n");
        }
    }).
    fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + jqXHR + ", " + textStatus );
    });
}

这是它产生的html：

<table>
    <tbody>  <!-- look at tbody tag, where'd it come from? -->
    <tr><td colspan="100%"><button type="button">Export</button></td></tr>
    <tr></tr> <!-- look at this extra tr tag, where'd it come from? -->
    <tr></tr>\n\ <!-- look at this extra tr tag, where'd it come from? -->
    </tbody>\n\ <!-- I didn't add this -->
    <th>id</th> <!-- th tag not wrapped in a tr tag -->
    <th>processed thru</th>
    <th>status</th>
    <td>1568</td> <!-- td tags not wrapped in row tag -->
    <td>06/03/2016</td>
    <td>ACTIVE</td> <!-- no tr tag following the end of the td tags -->
</table>

Answer 1

我接受了评论并使用它们将代码缩减为使用所有DOM方法创建内容，只有一个字符串用于定义iframe样式。结果修剪了许多代码行：

function performSearch(){
    var q = $("input[name='search']").val();
    var url = "performsearch.php";
    $.ajax({
        url: url,
        method: "post",
        data: { 'q' : q },
        dataType: "json"
    }).done(function(data) {
        $("#output").html('');
        var output = $("#output");
        var table = document.createElement("table");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        var button = document.createElement("button");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        $(cell1).attr("colspan","100%");
        $(cell1).append( $(button).attr("type","button").attr("name","export").on("click",function() {
                 exportOutput(data);
             }).html("Export"));
        var row2 = table.insertRow(1);
        var headerString = "id,processed_thru,document_number_j,status,case_number,name_of_court,file_date,date_of_entry,expiration_date,amount_due,interest_rate,plaintiff,defendant,mailed";
        var headerArray = headerString.split(",");
        for(i=0;i<headerArray.length;i++){
            row2.insertCell(i).outerHTML = "<th>"+headerArray[i]+"</th>";
        }

        for(i=0;i<data.length;i++){
            var dataRow = table.insertRow(i + 2);
            for(ii=headerArray.length - 1;ii>-1;ii--){
                dataRow.insertCell(i).outerHTML = "<td>"+data[i][headerArray[ii]]+"</td>";
            }
        }

        var inlineStyle = document.createElement("style");
        inlineStyle.innerHTML = "#iframe{ display:none; width:10px;height:10px;border:#f00 1px solid; }\n";
        var iframe = document.createElement("iframe");
        iframe.setAttribute("id","iframe");

        //finally, stitch all the pieces together inside of the output div:
        output.append(inlineStyle);
        output.append(iframe);
        output.append(table);

    }).
    fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + jqXHR + ", " + textStatus );
    });
}

javascript createElement表添加不需要的tbody

1 个答案: