js动态生成table实例

最新推荐文章于 2023-03-21 17:56:29 发布

程序猿火锅

最新推荐文章于 2023-03-21 17:56:29 发布

阅读量357

点赞数

分类专栏： html 文章标签： html js

本文链接：https://blog.csdn.net/qq_38227085/article/details/84145672

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

-----------------------------------------js代码片段-------------------------------------------------

var h = "<tr><td style='border:1px solid #5f5c5c;border-collapse:collapse;width:40%;text-align: center;'>列名1</td><td style='border:1px solid #5f5c5c;border-collapse:collapse;width:30%;text-align: center;'>列名2</td><td style='border:1px solid #5f5c5c;border-collapse:collapse;width:30%;text-align: center;'>列名3</td></tr>";
   if (result['ACCE'].length > 0) 
   		{
        	 for (var p = 0; p < result['ACCE'].length; p++)
                 { 
                 h += "<tr><td style='border:1px solid #5f5c5c;border-collapse:collapse;text-align: center;'>" + acc[p] + "</td><td style='border:1px solid #5f5c5c;border-collapse:collapse;text-align: center;'>" + acc1[p] + "</td><td style='border:1px solid #5f5c5c;border-collapse:collapse;text-align: center;'>" + acc2[p] + "</td></tr>";
                 }
         }
    $("#targetTable").append(h);

注：result['ACCE']为一数组，用来确定动态生成的行数；acc[p]、acc1[p]、acc2[p]为三个数组，用来给table赋值。（省略声明）

--------------------需要动态生成的table(html代码片段)-----------------------------------------------------------------------
<tr>
   <td>
            <div style="width:720px;margin:0 auto;direction:ltr;" dir='ltr'>
	            <table style="width: 480px;margin:auto;font-size:9pt;font-family: '宋体';text-align: center; border:1px solid #5f5c5c;border-collapse:collapse; cellspacing:0" id="targetTable" >
	            </table>
            </div>
   </td>
</tr>

``