アヤックスコードの略語

Question

コードが醜いと思っていました。それは長すぎるので、私はこれに簡略表記があると思っていました。私は助けが必要です！私の見解では

：クリック編集ボタンの後

<table class="table table-responsive table-bordered table-hover table-striped" id="table"> 
<thead> 
    <tr> 
     <th>ID</th> 
     <th>Product Name</th> 
     <th>Price</th> 
     <th>Action</th> 
    </tr> 
</thead> 

<tbody> 
<?php foreach($products as $key => $value) : ?> 
    <tr> 
     <td> 
      <span id="data-id"><?php echo $value->prod_id; ?></span> 
     </td> 
     <td> 
      <span id="data-prodname-<?php echo $value->prod_id; ?>"><?php echo $value->product_name; ?></span> 
     </td> 
     <td> 
      &#8369; <span id="data-price-<?php echo $value->prod_id; ?>"><?php echo $value->price; ?></span> 
     </td> 
     <td> 
      <a class="btn btn-primary btn-edit" id="edit-product-<?php echo $value->prod_id; ?>"> 
       <i class="glyphicon glyphicon-pencil"></i> Edit 
      </a> 
     </td> 
    </tr> 
<?php endforeach; ?> 
</tbody> 

、jQueryがトリガされます。そして、私は非常に長いコードを持っている私のjqueryを参照して、私はちょうどhtmlコードを置き換えます、そして、私はそれがこれの省略形だと思います。誰でも私を助けることができますか？前もって感謝します。

$(form).ajaxSubmit({ 
type: 'post', 
url: 'Jewelry_controller/edit_product_exe', 
dataType: 'json', 
data: dataString, 
success: function(callback) 
{ 
    var a; 
    var productContainer = '<table class="table table-responsive table-bordered table-hover table-striped">'; 
     productContainer += '<tr>'; 
     productContainer += '<th>ID</th>'; 
     productContainer += '<th>Product Name</th>'; 
     productContainer += '<th>Price</th>'; 
     productContainer += '<th>Action</th>'; 
     productContainer += '</tr>'; 

     for(var i = 0; i < callback.length; i++) 
     { 
      a = callback[i]; 
      var ternary = a.status == '1' ? "Active" : "Inactive"; 

      productContainer += '<tr>'; 
      productContainer += '<td><span id="data-id">' + a.id +'</span></td>'; 
      productContainer += '<td><span id="data-prodname-'+ a.id +'">' + a.product_name + '</span></td>'; 
      productContainer += '<td>&#8369<span id="data-price-'+ a.id +'">' + a.price + '</span></td>'; 
      productContainer += '<td>'; 
      productContainer += '<a class="btn btn-sm btn-primary btn-edit" data-toggle="modal" data-target="#product-modal" id="edit-product-' + a.id + '"><i class="glyphicon glyphicon-pencil"></i> Edit</a>'; 
      productContainer += '</td>'; 
      productContainer += '</tr>'; 
     } 

    productContainer += '</table>'; 

    $('#table-product').html(productContainer); 
} 
}); 

成功コードでは、長いロングコードが非常に長くなります。私はそれを短くしたい、誰も助けることができますか？ありがとうございました 私はAJAXを新しくしました。 Ajaxのポストについては

Answer 1

：jQueryを使ってカスタムHTMLマークアップを作成するための 訪問https://api.jquery.com/jquery.post/

。

 $('<div/>', { 
     'id':'myDiv1', 
     'class':'myClass', 
     'style':'cursor:pointer;font-weight:bold;', 
     'html':'<span>Creating dynamic content</span>', 
     'click':function(){ alert(this.id) }, 
     'mouseenter':function(){ $(this).css('color', 'red'); }, 
      'mouseleave':function(){ $(this).css('color', 'black'); } 
     }).appendTo('#myDiv2'); 

Answer 2

最高のアイデアは、HTMLに「html-in-javascript」を入れることです。

HTML

<template id="products-tpl"> 
<table class="table table-responsive table-bordered table-hover table-striped"> 
    <tr> 
     <th>ID</th> 
     <th>Product Name</th> 
     <th>Price</th> 
     <th>Action</th> 
    </tr> 
    <% for(var i = 0; i < data.length; i++) { %> 
     <tr> 
      <td> 
       <span id="data-id"><%=data[i].id %></span> 
      </td> 
      <td> 
       <span id="data-prodname-<%=data[i].id %>"><%=data[i].product_name %></span> 
      </td> 
      <td>&#8369<span id="data-price-<%=data[i].id %>"><%=data[i].price %></span></td> 
      <td> 
       <a class="btn btn-sm btn-primary btn-edit" data-toggle="modal" data-target="#product-modal" id="edit-product-<%=data[i].id %>"> 
       <i class="glyphicon glyphicon-pencil"></i> Edit</a> 
      </td> 
     </tr> 
    <% } %> 
</table> 

Javasript

$('#table-product').html(template("products-tpl", callback)); 

（それは、唯一のアイデアのコードを働いていない）あなたがここにテンプレートフレームワークの1つhttps://developer.mozilla.org/en/docs/JavaScript_templates