Cách lưu trữ dữ liệu trong bảng HTML bằng JavaScript

Question

Là nhà phát triển, chúng tôi luôn được yêu cầu làm nhiều hơn cho người dùng của mình. Họ muốn các trang Web của họ nhanh hơn, nhỏ hơn và có nhiều tính năng hơn. Điều này có nghĩa là bạn phải bắt đầu làm việc nhiều hơn với JavaScript và jQuery ở phía máy khách. Bằng cách thực hiện nhiều mã hóa phía máy khách hơn, bạn giảm thiểu việc gửi lại cho máy chủ, do đó tăng hiệu suất. Trong bài viết đầu tiên này của loạt bài về cách làm việc trong HTML và API Web, tôi sẽ chỉ cho bạn cách thêm, chỉnh sửa và xóa dữ liệu trong bảng HTML bằng JavaScript và jQuery, nhưng không có phần hỗ trợ sau. Trong các bài viết tiếp theo, bạn sẽ tìm hiểu cách lấy dữ liệu đó và sử dụng API Web để truy xuất và sửa đổi dữ liệu này

Nội dung chính Show

Để minh họa các khái niệm cho bài viết này, tôi đã tạo một trang có tên là Paul's Training Videos (Hình 1). Trang này cho phép tôi liệt kê tất cả các video đào tạo của mình trên Pluralsight và cuối cùng là thêm, chỉnh sửa và xóa chúng. Tôi đang sử dụng Bootstrap để có giao diện đẹp cho trang Web của mình, nhưng không bắt buộc

Thêm một sản phẩm

Trang HTML tôi sử dụng để minh họa các khái niệm này được hiển thị trong Liệt kê 1. HTML này tạo một bảng trống với một cho các tiêu đề của mỗi cột trong bảng. Có ba cột. tên sản phẩm, ngày giới thiệu và URL. Lưu ý rằng không có cho bảng này. Tôi đã cố ý tắt phần tử để minh họa cách bạn kiểm tra phần tử đó trong jQuery và thêm phần tử, nếu cần

Cách lưu trữ dữ liệu trong bảng HTML bằng JavaScript

Hình 1. Liệt kê sản phẩm bằng cách thêm hàng vào bảng khi tải trang

Thêm hàng sản phẩm vào bảng

Ở cuối trang HTML này, tôi đã tạo một

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

1

Bạn có thể gọi hàm trên khi tài liệu được tải bằng cách thêm hàm

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

2 của jQuery ngay trước thẻ kết thúc

$(document).ready(function () {
    productsAdd();
});

Thêm hàng động

Hãy làm cho trang năng động hơn một chút bằng cách thu thập dữ liệu sản phẩm từ người dùng và thêm dữ liệu đó vào bảng. Thêm 3 trường nhập để người dùng nhập dữ liệu để thêm vào bảng sản phẩm. Người dùng nhập tên sản phẩm, ngày giới thiệu, URL của video như hình 2. Sau khi nhập dữ liệu vào các trường này, dữ liệu đó được lấy từ các trường đầu vào và được thêm vào một hàng mới trong bảng HTML

Hình 2. Thêm sản phẩm vào bảng với đầu vào của người dùng

Ngoài các trường nhập mới, a được thêm vào để khi được nhấp, sẽ thêm dữ liệu từ các trường vào bảng. Nút này, được hiển thị ở dưới cùng của Hình 2, là một nút HTML bình thường có chức năng tên là

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

3 được gọi từ sự kiện

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

4 của nó.

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

5

Thêm một hàng từ các trường đầu vào

Sau khi người dùng thêm dữ liệu vào trường nhập liệu, họ nhấp vào nút

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

5. Để đáp lại sự kiện nhấp chuột này, hàm

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

7 được gọi, như được hiển thị trong đoạn mã sau

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

Nếu trường

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

8 được điền một số dữ liệu, thì hàm

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

9 được gọi để tạo hàng mới cho bảng. Khi chức năng này được chạy,

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

0 được gọi để xóa các trường đầu vào để chuẩn bị cho hàng tiếp theo được thêm vào. Cuối cùng, tiêu điểm đầu vào được cung cấp cho trường Nhập liệu

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

8

Hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

2, được hiển thị trong Liệt kê 3, tương tự như đoạn mã tôi đã viết trước đó khi tôi mã hóa cứng các giá trị. Sự khác biệt trong phương thức này là nó sử dụng jQuery để lấy các giá trị từ các hộp văn bản và xây dựng các phần tử từ các giá trị đó

Liệt kê 3. Truy xuất các giá trị từ các trường đầu vào và tạo hàng cho bảng

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

Hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

0 sử dụng bộ chọn jQuery để tìm từng trường đầu vào và đặt giá trị của từng trường thành một chuỗi trống. Đặt giá trị thành khoảng trống sẽ xóa trường nhập để người dùng có thể nhập dữ liệu mới

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

