1. 홈
  2. 질의 응답
  3. 아약스에서 HTML을 동적으로 생성하십시오.

아약스에서 HTML을 동적으로 생성하십시오.

2017-04-17 4 views
-5

은 데이터를 기반으로 동적으로 입력되는 텍스트의 짧은 방법이 필요합니다. 은 다음과 같습니다. 쿼리에서 데이터를 가져 오는 것은 80 데이터이며 다른 이름으로 80 입력 텍스트를 만듭니다. 예 : menu1 menu2 menu3 menu4 ........ menu80.아약스에서 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

+0

실제 질문은 무엇입니까 ? [좋은 질문을하는 방법]을 읽어주세요. (https://stackoverflow.com/help/how-to-ask) – Utkanos

+0

@Utkanos 수동 입력 입력 = menu1, 이름 = menu2, 이름 = menu3, name = menu4 – Edofx

+0

질문을 편집하십시오. 달성하려는 목표, 시도한 목표, 구체적으로 작동하지 않는 목표를 분명하게 기술하십시오. 우리가 당신의 상황을 이해하기 위해 일해야하지 마십시오. – Utkanos

답변

0

사이트 돌려 각 요소의 텍스트 및 사용되는 각 메뉴의 이름을 입력 텍스트 박스를 생성하는 모든 요소를 ​​통해이 뜻 루프 (MENU1, 메뉴 2 등)

$(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

관련 문제

 관련 문제