Question

I want to add data s from input fields to the HTML Table dynamically when clicking the Add button as shown in the sample image. How can I accomplish this? Can I do it with PHP? As I m a beginner I can t find the exactly matched results from here, but I found a related thread, Creating a dynamic table using php based on users input data, but I think this process is done by 2 pages (1 page for inputs and another for showing that input data s in table) as per the code... Any help will appreciated.

Answer 1

假设你重新使用 j(主角),像以下那样做的工作:

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

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

  newRow += "</tr>";

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

这样做有更好的办法,但如果你刚刚开始学习,这或许是一个非常简单的开端。你们在这方面应当感兴趣的是: .click, .each, .val, 和.append。 d 我建议你检查docs格,给你以好的例子来扩大你们的知识。

Answer 2

如果你能够使用 j子,你就可以这样做。它不是给你以如何开始的想法的完全法。

  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。

这只是在前端。如果你有其他进程,如拯救新加入的行文,那么你就必须首先处理此事,然后在桌上显示。

Answer 3

首先,请说明:

enter image description here

into table, like this:

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

此外,在头或身体上添加这一 j:

$("#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> );
 });

在<代码>后面;不使用,只是密码的侧向。

Hope this can help you.

Answer 4

$(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);
            } 
          });
      });
  });

Answer 5

感谢让阁下的即时答复。我尝试了该守则,但由于我对<代码”的了解,我无法得出+结果。 Javagust/,j Query, 等等都很差。现在,我的法典就是这样:


HTML:


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <script src="jquery-1.11.1.min.js"></script>
  <script>
    $("#button").click(function() {
      var newRow = "<tr>";

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

      newRow += "</tr>";

      $("table").append(newRow);
    });
  </script>
</head>

<body>
  <form action="#" method="POST">
    <label>Name:</label><input type="text" />
    <label>Age:</label><input type="text" />
    <button name= buttonadd  type= button  id= button >Add</button>
  </form>
  <table border="1">
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
  </table>
</body>
</html>



因此,我期望你们会帮助我,因为我刚刚进入<条码>。 Javagust/和 Query。

友情链接