PHP의 HTML 테이블에 동적으로 데이터 추가하기

Question

샘플 이미지와 같이 추가 버튼을 클릭하면 입력 필드의 데이터를 HTML 테이블에 동적으로 추가하고 싶습니다. 내가 이걸 어떻게 성취하는지. PHP로 할 수 있습니까? as i 'm 초보자 여기에서 정확히 일치하는 결과를 찾을 수 없습니다

그러나 관련 스레드를 찾았습니다. Creating a dynamic table using php based on users input data하지만이 프로세스는 2 페이지 (입력 페이지 1 개와 입력 데이터 페이지 표시 1 개)로 완료됩니다. 테이블에서) 코드에 따라 ... 어떤 도움을 주시면 감사하겠습니다. 당신이 jQuery를 사용할 수있는 경우

Answer 1

당신이 JQuery와 (주어진 태그)를 사용하는 가정하면, 다음과 같이 작동합니다 :

$("button").click(function() { 
    var newRow = "<tr>"; 

    $("form input").each(function() { 
    newRow += "<td>"+$(this).val()+"</td>"; 
    }); 

    newRow += "</tr>"; 

    $("table").append(newRow); 
}); 

이 작업을 수행하는 더 나은 방법이있다, 그러나 이것은 아마도 경우 시작하는 매우 간단한 장소입니다 그냥 배우기 시작 했어. 여기에 관심을 가져야 할 기능은 .click, .each, .val 및 .append입니다. jquery 문서를 확인해 보는 것이 좋습니다. 지식을 확장 할 수있는 좋은 예가됩니다. 이 같은 테이블에

:

<table id='mytable'> 
<tr> 
<tr> 
<td>Member Name</td><td><input type="text" name="member[]"></td> 
</tr> 
<tr> 
<td>Address</td><td><textarea></td> 
</tr> 
<tr> 
<td>Designation</td><td> 
    <select> 
    <option value="asd">Asd</option> 
    <option value="sda">Sda</option> 
</select></td> 
</tr> 
</tr> 
</table> 

<div> 
<input name='buttonadd' type='button' id='add_table' value='Add'> 
</div> 

을 그리고 머리 나 몸이 자바 스크립트를 추가

Answer 2

당신은 이렇게 할 수 있습니다. 전체 코드가 아니라 시작하는 법을 알려주는 코드입니다.

jQuery('#add').click(function(){ 
    var memberName = jQuery('#memberName').val(); 
    var address = jQuery('#address').val(); 
    var designation = jQuery('#designation').val();  

    // Do some saving process first, using ajax and sending it to a php page on the server 
    // then make that php return something to validate if it's succesfully added or something 
    // before you show it on table. You can use ajax like 
    jQuery.ajax({ 
      type: 'POST', 
      url: 'you php file url.php', 
      data: { name: memeberName, addr: address, desig: designation }, 
      dataType: 'json', // any return type you like 
      succes: function(response){ // if php return a success state 
        jQuery('#tableID tbody').append('<tr><td>' + memberName + '</td><td>' + address + '</td><td>' + designation + '</td></tr>'); 
      }, 
      error: function(response){ // if error in the middle of the call 
       alert('Cant Add'); 
      } 
    }); 
}); 

id를 사용자의 html 요소에있는 ID로 변경하십시오.

이것은 프런트 엔드 측에만 있습니다. 새로 추가 된 내용을 DB에 저장하는 것과 같은 다른 프로세스가 있으면 테이블에 표시하기 전에 먼저 처리해야합니다.

Answer 3

먼저,이를 만들어 보자 after(''); 내부

$("#add_table").click(function(){ 
$('#mytable tr').last().after('<tr><td>Member Name</td><td><input type="text" name="member[]"></td></tr><tr><td>Address</td><td><textarea></td></tr><tr><td>Designation</td><td><select><option value="asd">Asd</option><option value="sda">Sda</option></select></td></tr>'); 
}); 

enter를 사용하지 말고 코드를 옆으로 치면됩니다.

희망이 도움이 될 수 있습니다. 인스턴트 reply..i에 대한

Answer 4

타이 진은 그 코드를했지만, 나는 + 얻을 사촌 등 자바 스크립트, JQuery와, 내 지식, 결과를했습니다 없습니다입니다 매우 poor.now 내 코드는 다음과

같다

그래서 나는 당신이 내게 그냥 자바 스크립트와 jquery에 스테핑 메신저 coz 도움이 될 것으로 기대합니다.

Answer 5

$(document).ready(function() 
 
    { 
 
    $("#ser_itm").change(function() 
 
     { 
 
     var id=$(this).val(); 
 
     var dataString = 'id='+ id; 
 
     alert(dataString); 
 
     $.ajax 
 
      ({ 
 
      type: "POST", 
 
      url: "bar_pull.php", 
 
      data: dataString, 
 
      cache: false, 
 
      success: function(data) 
 
      { 
 
       $("#tbl").html(data); 
 
      } 
 
      }); 
 
     }); 
 
    });