Hướng dẫn how do i find the table row number in html? - làm cách nào để tìm số hàng của bảng trong html?

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 thế nào anh ta có thể làm?

Balusc

1.1M366 Huy hiệu vàng3576 Huy hiệu bạc3526 Huy hiệu đồng366 gold badges3576 silver badges3526 bronze badges

Đã hỏi ngày 9 tháng 6 năm 2013 lúc 17:45Jun 9, 2013 at 17:45

4

Các CSS sau đây liệt kê các hàng 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 CSS không thể được sử dụng, 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
  

Trevor Dixon

21.1k11 Huy hiệu vàng69 Huy hiệu bạc103 Huy hiệu Đồng11 gold badges69 silver badges103 bronze badges

Đã trả lời ngày 9 tháng 6 năm 2013 lúc 17:58Jun 9, 2013 at 17:58

David Thomasdavid ThomasDavid Thomas

244K51 Huy hiệu vàng369 Huy hiệu bạc403 Huy hiệu đồng51 gold badges369 silver badges403 bronze badges

7

Và nếu bạn sẽ sử dụng các tiêu đề như sau đây là điều 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 ý: ": không (: đầu tiên)" trong đó.

Đã trả lời ngày 4 tháng 2 năm 2015 lúc 12:04Feb 4, 2015 at 12:04

user3691833user3691833user3691833

4414 Huy hiệu bạc2 Huy hiệu đồng4 silver badges2 bronze badges

2

Dưới đâ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ỉ bằng các ô ____10):

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.

Đã trả lời ngày 17 tháng 9 năm 2016 lúc 3:29Sep 17, 2016 at 3:29

ConnorsfanconnorsfanConnorsFan

67.8K12 Huy hiệu vàng118 Huy hiệu bạc142 Huy hiệu đồng12 gold badges118 silver badges142 bronze badges

Dưới đâ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ó ô

table {
  counter-reset: rowNumber;
}

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

table {
  counter-reset: rowNumber;
}

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

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
  

Đã trả lời ngày 16 tháng 9 năm 2016 lúc 22:33Sep 16, 2016 at 22:33

Maimanmanmaianmaioman

17.4K4 Huy hiệu vàng35 Huy hiệu bạc42 Huy hiệu đồng4 gold badges35 silver badges42 bronze badges

1

Thẻ HTML cho hàng bảng là gì?