Xóa sản phẩm

Khi bạn đã thêm một vài sản phẩm, rất có thể bạn sẽ cần xóa một hoặc nhiều sản phẩm đó. Thêm một nút

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

4 vào mỗi hàng của bảng, như trong Hình 3. Điều này yêu cầu bạn sửa đổi phần tử bằng cách thêm phần tử mới có từ Xóa như trong đoạn mã sau


    
        
            Product Name
            Introduction Date
            URL
            Delete

Hình 3. Thêm nút Xóa để cho phép người dùng xóa một hàng khỏi bảng.

Thêm nút Xóa vào mỗi hàng

Sửa đổi hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

2 (Liệt kê 4) để bao gồm một nút điều khiển khi bạn thêm từng hàng dữ liệu. Trong JavaScript bạn viết để xây dựng các phần tử và, hãy thêm một phần tử nữa bao gồm định nghĩa cho một điều khiển. Điều khiển nút này sử dụng một số lớp Bootstrap để tạo kiểu và biểu tượng Bootstrap để hiển thị “X” để tượng trưng cho chức năng xóa (xem Hình 3). Nút cũng cần sự kiện

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

4 của nó để gọi hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

7. Đối với chức năng này, hãy chuyển từ khóa

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

8, tham chiếu đến chính nút đó

Liệt kê 4. Tự động tạo nút xóa trong mã JavaScript của bạn

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

9

Xóa một hàng

Hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

0 chấp nhận tham số là tham chiếu đến nút xóa. Từ điều khiển này, bạn có thể sử dụng chức năng

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

1

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

2 để xác định vị trí các nút chứa thẻ. Khi bạn xác định vị trí thẻ, hãy sử dụng hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

3 để loại bỏ hàng đó khỏi bảng, như được minh họa trong đoạn mã sau

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

Chỉnh sửa sản phẩm

Bạn đã học cách thêm và xóa hàng khỏi bảng HTML. Bây giờ, hãy chú ý đến việc chỉnh sửa các hàng trong bảng HTML. Giống như bạn đã thêm nút Xóa vào mỗi hàng trong bảng của mình, hãy thêm nút Chỉnh sửa (Hình 4). Một lần nữa, bạn cần sửa đổi phần tử bằng cách thêm phần tử mới có từ Chỉnh sửa, như được hiển thị trong đoạn mã sau

______31_______

Hình 4. Thêm nút Chỉnh sửa để cho phép người dùng chỉnh sửa một hàng trong bảng.

Thêm một hàng bằng một nút chỉnh sửa

Giống như bạn đã tạo một nút trong JavaScript để xóa một hàng, bạn cũng tạo một nút để chỉnh sửa (Liệt kê 5). Sự kiện

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

4 gọi một hàm tên là

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

5. Bạn sẽ chuyển từ khóa

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

8 đến hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

5 để bạn có thể tham chiếu nút chỉnh sửa và do đó truy xuất hàng dữ liệu chứa nút này

Liệt kê 5. Tạo nút Chỉnh sửa trong JavaScript

function productBuildTableRow() {
    var ret = "" +
        "" +
        "" +
        "" +
        "" +
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "" +
        "" +
        "" +
        "" +
        ""

    return ret;
}

Hiển thị dữ liệu trong các trường đầu vào

Khi người dùng nhấp vào nút Chỉnh sửa trong bảng, lưu trữ hàng hiện tại của bảng trong một biến toàn cục. Xác định một biến có tên là _______17_______8 trong ____________1

Trong Liệt kê 5,

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append("" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "");
}

8 đã được chuyển vào hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

5 từ sự kiện onclick của nút. Đây là tài liệu tham khảo về điều khiển nút


    
        
            Product Name
            Introduction Date
            URL
            Delete

2. Viết hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

5 để tính hàng hiện tại bằng cách lấy thẻ là cha của nút


    
        
            Product Name
            Introduction Date
            URL
            Delete

2. Điều này được thực hiện bằng cách sử dụng bộ chọn jQuery sau

0

Truy xuất tất cả các cột trong một mảng từ hàng hiện tại bằng cách sử dụng hàm


    
        
            Product Name
            Introduction Date
            URL
            Delete

5 của biến

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

8

1

Sử dụng các cột thích hợp trong bảng để truy xuất từng trường đầu vào, chẳng hạn như tên sản phẩm, ngày giới thiệu và URL. Hàm


    
        
            Product Name
            Introduction Date
            URL
            Delete

7 được sử dụng để đặt dữ liệu vào từng hộp văn bản từ mỗi cột dữ liệu. Cuối cùng, để bạn biết rằng bạn đang ở chế độ Chỉnh sửa thay vì chế độ Thêm, hãy thay đổi văn bản của


    
        
            Product Name
            Introduction Date
            URL
            Delete

