<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tr id="row_0">
<td>0,0</td>
</tr>
</table><br>
<button onclick="myFunction()">Try it</button>
<script>
row_nr=0;
col_nr=1;
function myFunction() {
var table = document.getElementById("myTable");
var row = document.getElementById("row_"+row_nr);
var cell = row.insertCell(col_nr);
cell.innerHTML = row_nr+","+col_nr;
col_nr++;
if (col_nr %3==0) {
col_nr=0;
row_nr++;
var row = table.insertRow(row_nr);
row.setAttribute("id", "row_"+row_nr);
}
}
</script>
</body>
</html>
Các modulo trong (%3) có thể được thay đổi thành chiều dài mong muốn của các hàng.
Bản demo: http://jsfiddle.net/user2314737/8k11vzyu/1/
Và đây là với nút Xóa:
HTML
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tr id="row_0">
<td>0,0</td>
</tr>
</table>
<br>
<button onclick="addCell()">Add</button>
<button onclick="removeCell()">Remove</button>
Dưới đây là bản demo được cập nhật: http://jsfiddle.net/user2314737/8k11vzyu/6/
Cập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21:51:54 (UTC/GMT +8 giờ)
JavaScript DOM: Bài tập-7 với giải pháp
Viết chức năng JavaScript tạo bảng, chấp nhận hàng, số cột từ người dùng và số cột đầu vào dưới dạng nội dung (ví dụ: ROW-0 Cột-0) của ô.
Tệp HTML mẫu:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Change the content of a cell</title>
<style type="text/css">
body {margin: 30px;}
</style>
</head><body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body></html>
Giải pháp mẫu: -: -
Mã HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Create a table</title>
<style type="text/css">
body {margin: 30px;}
</style>
</head><body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body></html>
Mã JavaScript:
function createTable()
{
rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns",1);
for(var r=0;r<parseInt(rn,10);r++)
{
var x=document.getElementById('myTable').insertRow(r);
for(var c=0;c<parseInt(cn,10);c++)
{
var y= x.insertCell(c);
y.innerHTML="Row-"+r+" Column-"+c;
}
}
}
Đầu ra mẫu:
Sơ đồ:
Bản thử trực tiếp:
Xem PEN JavaScript-DOM-exercise-7 của W3Resource (@W3Resource) trên CodePen.
Cải thiện giải pháp mẫu này và đăng mã của bạn thông qua Disqus
Trước đây: Viết chức năng JavaScript chấp nhận hàng, cột, (để xác định một ô cụ thể) và một chuỗi để cập nhật nội dung của ô đó. Write a JavaScript function that accept row, column, (to identify a particular cell) and a string to update the content of that cell. Next: Write a JavaScript program to remove items from a dropdown list.
Mức độ khó của bài tập này là gì?
Kiểm tra kỹ năng lập trình của bạn với bài kiểm tra của W3Resource.
JavaScript: Lời khuyên trong ngày
Chức năng thường xuyên
function giveOwenBurger() {
return 'Here is burger!';
}
const giveOwenCocacola = () =>
"Here's cocacola... now go hit the gym already.";
console.log(giveOwenBurger.prototype);
console.log(giveOwenCocacola.prototype);
Các hàm chính quy, chẳng hạn như hàm protowenpizza, có thuộc tính nguyên mẫu, là đối tượng (đối tượng nguyên mẫu) với thuộc tính hàm tạo. Tuy nhiên, các hàm mũi tên, chẳng hạn như hàm protowencocacola, không có thuộc tính nguyên mẫu này. Không xác định được trả lại khi cố gắng truy cập vào thuộc tính nguyên mẫu bằng cách sử dụng protowencocacola.prototype.
Tham khảo: https://bit.ly/3jfrbje
Bài tập: Top 16 chủ đề phổ biến nhất hàng tuần
Bài tập SQL, Thực hành, Giải pháp - Tham gia
Bài tập SQL, Thực hành, Giải pháp - Quan sát phụ
JavaScript Basic - Bài tập, Thực hành, Giải pháp
Java Array: Bài tập, Thực hành, Giải pháp
C Bài tập lập trình, Thực hành, Giải pháp: Tuyên bố có điều kiện
Cơ sở dữ liệu nhân sự - Sắp xếp bộ lọc: Bài tập, Thực hành, Giải pháp
C Bài tập lập trình, Thực hành, Giải pháp: Chuỗi
Các loại dữ liệu Python: Từ điển - Bài tập, Thực hành, Giải pháp
Câu đố lập trình Python - Bài tập, Thực hành, Giải pháp
Mảng C ++: Bài tập, Thực hành, Giải pháp
Báo cáo và vòng lặp có điều kiện JavaScript - Bài tập, Thực hành, Giải pháp
Thuật toán cơ bản C# Sharp: Bài tập, Thực hành, Giải pháp
Python Lambda - Bài tập, Thực hành, Giải pháp
Python Pandas DataFrame: Bài tập, Thực hành, Giải pháp
Công cụ chuyển đổi
JavaScript: HTML Mẫu xác thực
Làm thế nào để bạn tạo một bảng trong JavaScript?
function Generatetablehead (bảng, dữ liệu) {let thead = bảng. createThead (); Đặt hàng = thead. Chèn hàng(); for (Đặt khóa của dữ liệu) {hãy để th = document. createdeLement ("th"); Đặt văn bản = tài liệu.
Làm thế nào để bạn điền vào một bảng trong javascript?
var bảng = document.getEuityById ("mytable"); var rownode = document.createEement ("tr"); var cellnode = document.createelement ("td"); var textNode = tài liệu.getElementById("myTable"); var rowNode = document.createElement("tr"); var cellNode = document.createElement("td"); var textNode = document.
Làm thế nào để bạn tạo các cột và hàng trong HTML?
Bạn có thể tạo một bảng bằng phần tử.Bên trong phần tử, bạn có thể sử dụng các phần tử để tạo hàng và để tạo các cột bên trong một hàng, bạn có thể sử dụng các phần tử.Bạn cũng có thể định nghĩa một ô là tiêu đề cho một nhóm các ô bảng sử dụng phần tử.Inside the
element, you can use the
elements to create rows, and to create columns inside a row you can use the
elements. You can also define a cell as a header for a group of table cells using the
element.
Làm cách nào để tạo một bảng động trong HTML?
Tạo một bảng một cách linh hoạt (trở lại Sample1 ...
Nhận đối tượng cơ thể (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 mỗi đứa trẻ theo cấu trúc bảng (như trong hình trên).Mã nguồn sau đây là phiên bản nhận xét cho Sample1.HTML ..
