Javascript/jQuery: Làm thế nào để tự động thêm hàng để cơ thể bảng (sử dụng mảng)

Question

Tôi mới vào javascript và hy vọng ai đó ở đây có thể giúp tôi với điều này.

Tôi có một trang HTML có một bảng trên đó và muốn sử dụng JS để tự động thêm các hàng có nội dung nhất định vào phần nội dung của bảng.

Cho đến nay tôi có mã dưới đây được rút ngắn ở đây (trên thực tế có rất nhiều hàng và cột vv) mà đang gây ra cho tôi những vấn đề sau:

1. Khi tôi chạy này nó chèn HTML động phía trên bảng thay vì bên trong nội dung của bảng.
2. Nó không áp dụng bất kỳ kiểu nào (được xác định bởi các lớp trong CSS của tôi) để nó chỉ hiển thị nội dung của ô mà không cần áp dụng kiểu đường viền hoặc chiều rộng của cột v.v ... Tôi có thể nói bằng cách nào đó rằng nó cũng phải áp dụng các kiểu CSS cho nó?
3. Ngoài ra, tôi đã tự hỏi nếu có một cách mà trong biến đầu tiên tôi không cần phải liệt kê tất cả các số riêng mà thay vào đó chỉ cần viết các đầu tiên (1) và cuối cùng (5) số một loạt như họ chỉ đơn giản là chuỗi như 1, 2, 3, 4, 5.

Ai đó có thể cho tôi biết tôi đang làm gì sai ở đây?

JS của tôi:

$('#btnStart').on('click', function(){ 
    var cols = [1, 2, 3, 4, 5]; 
    var tbody = ''; 
    var i; 
    for (i = 0; i < cols.length; i++) { 
     tbody += cols[i] + "<tr> \ 
       <td class='td col1'>1</td> \ 
       <td class='td col2'>2</td> \ 
       <td class='td col3'><div contenteditable='true' class='editable'></div></td> \ 
      </tr>"; 
    } 
    $('#bodyCal').html(tbody); 
}); 

HTML của tôi:

<table class="tblCal"> 
    <colgroup> 
     <col class="col1" /> 
     <col class="col2" /> 
     <col class="col3" /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th colspan="3" class="th th2">Col 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <div id="bodyCal"></div> 
    </tbody> 
</table> 

Answer 1

Bạn nên nhắm mục tiêu tbody để gán ID với nó. Cũng lưu ý div không được là con của tbody

Nội dung được phép: Không hoặc nhiều hơn <tr> yếu tố.

thay đổi liên quan HTML:

<tbody id="bodyCal"> 
</tbody> 

Đối với câu hỏi thứ 3:

var tbody = ''; 
for (var i = 1; i <= 5; i++) { 
    tbody += "<tr> <td class='td col1'>" + i +" </td> \ 
       <td class='td col2'>2</td> \ 
       <td class='td col3'><div contenteditable='true' class='editable'></div></td> \ 
      </tr>"; 
} 
$('#bodyCal').html(tbody); 

DEMO

Answer 2

Đối với câu hỏi thứ 3 của mình:

var cols = [1, 5]; 

for (i = cols[0]; i <= cols[1]; i++) { 

tại của bạn cho vòng lặp sẽ chạy với giá trị 1, 2, 3, 4 và 5 cho tôi.

Bạn có thể đơn giản hóa nó hơn nữa:

for (i = 1; i < = 5; i ++) {

Nhưng này loại bỏ khả năng đi qua một tham số đầu và cuối, vì vậy không phải là thực tế khi thử nghiệm các phạm vi khác nhau.

Answer 3

Bạn phải đặt id "bodyCal" bên cạnh thẻ body table, vì bảng không thể chứa div trừ khi nó được gói trong thẻ td. Hãy thử điều này:

$('#btnStart').on('click', function(){ 
 
    var cols = [1, 2, 3, 4, 5]; 
 
    var tbody = ""; 
 
    var i; 
 
    for (h = 0; h < 5; h++) 
 
    { 
 
     tbody += "<tr>\ 
 
"; 
 
     for (i = 0; i < cols.length; i++) { 
 
      tbody += "<td class='td col" + cols[i] + "'>" + cols[i] + "</td> \ 
 
"; 
 
     }   
 
     tbody += "<\tr>\ 
 
"; 
 
    } 
 
    $('#bodyCal').html(tbody); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tblCal"> 
 
    <colgroup> 
 
     <col class="col1" /> 
 
     <col class="col2" /> 
 
     <col class="col3" /> 
 
    </colgroup> 
 
    <thead> 
 
     <tr> 
 
      <th colspan="3" class="th th2">Col 1</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="bodyCal"> 
 
    </tbody> 
 
</table> 
 

 
<button id="btnStart">Start</button>