8 thành


    
        
            Product Name
            Introduction Date
            URL
            Delete

9. Hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

5 hoàn chỉnh được hiển thị trong đoạn mã sau

2

Cập nhật dữ liệu

Khi người dùng nhấp vào updateButton, hàm

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

7 được gọi. Văn bản trong updateButton xác định xem bạn có đang thêm một hàng dữ liệu vào bảng hay chỉnh sửa một hàng hiện có hay không. Hãy nhớ rằng, khi bạn nhấp vào nút Chỉnh sửa, nó sẽ thay đổi nội dung của nút Cập nhật. Sửa đổi hàm

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

7 để kiểm tra văn bản trong


    
        
            Product Name
            Introduction Date
            URL
            Delete

8 và thực hiện chức năng thích hợp dựa trên văn bản đó, như được hiển thị trong đoạn mã sau

3

Có một số cách bạn có thể cập nhật một sản phẩm. Bạn đã lưu hàng trong biến

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

8, vì vậy bạn có thể tham chiếu từng ô riêng lẻ trong hàng đó và cập nhật từng ô trong bảng bằng cách sử dụng hàm


    
        
            Product Name
            Introduction Date
            URL
            Delete

7 của từng trường nhập liệu. Một phương pháp khác là thêm dữ liệu đã thay đổi vào hàng ngay sau hàng hiện tại, sau đó xóa hàng hiện tại khỏi bảng. Tôi đã chọn sử dụng cái sau, vì điều này cho phép tôi sử dụng lại hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

6 đã viết trước đó. Điều cuối cùng cần làm là xóa các trường nhập và thay đổi văn bản trở lại thành Thêm trên nút Cập nhật. Việc cập nhật bảng sản phẩm được hiển thị trong mã bên dưới

4

Sử dụng các thuộc tính Data Dash

Trong bài viết này, tôi đã tập trung vào làm việc với mã phía máy khách. Tại một số điểm, bạn sẽ phải gửi dữ liệu trở lại máy chủ và lấy dữ liệu từ đó. Hầu hết chúng ta gán một khóa chính (số duy nhất) cho mỗi hàng dữ liệu. Bây giờ, hãy sửa đổi trang để sử dụng thuộc tính

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

7 để theo dõi các khóa chính trên các hàng dữ liệu trong trang HTML

Thêm hai biến

Bạn cần tạo hai biến toàn cục mới trong trang HTML của mình; . Chúng được sử dụng để theo dõi ID tiếp theo để chỉ định một hàng mới được thêm vào và để theo dõi ID hiện tại của hàng bạn đang chỉnh sửa. Mã để làm điều này được hiển thị dưới đây

5

Bạn có thể xóa biến

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

8 mà bạn đã tạo trước đó, vì bây giờ bạn sẽ sử dụng các biến ID này để theo dõi xem hàng nào đang được thêm hoặc chỉnh sửa

Xây dựng một hàng cho bảng

Hai biến mới này được sử dụng để tạo hàng để thêm hoặc cập nhật trong bảng HTML của bạn. Hãy sửa đổi hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

6 (Liệt kê 6) để chấp nhận một tham số có tên là

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

2 mà bạn chuyển một trong hai biến đó vào. Số duy nhất này được thêm vào thuộc tính

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

7 trên cả hai nút Chỉnh sửa và Xóa

Liệt kê 6. Sử dụng thuộc tính data- để giữ khóa chính cho mỗi hàng

6

Lấy ID hiện tại

Khi người dùng nhấp vào nút Chỉnh sửa trong bảng, hãy gọi hàm

function formClear() {
    $("#productname").val("");
    $("#introdate").val("");
    $("#url").val("");
}

5 truyền vào nút Chỉnh sửa. Trích xuất thuộc tính

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

7 chứa ID duy nhất và gán nó cho biến

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

9, như được hiển thị trong đoạn mã sau

7

Vì nút Chỉnh sửa nằm trong cột đầu tiên của hàng được nhấp vào, hãy truy xuất

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

7 từ nút đó bằng cách sử dụng dòng mã này từ đoạn mã trên

8

Hàm

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

8 của jQuery được truyền hậu tố của thuộc tính

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

7 để truy xuất. Bởi vì bạn đã sử dụng


    
        
            Edit
            Product Name
            Introduction Date
            URL
            Delete

0 làm khóa cho thuộc tính

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

7 của mình, nên bạn chỉ cần chuyển

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

2 cho hàm

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

8 và nó sẽ trả về giá trị được gán cho thuộc tính đó

Khi người dùng click vào


    
        
            Product Name
            Introduction Date
            URL
            Delete

8, hàm

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

7 vẫn được gọi. Tuy nhiên, bạn cần sửa đổi hàm này để sử dụng biến

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

