從ajax動態創建HTML

-5

需要根據數據動態輸入文本的簡短方式.. like;從查詢中獲取數據是80個數據，並在不同的名稱中創建80個輸入文本。例如：menu1 menu2 menu3 menu4 ........ menu80。從ajax動態創建HTML

<li> 
     <div class="item-content"> 
      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu1" name="menu1" type="text" readonly> 
       </div> 
       <div class="item-after"> 
        <input id="harga1" name="harga1" type="hidden" class="hrg" readonly> 
        <select id="jumlah1" name="jumlah1" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 
       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu2" name="menu2" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga2" name="harga2" type="hidden" class="hrg" readonly> 
        <select id="jumlah2" name="jumlah2" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 
       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu3" name="menu3" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga3" name="harga3" type="hidden" class="hrg" readonly> 
        <select id="jumlah3" name="jumlah3" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 
       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu4" name="menu4" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga4" name="harga4" type="hidden" class="hrg" readonly> 

        <select id="jumlah4" name="jumlah4" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu5" name="menu5" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga5" name="harga5" type="hidden" class="hrg" readonly> 

        <select id="jumlah5" name="jumlah5" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu6" name="menu6" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga6" name="harga6" type="hidden" class="hrg" readonly> 

        <select id="jumlah6" name="jumlah6" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu7" name="menu7" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga7" name="harga7" type="hidden" class="hrg" readonly> 

        <select id="jumlah7" name="jumlah7" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu8" name="menu8" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga8" name="harga8" type="hidden" class="hrg" readonly> 

        <select id="jumlah8" name="jumlah8" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu9" name="menu9" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga9" name="harga9" type="hidden" class="hrg" readonly> 

        <select id="jumlah9" name="jumlah9" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu10" name="menu10" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga10" name="harga10" type="hidden" class="hrg" readonly> 

        <select id="jumlah10" name="jumlah10" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu11" name="menu11" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga11" name="harga11" type="hidden" class="hrg" readonly> 

        <select id="jumlah11" name="jumlah11" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu12" name="menu12" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga12" name="harga12" type="hidden" class="hrg" readonly> 

        <select id="jumlah12" name="jumlah12" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu13" name="menu13" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga13" name="harga13" type="hidden" class="hrg" readonly> 

        <select id="jumlah13" name="jumlah13" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu14" name="menu14" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga14" name="harga14" type="hidden" class="hrg" readonly> 

        <select id="jumlah14" name="jumlah14" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu15" name="menu15" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga15" name="harga15" type="hidden" class="hrg" readonly> 

        <select id="jumlah15" name="jumlah15" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu16" name="menu16" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga16" name="harga16" type="hidden" class="hrg" readonly> 

        <select id="jumlah16" name="jumlah16" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu17" name="menu17" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga17" name="harga17" type="hidden" class="hrg" readonly> 

        <select id="jumlah17" name="jumlah17" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu18" name="menu18" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga18" name="harga18" type="hidden" class="hrg" readonly> 

        <select id="jumlah18" name="jumlah18" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu19" name="menu19" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga19" name="harga19" type="hidden" class="hrg" readonly> 

        <select id="jumlah19" name="jumlah19" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu20" name="menu20" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga20" name="harga20" type="hidden" class="hrg" readonly> 

        <select id="jumlah20" name="jumlah20" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu21" name="menu21" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga21" name="harga21" type="hidden" class="hrg" readonly> 

        <select id="jumlah21" name="jumlah21" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu22" name="menu22" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga22" name="harga22" type="hidden" class="hrg" readonly> 

        <select id="jumlah22" name="jumlah22" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu23" name="menu23" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga23" name="harga23" type="hidden" class="hrg" readonly> 

        <select id="jumlah23" name="jumlah23" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu24" name="menu24" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga24" name="harga24" type="hidden" class="hrg" readonly> 

        <select id="jumlah24" name="jumlah24" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu25" name="menu25" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga25" name="harga25" type="hidden" class="hrg" readonly> 

        <select id="jumlah25" name="jumlah25" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu26" name="menu26" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga26" name="harga26" type="hidden" class="hrg" readonly> 

        <select id="jumlah26" name="jumlah26" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu27" name="menu27" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga27" name="harga27" type="hidden" class="hrg" readonly> 

        <select id="jumlah27" name="jumlah27" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu28" name="menu28" type="text" readonly> 


       </div> 
       <div class="item-after"> 
        <input id="harga28" name="harga28" type="hidden" class="hrg" readonly> 

        <select id="jumlah28" name="jumlah28" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li> 

    <li> 
     <div class="item-content"> 

      <div class="item-inner"> 
       <div class="item-title item-input"> 
        <input id="menu29" name="menu29" type="text" readonly> 

       </div> 
       <div class="item-after"> 
        <input id="harga29" name="harga29" type="hidden" class="hrg" readonly> 

        <select id="jumlah29" name="jumlah29" class="jml item-input"> 
         <option disabled selected>Jumlah</option> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
        <input type='hidden' class='amount'> 


       </div> 
      </div> 
     </div> 
    </li>

檢查小提琴：https://jsfiddle.net/r5hta8ng/1/

來源

2017-04-17 Edofx

你是什麼實際問題？請閱讀[如何提出一個很好的問題]（https://stackoverflow.com/help/how-to-ask） – Utkanos

@Utkanos我需要從手動輸入name = menu1，name = menu2，name = menu3， name = menu4 – Edofx

請編輯問題。清楚說明你想要達到的目標，你已經嘗試了什麼，特別是什麼不起作用。不要讓我們必須努力瞭解你的情況。 – Utkanos

這將環通該網站返回並與每個元素的文本和每個菜單中使用的名稱創建一個輸入文本框的所有元素（MENU1，MENU2等。）

$(document).ready(function() { 
    var id = parse("id"); 
    $.get("https://edoofx.000webhostapp.com/get_menu.php?id=89", function(data) { 
     var note = $.parseJSON(data); 
     for(var i=0;i< 100; i++){ 
      if(note["menu"+i] != ''){ 
       $('#appendItems').append('<input type=\'textbox\' name=\'menu'+i+'\' value=\'' + note["menu"+i] + '\'></input>').append('</br>'); 
      } 
     } 
    }); 
}); //document ready

工作小提琴 https://jsfiddle.net/r5hta8ng/4/

來源

2017-04-17 17:29:17 ProgrammerV5

從ajax動態創建HTML

回答

相關問題