Question

这个问题可能很愚蠢，但由于我是JS和Jquery的新手，我一直在努力完成它。

我在页面中有一个表格，用户可以在其中编辑单元格值（我使用的是contenteditable属性）。单击“全部保存”按钮，我希望将表格的所有行中的当前值发送到服务器端操作方法。

请建议我如何实现这一目标或更好的方法来实现相同的功能。

Answer 1

点击Save All按钮后，您可以执行以下操作：

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

// read the data from the table using loop
  $('#myTable > tbody  > tr').each(function() {

  // here retrieve the values from the table cells 
  // Example
  var cellValue = $(this).... // you need to fill this code as per your table structure 

  // store all the data in an array
  var mydata = new Array ( cellValue, ....);
  var jsonData = JSON.stringify(mydata);

  // send the data to backend, e.g.
  $.post ("back/end/code", { data : jsonData }, function () {});

  });

});

Answer 2

非常感谢。这就是我想要的。但是，在创建array时需要稍加修改.Below是工作代码。

        function btnClicked() {
        // read the data from the table using loop
        var mydata = [];
        $('#testTable > tbody  > tr').each(function() {

            // here retrieve the values from the table cells 
            // Example
            var name = ($(this).find(".name").html());
            var age = ($(this).find(".age").html());

            var obj = { name: name, age: age };

            // store all the data in an array
            mydata.push(obj);


        });
        var jsonData = JSON.stringify(mydata);

        // send the data to backend, e.g. 
        //for now adding an alert
        for (var i = 0 ; i < mydata.length; i++) {

            alert(mydata[i].name + mydata[i].age);
        }
        $.post ("Test/SomeAction", { data : jsonData }, function () {});

    }

使用Jquery将整个表数据传递给action方法

2 个答案: