向表添加行并发送到服务器，通过jquery将表发布到php [英] Add row to table and send to server, post table via jquery to php

问题描述

我正在尝试创建一个表，我可以通过单击按钮添加新行，然后将表发送到服务器，以便记住页面刷新时的信息。下面是一个按钮，它成功地将一行添加到具有当前时间的表中。但是，当我通过发送到服务器按钮将表发送到服务器时，它不会回显更新的表，只回显原始表。如果弄明白的话，这将是一种解脱。

I'm trying to make a table where I can add a new row with a button click and then send the table to the server so it remembers the information on page refresh. Below is a button which successfully adds a row to a table with the current time. However, when I send the table to the server via the "Send to Server" button it does not echo back the updated table, only the original. It would be such a relief to get this figured out.

HTML：

<input type = "button" id = "send" value = "Send to Server" />
<input type = "button" id = "add" value = "Add Row" />
<table class="table table-striped">
        <tr>
            <td><h2>In</h2></td>
            <td><h2>Out</h2></td>
            <td><h2>Total</h2></td>
        </tr>
        <tr>
            <td>InData</td>
            <td>OutData</td>
            <td>TotalData</td>
        </tr>
</table>

JS：

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">

$("#add").click(function(){

    var dt = new Date();
    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time
    $('table > tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>'); //add row to table with current time

});

$(function(){
    var dataArr = [];
    $("table").each(function(){
        dataArr.push($(this).html());
    });
    $('#send').click(function(){
        $.ajax({
          type : "POST",
          url : 'timesheet.php',
          data : "content="+dataArr,
          success: function(data) {
              alert(data);// alert the data from the server
          },
          error : function() {
          }
         });
    });
});
</script

PHP（timesheet.php）：

PHP (timesheet.php):

<?php 
    echo $_REQUEST['content'];
?>

推荐答案

当我发送通过发送到服务器按钮表到服务器它不回显更新的表，只回原点。

when I send the table to the server via the "Send to Server" button it does not echo back the updated table, only the original.

解决方案

使用 .on（）而不是 .click（ ）

<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">

$(document).on('click', '#add', function(){

    var dt = new Date();
    var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time
    $('table > tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>'); //add row to table with current time

});

$(document).on('click', '#send', function(){
    var dataArr = [];
    $("table").each(function(){
        dataArr.push($(this).html());
    });
    $('#send').click(function(){
        $.ajax({
          type : "POST",
          url : 'timesheet.php',
          data : "content="+dataArr,
          success: function(data) {
              alert(data);// alert the data from the server
          },
          error : function() {
          }
         });
    });
});
</script>

已编辑：

您正在使用的 click（）绑定称为直接绑定，它只会将处理程序附加到已存在的元素 。它不会受到将来创建的元素的约束。为此，您必须使用 on（）创建委托绑定。

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().

来自 .on（） 的文档：

From the documentation of .on():

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

这篇关于向表添加行并发送到服务器，通过jquery将表发布到php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！