[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:
table { counter-reset: rowNumber; } table tr { counter-increment: rowNumber; } table tr td:first-child::before { content: counter[rowNumber]; min-width: 1em; margin-right: 0.5em; }
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: //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ó th
cá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=2
thuộ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ẻ