如何使用 CSS、HTML、JavaScript 和 jQuery 将输入单元格添加到转置表？

Question

我正在动态添加到转置表中。 添加标题有效； 但是，当我添加表格详细信息 (td) 时，它们会出现在表格下方而不是右侧。

CSS转置表：

table { border-collapse: collapse; }
tr, tbody { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

表格 HTML：

<table>
    <tr id="tableHeaders">
        <!-- Place for exercise headers -->
    </tr>
                                
    <tbody id="tableBody">
        <tr>
            <td>20/04/2021</td>
            <td>20</td>
            <td>10</td>
        </tr>
        <tr>
            <td>27/04/2021</td>
            <td>21</td>
            <td>11</td>
        </tr>
                                    
        <!-- Place for exercise details -->
    </tbody>
                                    
</table>

js来填充表：

//Populate the variable number of headers and keep count.
var numHeaders = 1;
$("<th>Date</th>").appendTo($("#tableHeaders"));
$.each(responseJson1a, function() {
    $("<th>"+ this.edeType + " - " + this.edeUnit + "</th>").appendTo($("#tableHeaders"));
        
    numHeaders++;
});

//Create an input detail cell for each header 
$("<tr>").appendTo($("#tableBody"));
            
for(let i = 0; i < numHeaders; i++) {
    $("<td><input></td>").appendTo($("#tableBody"));
}
            
$("</tr>").appendTo($("#tableBody"));

这是结果：

该表应如下所示：

这是表格未转置时的样子：

Answer 1

您在tbody而不是在任何 tr tag 内添加输入。 所以，你可以只使用:last这将引用最后添加的 tr 标签，然后在这个 tr 中你可以添加你的输入。

演示代码：

 //just for demo.. var responseJson1a = [{ "edeType": "Speed", "edeUnit": "km/h" }, { "edeType": "Speed", "edeUnit": "km/h" }] var numHeaders = 1; $("<th>Date</th>").appendTo($("#tableHeaders")); $.each(responseJson1a, function() { $("<th>" + this.edeType + " - " + this.edeUnit + "</th>").appendTo($("#tableHeaders")); numHeaders++; }); $("<tr></tr>").appendTo($("#tableBody"));//new tr.. for (let i = 0; i < numHeaders; i++) { $("<td><input></td>").appendTo($("#tableBody tr:last")); //append to last tr which is added }

 table { border-collapse: collapse; } tr, tbody { display: block; float: left; } th, td { display: block; border: 1px solid black; padding: 2px; height: 20px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <table> <tbody id="tableBody"> <!--move it inside--> <tr id="tableHeaders"> </tr> <tr> <td>20/04/2021</td> <td>20</td> <td>10</td> </tr> <tr> <td>27/04/2021</td> <td>21</td> <td>11</td> </tr> <!-- Place for exercise details --> </tbody> </table>