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 HTML?

Question

Tự động thêm/xóa hàng trong bảng HTML bằng JavaScript

bởi Viral Patel · 16 tháng 3, 2009

Nội dung chính Show

Bản trình diễn trực tuyến
Thêm/Xóa hàng khỏi bảng có Danh sách thả xuống
Bản trình diễn trực tuyến
Nhận giá trị biểu mẫu đã gửi trong PHP
Làm cách nào để thêm dữ liệu động vào bảng HTML?
Làm cách nào để tăng các hàng của bảng một cách linh hoạt HTML?
Chúng ta có thể tạo bảng động trong HTML không?
Làm cách nào để tự động chèn id vào phần tử bảng bằng JavaScript?

[ad name=”AD_INBETWEEN_POST”] Một thiết kế web tốt liên quan đến khả năng tương tác với người dùng tốt hơn và khả năng tìm nạp dữ liệu theo cách tốt hơn. Để tìm nạp dữ liệu người dùng, bạn có thể phải tạo một biểu mẫu trong đó người dùng có thể thêm nhiều mục nhập và gửi chúng đồng thời. Vì vậy, để làm được điều này, bạn sẽ cần một cách để thêm hoặc xóa các trường một cách linh hoạt vào trang HTML. Trong bài viết trước của tôi, tôi đã thảo luận về cách một người có thể thêm các thành phần biểu mẫu động vào trang web. Trong bài viết này, chúng tôi sẽ tạo giao diện người dùng nơi người dùng có thể thêm/xóa nhiều hàng trong một biểu mẫu bằng JavaScript. Đầu tiên kiểm tra giao diện người dùng.

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 HTML?

Trong ví dụ này, chúng tôi đã tạo một bảng sẽ hiển thị các thành phần html của chúng tôi. Khi nhấn Thêm hàng, một hàng động sẽ được tạo và thêm vào bảng. Và khi chọn hộp kiểm và nhấn Xóa hàng, hàng sẽ bị xóa. Sau đây là nguồn.

Mã số


<HEAD>
	<TITLE> Add/Remove dynamic rows in HTML table TITLE>
	<SCRIPT language="javascript">
		function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var cell1 = row.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			element1.name="chkbox[]";
			cell1.appendChild(element1);

			var cell2 = row.insertCell(1);
			cell2.innerHTML = rowCount + 1;

			var cell3 = row.insertCell(2);
			var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "txtbox[]";
			cell3.appendChild(element2);


		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; ivar row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}

	SCRIPT>
HEAD>
<BODY>

	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

	<TABLE id="dataTable" width="350px" border="1">
		<TR>
			<TD><INPUT type="checkbox" name="chk"/>TD>
			<TD> 1 TD>
			<TD> <INPUT type="text" /> TD>
		TR>
	TABLE>

BODY>
HTML>
Code language: JavaScript (javascript)

Để thêm hàng động vào bảng, chúng tôi đã sử dụng phương thức insertRow(). Phương thức này sẽ chèn một hàng tại vị trí được chỉ định bởi đối số chỉ mục. Ngoài ra để xóa hàng, chúng tôi đã sử dụng phương thức deleteRow(). Lưu ý rằng để chèn hàng động, chúng ta phải tạo các ô bằng cách sử dụng hàng. phương thức insertCell(). Kiểm tra bản demo trực tuyến

Bản trình diễn trực tuyến

Bấm vào đây

Thêm/Xóa hàng khỏi bảng có Danh sách thả xuống

Nếu bảng của tôi có hộp chọn hoặc danh sách thả xuống và tôi muốn triển khai chức năng thêm/xóa hàng thì sao? . Thêm/Xóa hàng trong bảng có danh sách sổ xuống. Sau đây là mã.


<HEAD>
	<TITLE> Add/Remove dynamic rows in HTML table TITLE>
	<SCRIPT language="javascript">
		function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var colCount = table.rows[0].cells.length;

			for(var i=0; ivar newcell	= row.insertCell(i);

				newcell.innerHTML = table.rows[0].cells[i].innerHTML;
				//alert(newcell.childNodes);
				switch(newcell.childNodes[0].type) {
					case "text":
							newcell.childNodes[0].value = "";
							break;
					case "checkbox":
							newcell.childNodes[0].checked = false;
							break;
					case "select-one":
							newcell.childNodes[0].selectedIndex = 0;
							break;
				}
			}
		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; ivar row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					if(rowCount <= 1) {
						alert("Cannot delete all the rows.");
						break;
					}
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}

	SCRIPT>
HEAD>
<BODY>

	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

	<TABLE id="dataTable" width="350px" border="1">
		<TR>
			<TD><INPUT type="checkbox" name="chk"/>TD>
			<TD><INPUT type="text" name="txt"/>TD>
			<TD>
				<SELECT name="country">
					<OPTION value="in">IndiaOPTION>
					<OPTION value="de">GermanyOPTION>
					<OPTION value="fr">FranceOPTION>
					<OPTION value="us">United StatesOPTION>
					<OPTION value="ch">SwitzerlandOPTION>
				SELECT>
			TD>
		TR>
	TABLE>

