如何将动态多行值插入数据库

时间:2018-02-12 12:32:00

标签: javascript php



 <script src="  https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
	 
<script>
		   var i=0;
currentRow = null;
                            $("button#savebutton").click(function(){   
                               					
                                var cat = $("#cat-list").val();
                                var display = $("#displayname").val();
                                var subcat = $("#subcat-list").val(); 
                                var order = $("#privilage").val();								
                                i++;
                                var new_row = "<tr id='row"+i+"' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat +"</td><td>"+order +"</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>";
                                if(currentRow){
                               
                      $("table tbody").find($(currentRow)).replaceWith(new_row);
                                  currentRow = null;
                                 }
                                 else{
                                 $("table tbody").append(new_row);
                                 }
                                 
                            });

                        $(document).on('click', 'span.deleterow', function () {
                                $(this).parents('tr').remove();
                               return false;
                        });
                        $(document).on('click', 'span.editrow', function () {
     currentRow= $(this).parents('tr');                  
	                  
					
                        });
						</script>
<script>
$(document).ready(function(){
$("#secondbtn").click (function(){
	                           var category = $("#cat-list").val();
                               var display = $("#displayname").val();
                               var subcat = $("#subcat-list").val(); 
                               var privilage = $("#privilage").val();
							    alert(category);
							  
							  $.ajax({
	
								type:"POST",

								url:"query1.php",

								data:{display:display_name,category:category,subcat:pagename,privilage:privilage},

									success:function(data){
	
										alert("successfully updated");
									}									
									}); 
							
							     });
								 });
</script>
		
&#13;
<html>
<body>
<form method="POST" action="">


<label>Select your Category:</label>
<input type="text" id="cat-list"/>
</br>


<label> Display Name:</label>
<input type="text" name="display_name" id="displayname" d />
</div>


<label> Select your Subcategory:</label>
<input type="text" id="subcat-list" >

<label>Set Order</label>
<select name="privilage" id="privilage" required>
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>



</form>



		<div class="col-md-12">
			<div class = "panel1">
				<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" onclick="getFirstClicked()" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
				
			</div>
		</div>

		</form>
		<form  class="form-horizontal" role="form" id="chargestableForm">
	<div class="col-md-12">
		<table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
                  <thead style="background-color:#CCE5FF">
                       <tr>
					      
                          <th>Category</th>
                          <th>DisplayName</th>
                          <th>Subcategory</th> 
                          <th>Order</th> 						  
                          <th colspan=2>Action</th>
					 </tr>
				</thead>
							<tbody>     
                         </tbody>
            </table>
			 <div class = "panel2">
				 <button type="submit" name="import" id="secondbtn"  > Import Database</button>
              </div>
			  </div>
           </form>
&#13;
&#13;
&#13;  上下文:在此代码中有一个html表单,当在表单中添加详细信息并单击添加按钮时,会创建一个可编辑和删除的表行。然后我们可以添加行数并将行添加到表中。我想在单击导入按钮时将这些表行值输入到数据库中。

0 个答案:

没有答案