Đánh số thứ tự trong table html

Question

Trang chủ
Thủ thuật blog
Hướng dẫn viết CSS số thứ tự trong bảng Table

[blog]

Hướng dẫn các bạn viết CSS số thứ tự trong bảng Table dùng css rowNumber để đánh số thứ tự cho bảng. Hướng dẫn cách để lập chỉ mục các hàng của bảng với bộ đếm (rowNumber) bằng CSS.

Đầu tiên các bạn viết CSS như sau:

Sau đó các bạn viết html cho bảng như sau:


    
      
    
    
      
    
    
      
    
  Template Blogspot bán hàng
Template blogspot bất động sản
Template blogspot landing page

Xem kết quả như sau

Template Blogspot bán hàng

Template blogspot bất động sản

Template blogspot landing page

Như vậy là bạn đã làm xong cách đánh số thứ tự cho bảng table bằng css sử dụng rowNumber đơn giản.
[/blog]

thu-thuat-blog

Tôi có bảng HTML sau:


  
    blue
  
  
    red
  
  
    black

Tôi muốn mỗi hàng trong bảng này có một số tự động được gán cho mỗi mục.

Làm sao anh ta có thể làm được?

javascript
html-table

50 hữu ích 4 bình luận 81k xem chia sẻ

answer

98

CSS sau liệt kê các hàng trong bảng ( demo ):

table {
  counter-reset: rowNumber;
}

table tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) ".";
  padding-right: 0.3em;
  text-align: right;
}


  blue
  red
  yellow
  green
  purple
  orange
  maroon
  mauve
  lavender
  pink
  brown

Nếu không thể sử dụng CSS, hãy thử mã JavaScript sau ( demo ):

var table = document.getElementsByTagName('table')[0],
  rows = table.getElementsByTagName('tr'),
  text = 'textContent' in document ? 'textContent' : 'innerText';

for (var i = 0, len = rows.length; i < len; i++) {
  rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}


  
    blue
  
  
    red
  
  
    black

98 hữu ích 5 bình luận chia sẻ

answer

27

Và nếu bạn cũng muốn sử dụng tiêu đề thì sau đây là thứ bạn cần: http://jsfiddle.net/davidThomas/7RyGX/

table {
    counter-reset: rowNumber;
}

table tr:not(:first-child) {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

lưu ý: ": not (: first-child)" trong đó.

27 hữu ích 2 bình luận chia sẻ

answer

13

Đây là một sửa đổi của giải pháp CSS của David Thomas hoạt động có hoặc không có hàng tiêu đề trong bảng. Nó tăng bộ đếm trên tdô đầu tiên của mỗi hàng (do đó bỏ qua hàng chỉ có thcác ô):

table
{
    counter-reset: rowNumber;
}

table tr > td:first-child
{
    counter-increment: rowNumber;
}

table tr td:first-child::before
{
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Bạn có thể thấy hành vi trong jsfiddle này .

13 hữu ích 0 bình luận chia sẻ

answer

2

Đây là một giải pháp javascript sẽ thêm một ô ở đầu mỗi hàng, ô này sẽ được sử dụng để đánh số, nếu có thô này sẽ nhận được một colspan=2thuộc tính.

var addNumeration = function(cl){
  var table = document.querySelector('table.' + cl)
  var trs = table.querySelectorAll('tr')
  var counter = 1
  
  Array.prototype.forEach.call(trs, function(x,i){
    var firstChild = x.children[0]
    if (firstChild.tagName === 'TD') {
      var cell = document.createElement('td')
      cell.textContent = counter ++
      x.insertBefore(cell,firstChild)
    } else {
      firstChild.setAttribute('colspan',2)
    }
  })
}

addNumeration("test")


  
   hi!
  
  
    blue
  
  
    red
  
  
    black

2 hữu ích 1 bình luận chia sẻ

Đăng nhập để trả lời câu hỏi

Có thể bạn quan tâm

programming html Table trong HTML Table trong PHP

Đánh số thứ tự trong table html

Đăng nhập để trả lời câu hỏi

Có thể bạn quan tâm

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