BODY>
HTML>



Code language: JavaScript (javascript)

Kiểm tra phương thức addRow() trong đoạn mã trên. Tôi đã chỉnh sửa đoạn mã này từ ví dụ trước của chúng ta. Phương thức addRow() lặp qua tất cả các cột và sao chép nội dung của cột đầu tiên sang cột mới. Bằng cách này, một hàng mới được tạo là bản sao chính xác của hàng đầu tiên. Ngoài ra, trường hợp switch{} trong mã đảm bảo rằng giá trị không được sao chép như hiện tại. Ví dụ: nếu bạn đã nhập văn bản “abc” vào hộp văn bản của hàng đầu tiên và bạn nhấn nút Thêm hàng, hàng mới sẽ được thêm vào và hộp văn bản của hàng mới này sẽ có giá trị “abc”. Vì vậy, để đảm bảo các giá trị không bị sao chép, chúng tôi đã thêm mã switch{}. Bạn có thể muốn nhận xét mã switch{} nếu việc sao chép các giá trị trong hàng mới được thêm vào nếu bạn muốn

Bản trình diễn trực tuyến

Bấm vào đây

Nhận giá trị biểu mẫu đã gửi trong PHP

Mục đích chính của đoạn mã trên là lấy dữ liệu đầu vào từ người dùng và duy trì nó trong cơ sở dữ liệu. Do đó, chúng tôi có thể muốn gửi biểu mẫu trên và tìm nạp các giá trị của nó trong PHP để lưu trữ dữ liệu trong cơ sở dữ liệu. Nếu bạn để ý, chúng tôi có nhiều hộp văn bản đầu vào có cùng tên. Vì vậy, để có được các giá trị này trong tham số yêu cầu PHP, chúng ta cần sửa đổi HTML của mình. Chúng ta cần thêm [] vào cuối tên của mỗi hộp nhập bao gồm hộp chọn. Do đó, định nghĩa hộp văn bản của chúng tôi.

<INPUT type="text" name="txt">
Code language: HTML, XML (xml)

Sẽ thay đổi thành.

<INPUT type="text" name="txt[]">
Code language: HTML, XML (xml)

Ngoài ra, hộp kiểm và định nghĩa hộp chọn thay đổi thành.

<INPUT type="checkbox" name="chk[]"/>

<SELECT name="country[]">
	<OPTION value="in">IndiaOPTION>
	<OPTION value="de">GermanyOPTION>
	<OPTION value="fr">FranceOPTION>
	<OPTION value="us">United StatesOPTION>
	<OPTION value="ch">SwitzerlandOPTION>
SELECT>



Code language: HTML, XML (xml)

Sau khi chúng tôi đã thay đổi mã HTML, hãy thêm nút gửi ở cuối biểu mẫu và gửi biểu mẫu này tới Fetchrequest. php Sau đây sẽ là mã để nhận các giá trị từ yêu cầu trong PHP và hiển thị chúng trên màn hình.


$chkbox = $_POST['chk'];
$txtbox = $_POST['txt'];
$country = $_POST['country'];

foreach($txtbox as $a => $b)
  echo "$chkbox[$a]  -  $txtbox[$a]  -  $country[$a] 
";

?>
Code language: PHP (php)

Nếu bạn đã đọc đến đây, bạn nên theo dõi tôi trên twitter tại đây

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

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 để tăng các hàng của bảng một cách linh hoạt HTML?

Kỹ thuật .

hàm addRow(tableID) {

bảng var = tài liệu. getElementById(bảngID);

var rowCount = bảng. hàng. chiều dài;

hàng var = bảng. insertRow(rowCount);

//Cột 1

var ô1 = hàng. chènCell(0);

var phần tử1 = tài liệu. createElement("đầu vào");

phần tử1. gõ = "nút";

Chúng ta có thể tạo bảng động trong HTML không?

Đầu tiên Bảng HTML động được tạo bằng phương thức JavaScript createElement . Hàng Tiêu đề sẽ được tạo bằng cách sử dụng phần tử đầu tiên của Mảng vì nó chứa các giá trị văn bản của cột Tiêu đề.

Làm cách nào để tự động chèn id vào phần tử bảng bằng JavaScript?

Bài viết này giải thích cách tự động chèn “id” vào thành phần bảng. Điều này có thể được thực hiện bằng cách đơn giản là lặp qua các bảng và tự động thêm “id” . cú pháp. Phương thức setAttribute() thêm thuộc tính đã chỉ định vào một phần tử và đưa ra giá trị đã chỉ định.

programming 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 HTML?

Mã số

Bản trình diễn trực tuyến

Thêm/Xóa hàng khỏi bảng có Danh sách thả xuống

Bản trình diễn trực tuyến

Nhận giá trị biểu mẫu đã gửi trong PHP

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

Làm cách nào để tăng các hàng của bảng một cách linh hoạt HTML?

Chúng ta có thể tạo bảng động trong HTML không?

Làm cách nào để tự động chèn id vào phần tử bảng bằng JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội