Thiết kế chương trình JavaScript để hiển thị bảng cửu chương bằng cách chấp nhận số lượng và giới hạn

    
Multiplication Table
    Enter a number:
    


    Enter limit:
    
    
    

    

đầu ra

Ghi chú. Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Tùy bạn muốn dùng float hay flex. Tuy nhiên, nếu bạn cần hỗ trợ cho IE10 trở xuống, bạn nên sử dụng float

Mẹo. Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi

---

---

Thêm phản hồi

Ví dụ trên sẽ không đẹp mắt trên thiết bị di động vì hai cột sẽ chiếm quá nhiều dung lượng của trang. Để tạo một bảng đáp ứng, nên chuyển từ bố cục hai cột sang bố cục toàn chiều rộng trên thiết bị di động, hãy thêm các truy vấn phương tiện sau

Ví dụ

Viết một mảng dưới dạng bảng trong bảng điều khiển

bảng điều khiển. bảng(["Audi", "Volvo", "Ford"]);

Tự mình thử »

Viết một đối tượng dưới dạng bảng trong bảng điều khiển

bảng điều khiển. bảng ({tên. "John", họ. "Doe"});

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Phương thức table() ghi một bảng vào bàn điều khiển

Ghi chú

Bạn có thể sắp xếp bảng bằng cách nhấp vào tên cột

---

cú pháp

bảng điều khiển. bảng (dữ liệu bảng, cột bảng)

Thông số

ParameterDescriptiontabledataBắt buộc.
Dữ liệu để điền vào bảng. cột bảngTùy chọn.
Một mảng chứa tên của các cột trong bảng.

---

---

Thêm ví dụ

Sử dụng một mảng các đối tượng

const car1 = {tên. "Audi", người mẫu. "A4"}
const car2 = {tên. "Volvo", mô hình. "XC90"}
const car3 = {name. "Ford", người mẫu. "Kết hợp"}

bảng điều khiển. bảng([xe1, xe2, xe3]);

Tự mình thử »

Chỉ bao gồm cột "mô hình" trong bảng

const car1 = {tên. "Audi", người mẫu. "A4"}
const car2 = {tên. "Volvo", mô hình. "XC90"}
const car3 = {name. "Ford", người mẫu. "Kết hợp"}

bảng điều khiển. bảng([xe1, xe2, xe3], ["mô hình"]);

Tự mình thử »

---

Hỗ trợ trình duyệt

console.table() được hỗ trợ trong tất cả các trình duyệt hiện đại

ChromeEdgeFirefoxSafariOperaCóCóCóCóCó

console.table() không được hỗ trợ trong Internet Explorer 11 (hoặc cũ hơn)

Trong ví dụ này, chúng ta sẽ học cách in bảng số nguyên bằng hàm JavaScript. Trong ví dụ này, chúng tôi sẽ lấy một giá trị số nguyên làm đầu vào thông qua hộp văn bản và sẽ hiển thị bảng của số đó trong thẻ đoạn văn

Ngoại trừ việc in bảng, chúng ta sẽ học cách đọc giá trị của một số nguyên thông qua hộp văn bản, chuyển đổi chuỗi thành số nguyên và in văn bản thành đoạn văn bằng cách sử dụng. bên trongHTML

Hàm In Bảng Số Đã Nhập

hàm JavaScript

Mã nguồn HTML với JavaScript

    
        JavaScript - Function to Display Table of an entered Number.
        
    

    
        JavaScript - Function to Display Table of an entered Number.
        

        

            
            
        

        
    

Kết quả

Ví dụ JavaScript »

---

Trong bài đăng này, chúng ta sẽ tìm hiểu cách in bảng cửu chương trong HTML, CSS và JavaScript. Trước khi viết phần HTML, CSS, tôi sẽ hướng dẫn bạn cách viết nó bằng JavaScript thuần túy. Sau đó, chúng tôi sẽ chuyển mã sang HTML, CSS và kiểm tra xem nó trông như thế nào

Trước tiên hãy viết chương trình bằng JavaScript

const number = parseInt(prompt("Enter a number : "));

for (let i = 1; i <= 10; i++) {
  console.log(number + "*" + i + "=" + number * i);
}

Để chạy chương trình này, hãy mở bảng điều khiển dành cho nhà phát triển của bạn và dán chương trình trên vào. Nó sẽ yêu cầu bạn nhập một số với một cửa sổ bật lên. Nhập số và nó sẽ in bảng cửu chương cho số đó

Hãy sử dụng HTML, CSS với JavaScript để in bảng cửu chương. Tạo một ví dụ. html và sao chép, dán nội dung bên dưới