![20px]( "20px")
本文介绍了如何使用jquery进行动态设计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我在我的项目中进行过滤。所以，为此，我想动态创建设计，下面显示了两个代码片段。第一个代码是简单的HTML代码，我希望动态开发这个代码。第二个是脚本。在脚本中只有表行和表数据被创建，但根据我的设计我想要div也动态生成。 设计代码：I am doing filtration in my project. So, for that I want to create design dynamically, below two code snippet shown. First code is of simple HTML code which design I want to develop dynamically. and second is the script. In the script there are only table row and table data is created but as per my design I want div also generated dynamically.Code for design:<div class="usedcarinfo"> <div class="carimagediv"> <img src="images/banner3n.jpg" class="carimage" /> <img src="images/camera.fw.png" class="camera" /> <p class="camerafont">5 Photos</p> </div><div style="float:left"> <p class="carinfofont"><b>2010 Holden Commodore SV6</b> </p></div><div class="carinfoline"></div><br /><br /><div style="float:left"> <table> <tr> <td> <img src="images/km.fw.png" style="margin-left:15px; margin-top:0px" /> </td> <td> <p class="modelfont" style="margin-left:10px; margin-top:10px"><b>$10,000</b></p> </td> <td> <img src="images/car.fw.png" style="margin-left:30px; margin-top:5px" /> </td> <td> <p class="modelfont" style="margin-left:10px; margin-top:15px" ><b>2010 Model</b></p> </td> </tr> <tr> <td> <img src="images/petrol.fw.png" style="margin-left:15px; margin-top:-25px" /> </td> <td> <p class="modelfont" style="margin-left:10px; margin-top:-20px"><b>Unleaded</b></p> </td> <td> <img src="images/company.fw.png" style="margin-left:30px; margin-top:-25px" /> </td> <td> <p class="modelfont" style="margin-left:10px; margin-top:-20px" ><b>Karma</b></p> </td> <td> <p class="driveawayfont" style="margin-left:100px; margin-top:-5px" ><b>Drive Away</b></p> <p class="pricefont" style="margin-left:100px; margin-top:-10px" ><b>$19,690 </b> </p> </td> <td> <a href="#"><img src="images/inquiry.fw.png" /></a> </td> </tr> <tr> <td> <img src="images/speed.fw.png" style="margin-left:15px; margin-top:-25px" /> </td> <td> <p class="modelfont" style="margin-left:10px; margin-top:-20px" ><b>5 Speed Manual</b></p> </td> <td> <img src="images/view.fw.png" style="margin-left:30px; margin-top:-25px" /> </td> <td> <p class="modelfont" style="margin-left:10px; margin-top:-20px" ><b>View Detail</b> </p> </td> </tr> </table></div><div class="usedcarline" style="float:left; width:760px; margin-top:20px ;margin-left:-25px"></div></div> <!-- end usedcarinfo--> 我的脚本：My script: <script src="http://code.jquery.com/jquery-latest.js"></script> <script> function makeTable(data){ var tbl_body = ""; $.each(data, function() { var tbl_row = ""; $.each(this, function(k , v) { tbl_row += "<td style='color:red;'> "+v+"</td>"; }) tbl_body += "<tr>"+tbl_row+"</tr>"; }) return tbl_body; } function getusedcarFilterOptions(){ var opts = []; $checkboxes.each(function(){ if(this.checked){ opts.push(this.name); } }); return opts; } function updateusedcar(opts){ $.ajax({ type: "POST", url: "filter.php", dataType : 'json', cache: false, data: {filterOpts: opts}, success: function(data){ $('#snowboards tbody').html(makeTable(data)); } }); } var $checkboxes = $("input:checkbox"); $checkboxes.on("change", function(){ var opts = getusedcarFilterOptions(); updateusedcar(opts); }); updateusedcar();</script> 提前致谢。Thanks in advance.推荐答案 My script:My script: <script src="http://code.jquery.com/jquery-latest.js"></script> <script> function makeTable(data){ var tbl_body = ""; 这篇关于如何使用jquery进行动态设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-24 07:54