js動態生成table實例

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

``

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章