如何使用jquery进行动态设计 [英] How to do dynamic design using jquery

问题描述

我在我的项目中进行过滤。所以，为此，我想动态创建设计，下面显示了两个代码片段。第一个代码是简单的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>
            &nbsp;&nbsp; <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.

推荐答案

10,000 < / b > < / p >
< / td >
< span class =code-keyword>< td >
< img src = images / car.fw.png style = 保证金左：30像素; margin-top：5px / >
< / td >
< td >
< p class = modelfont style = margin-left：10px; margin-top：15px > < b > 2010型号< ; / b > < / p >
< ; / td >
< / tr >
< tr >
< td >
< img src = images / petrol.fw.png style = 保证金左：15像素; margin-top：-25px / >
< / td >
< td >
< p class = modelfont style = margin-left：10px; margin-top：-20px > < b > 无铅< / 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=\"d riveawayfont\" style=\"margin-left:100px; margin-top:-5px\" ><b>Drive
Away</b></p>
<p class=\"pricefont\" style=\"margin-left:100px; 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>
&nbsp;&nbsp; <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/vi ew.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&g t;
<div class=\"usedcarline\" style=\"float:left; width:760px; margin-top:20px ;margin-left:-25px\">
</div>
</div> <!-- end usedcarinfo-->

19,690 </b> </p> </td> <td> &nbsp;&nbsp; <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:

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(data, function() { var tbl_row = "";

这篇关于如何使用jquery进行动态设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！