1

I have a task - Input: 1. An array of columns and types of the columns (2 dimensions array) 2. name of the table in SQL 3. table index

Output: Building a dynamic table that show the data from this table. Each row should have 2 buttons - edit and delete. and also an empty row with a button - create.

If i want to edit or delete a row, i dont want to go to another page, i need to use JQuery and after edit - the row should become as something that i can change, and if i delete, it would be deleted.

I know how to build the table (with for loop) But which JQuery to use and how?

4

2 回答 2

4

动态表构建有很多解决方案。

首先，很多人会推荐数据表。这是一个庞大的jQuery 插件，我个人认为它不必要的复杂并且需要一段时间才能掌握 - 但是它非常强大。

您需要使用 AJAX，这是对您在服务器端检索数据的页面的异步（在后台）调用（最常见的是通过 PHP）。你可以在这里阅读。这很简单，网上都有教程。

最后，一旦您学习了 AJAX，我（个人）执行以下操作：

  • AJAX 获取我的数据
  • 当数据返回到变量中时，比如由success()AJAX 调用中的函数返回的“数据”，我动态构建表元素以包含所需的数据（通常使用 jQuery 的$.each(data, function (key, values) { ...方法），并创建大量<tr>元素。
  • 我将这些元素附加到表中。
  • 我编写自定义函数来检测屏幕上的行与非屏幕上的行之间的差异。

就我个人而言，我会自己写这篇文章——这样你会学到很多东西，并且将来可能会更好地使用数据表来充分发挥它的潜力。

代码示例

假设您已经了解了 AJAX，因为我不是为您编写的 - 它遍布整个网络。在成功函数中，构建您的表格元素。

success: function(data) {
    var rows = "";
    $.each(data, function(key, values) {
        rows += "<tr><td>" + values.name + "</td></tr>";
        // Add as much extra markup as you want here
    });

    // Finally, add this to the table
    $('#yourTable').prepend(rows);
}

注意：这完全不在我的脑海中，所以值得先检查一下；）

一个简单的例子，这个问题很快就会结束，但希望不管这些信息都能让你走上正轨。

于 2013-07-07T17:40:49.073 回答
2

假设您使用 html5 数据属性创建行，该属性称为id存储每个行 ID 的位置。

生成的行看起来像这样：

<tr>
    <!--some cells-->
    <td>
        <input type="button" class="rowdeletebutton" data-id="1">
    </td>
</tr>

现在，将一个事件绑定到删除按钮并使用 jQuery ajax 调用将删除数据发布到服务器。由于行是动态生成的，我们需要使用事件委托。on()带有 3 个参数的方法为我们解决了这个问题：

$(document).on('click', '.rowdeletebutton', function(){

    var id = $(this).data('id');

    $.ajax({
        url: 'page.php',
        type: 'POST',
        data: { rowIdToDelete: id },
        success: function(data){
            console.log(data.Message);
        }
    });

});

最后，处理服务器上的 ajax 调用（我调用的页面page.php）：

$idToDelete = $_POST['rowIdToDelete'];

if(isset($idToDelete))
{
    //delete the row with id = $idToDelete

    //and assuming everything went well, notify the client:

    $responseToClient = 
        array('Message' => 'Row ' . $idToDelete . ' successfully deleted' );

    echo json_encode($responseToClient);
}

编辑按钮的原理相同。

于 2013-07-07T17:36:52.817 回答