在javascript中动态增加HTML表的行大小

dynamically increase row size of HTML table in javascript

本文关键字：HTML javascript 动态 增加      更新时间：2023-09-26

我是JavaScript的新手，只是学习它的基础知识。我正在做一个示例程序，并用一个JavaScript程序在div中的html页面中显示一些数据。但它不是动态的。我有一些值，比如名字、地址、年龄和少数员工的状态，当用用户名登录时，在html页面中显示以上详细信息。这是一个简单的程序。

我想做的是，我想动态地增加div或表的大小，在那里我可以显示使用的详细信息，如地址、年龄、状态等。如果一些用户有更多的详细信息那么我想把它添加到html页面中。我该怎么做？？在home.jsp中，我有以下代码。

<table>
    <div id="name1" width:400px;"></div>
    <div id="address1" width:400px;"></div>
    <div id="age1" width:400px;"></div>
    <div id="status1" width:400px;"></div>
</table>

这是我在home.js 中使用的函数

function(json)
{   
    var content= $('#name1').replaceWith('<tr><td> Name: ' + json.name + '<tr><td>');
    var content= $('#address1').replaceWith('<tr><td> Name: ' + json.address + '<tr><td>');
    var content= $('#age1').replaceWith('<tr><td> Name: ' + json.age + '<tr><td>');
    var content= $('#status1').replaceWith('<tr><td> Name: ' + json.status + '<tr><td>');
}

首先你需要做一个循环，在中

你必须使用append()，例如

$( "#your_div_id" ).append( "<tr><td> your_label: ' + json.your_values + '<tr><td>'" );

参考链接

首先，您需要更改类似HTML的

<table>
    <tr id="name1"></tr>
    <tr id="address1"></tr>
    <tr id="age1"></tr>
    <tr id="status1"></tr>
</table>

如果你的json是有效的，那么你可以使用append（），比如

$('#name1').append('<td> Name: ' + json.name + '</td>');
$('#address1').append('<td> Address: ' + json.address + '</td>');
$('#age1').append('<td> Age: ' + json.age + '</td>');
$('#status1').append('<td> Status: ' + json.status + '</td>');

实时演示

您必须阅读JQuery-api文档。

网址：http://api.jquery.com/append/

可能您使用了.append()、.toAppend()、.prepand()、.after()等。

代码示例（.fafter（））

$('#table' tr:last).after('<tr><th width="10%">' + //your code here // + '</th></tr>');
相关文章：