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
Để 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
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[];
}
}
1Bạ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[];
}
}
5Thê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ã saufunction 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[];
}
}
8Hà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ớifunction 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[] + "" +
""];
}
9Xó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ã saufunction 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
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àyLiệ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 title 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 sau0Truy 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[""];
}
81Sử 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ã sau2Cậ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ã sau3Có 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ưới4Sử 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 HTMLThê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
5Bạ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 hàng nào đang được thêm hoặc chỉnh sửaXâ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óaLiệt kê 6. Sử dụng thuộc tính data- để giữ khóa chính cho mỗi hàng
6Lấ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ã sau7Vì 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ên8Hà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 đó9Thay đổ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àyfunction productUpdate[] {
if [$["#productname"].val[] != null && $["#productname"].val[] != ''] {
// Add product to Table
productAddToTable[];
// Clear form fields
formClear[];
// Focus to product name field
$["#productname"].focus[];
}
}
0function productBuildTableRow[] {
var ret = "" +
"" +
"" +
"" +
"" +
"" +
"" + $["#productname"].val[] + "" +
"" + $["#introdate"].val[] + "" +
"" + $["#url"].val[] + "" +
"" +
"" +
"" +
"" +
"" +
""
return ret;
}
2Lư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 theoTóm lược
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