在循环jquery中动态创建和

作者: 喜欢一个人丶
发布时间: 2024-08-18 06:53:24 (1月前)
转自：

3 条回复

0#
回复此人
逆转的风 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $("#AddRow").on("click", function() { $("#tbl").append("<tr><td>Blah</td><td>Bll</td></tr>") for (let i = 0; i < 3; i++) { $("#tbl").append("<tr><td>BlahLoop</td><td>Bll Loop</td></tr>") } }) </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button id=AddRow>Click To Add </button> <table id="tbl" style="width: 540px; ; float: left; border-collapse: collapse;" border="1"> <tbody> <tr> <td> FROM:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> ADDRESS:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> CONTACT NUMBER:</td> <td>Blah Blah Blah Blah</td> </tr> <tr style="border: none; height: 20px;"> <td style="border: none; text-align: center; height: 20px;" colspan="2"><strong></strong></td> </tr> <tr> <td> TO:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> ADDRESS:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> BARANGAY:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> CITY & PROVINCE:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> CONTACT NUMBER:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> PRODUCT & PRICE</td> <td>Blah Blah Blah Blah</td> </tr> <tr style="border: none; height: 18px;"> <td style="border: none; text-align: center; height: 18px;" colspan="2"> </td> </tr> </tbody> </table> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
你抱着孩子@先跑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以动态解决此问题，如下所示。 </p> <P> 从table_1迭代值并将其推入数组，然后使用单击按钮，您可以将这些表详细信息附加到另一个表中，如下所示 </p> <P> //假设数组“value”由table_1数据组成。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> let value = ['Bathri','Coimbatore','23']; let header = ["Name","Address","Age"]; $("#AddRow").on("click", function() { for(let v=0; v < 3; v++){ $("#tbl").append("<tr><td>"+header[v]+"</td><td>"+value[v]+"</td></tr>") } }) </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button id=AddRow>Click To Add </button> <table id="tbl" style="width: 540px; ; float: left; border-collapse: collapse;" border="1"> <tbody> <tr> <td> FROM:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> ADDRESS:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> CONTACT NUMBER:</td> <td>Blah Blah Blah Blah</td> </tr> <tr style="border: none; height: 20px;"> <td style="border: none; text-align: center; height: 20px;" colspan="2"><strong></strong></td> </tr> <tr> <td> TO:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> ADDRESS:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> BARANGAY:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> CITY & PROVINCE:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> CONTACT NUMBER:</td> <td>Blah Blah Blah Blah</td> </tr> <tr> <td> PRODUCT & PRICE</td> <td>Blah Blah Blah Blah</td> </tr> <tr style="border: none; height: 18px;"> <td style="border: none; text-align: center; height: 18px;" colspan="2">  </td> </tr> </tbody> </table> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论