9 và chuyển giá trị đó cho hàm


    
        
            Edit
            Product Name
            Introduction Date
            URL
            Delete

7 mà bạn đã viết trước đó

9

Thay đổi hàm


    
        
            Edit
            Product Name
            Introduction Date
            URL
            Delete

7 để tìm hàng trong bảng chứa

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

7 duy nhất này. Hàm này sử dụng

function productDelete(ctl) {
    $(ctl).parents("tr").remove();
}

7 đó để định vị nút chứa thuộc tính

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

7 trong bảng của bạn. Đoạn mã bên dưới chỉ hiển thị các dòng đã thay đổi trong hàm được cập nhật này

function productUpdate() {
    if ($("#productname").val() != null && $("#productname").val() != '') {
        // Add product to Table
        productAddToTable();

        // Clear form fields
        formClear();

        // Focus to product name field
        $("#productname").focus();
    }
}

0

function productBuildTableRow() {
    var ret = "" +
        "" +
        "" +
        "" +
        "" +
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "" +
        "" +
        "" +
        "" +
        ""

    return ret;
}

2

Lưu ý cách bạn chuyển biến

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

8 cho hàm

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

6. Sau khi hàng sản phẩm mới này được tạo, hãy tăng biến

function productAddToTable() {
    // First check if a  tag exists, add one if not
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("");
    }

    // Append product to the table
    $("#productTable tbody").append(
        "" +
        "" + $("#productname").val() + "" +
        "" + $("#introdate").val() + "" +
        "" + $("#url").val() + "" +
        "" +
        "

8 để sản phẩm tiếp theo bạn thêm có ID duy nhất tiếp theo

Bản tóm tắt

Trong bài viết này, bạn đã học cách tạo Thêm, Chỉnh sửa và Xóa hàng trong bảng HTML bằng JavaScript và jQuery. Việc có những kỹ năng này giúp các trang Web của bạn phản hồi nhanh hơn và dẫn bạn đến bước tiếp theo, đó là sử dụng API Web để gửi dữ liệu đã sửa đổi trở lại máy chủ. Trên thực tế, trong bài viết tiếp theo của tôi (CRUD trong HTML, JavaScript và jQuery Sử dụng API Web), đây chính xác là những gì bạn sẽ học để làm. Điều thú vị khi sử dụng các kỹ thuật này là bạn không phải đăng lại toàn bộ trang và vẽ lại toàn bộ trang chỉ để lấy bản ghi mới hoặc sửa đổi bản ghi. Bạn chỉ cần gửi dữ liệu qua lại và vẽ lại những phần của trang đã thay đổi. Điều này giúp tiết kiệm thời gian và truyền ít dữ liệu hơn qua Internet. Điều này rất quan trọng trên các thiết bị di động có thể không được kết nối với WiFi, vì bạn không muốn sử dụng phút dữ liệu của người dùng để chuyển nhiều HTML giống nhau khi tất cả những gì bạn cần chỉ là một ít dữ liệu

Làm cách nào để chèn dữ liệu vào bảng HTML bằng JavaScript?

Các bước thêm hàng vào bảng .

Lấy phần tử bảng dữ liệu

Tạo một hàng bằng phương thức insertRow và chèn nó vào bảng

Tạo (các) ô mới bằng phương thức insertCell và chèn chúng vào hàng bạn đã tạo

Thêm dữ liệu vào các ô vừa tạo

Làm cách nào để lưu trữ dữ liệu trong bảng HTML?

innerHTML = localStorage. getItem("cuộn bảng"); . .

Người dùng điền vào bảng HTML (Tôi không gặp vấn đề với bước này) trong bảng. trang HTML

Bảng HTML được lưu trữ trong localStorage (sử dụng. ĐẶT trên bàn. bên trongHTML)

Bảng HTML được hiển thị (sử dụng. GET ) trong một kết quả khác. trang HTML

Làm cách nào để thêm dữ liệu vào bảng HTML một cách linh hoạt bằng JavaScript?

Tạo bảng động (quay lại Sample1. .

Lấy đối tượng body (mục đầu tiên của đối tượng tài liệu)

Tạo tất cả các yếu tố

Cuối cùng, nối từng con theo cấu trúc bảng (như hình trên). Mã nguồn sau đây là phiên bản nhận xét cho sample1. html

Làm cách nào để lấy dữ liệu từ bảng HTML bằng JavaScript?

Bộ sưu tập ô bảng .

Tìm xem có bao nhiêu ô ở hàng đầu tiên trong một bảng. getElementById("myTable"). .

[index] Cảnh báo InternalHTML của ô đầu tiên trong hàng đầu tiên của bảng. .

item(index) Thông báo InternalHTML của ô đầu tiên trong hàng đầu tiên của bảng. .

tênItem(id).

Thay đổi nội dung ô đầu tiên của bảng

programming javascript