表行作为HTML中的计数器

Question

我想知道如何为表行分配一个系统地作为计数器的id。它可以是字符串+计数器，如下所示：

<table>
   <tr id="Row1"> # it can be only a number => id="1"
   <tr id="Row2"> # it can be only a number => id="2"
   <tr id="Row3"> # it can be only a number => id="3"
   .....
   <tr id="Row5000"> # it can be only a number => id="5000"
</table

因为我有数千行，然后无法手动为其分配ID。这就是我想通过XSLT分配它们的原因。有谁知道我怎么能这样做？感谢。

Answer 1

using System;
using System.Globalization;

    //from: https://msdn.microsoft.com/en-us/library/system.globalization.numberformatinfo.numberdecimalseparator(v=vs.110).aspx
    // Gets a NumberFormatInfo associated with the en-US culture.
    NumberFormatInfo nfi = new CultureInfo( "en-US", false ).NumberFormat;
    // Displays the same value with a blank as the separator.
    string seperator = nfi.NumberDecimalSeparator;

    string seperatorRegex = "";

    foreach(char chr in seperator.ToCharArray())
    {
        seperatorRegex += $"[{chr}]?";
    }

    string Pattern = $@"\d+{seperatorRegex}\d*";

    //do matching....

说明：你可以在表格中找到每个tr并为每个tr分配id。

Answer 2

// javascript

var table = document.querySelectorAll('table tr');
{
for(var i=0;i<table.length;i++){
table[i].setAttribute("id",i+1);
} 

// jquery的

$("table tr").each(function(index,object) {
object.attr("id",(index+1));
})

Answer 3

首先，您可以像这样为

指定一个id属性

<table id="mytable">
  <tr></tr>
  <tr></tr>
  ....
</table>

然后在文档底部添加一个脚本

<script>
 (function() {
    var rows = document.getElementById("mytable").rows;
    for(var i = 1; i <= rows.length; i++) {
      rows[i-1].id = 'Row'+i;
    }  
 })();

它是一个纯粹的JavaScript解决方案。不需要jQuery。

Answer 4

为您的表分配一个ID。这里它的newTable然后迭代并设置attibute

<script>
    function getit(){
    $('#newTable').find('tr').each(function(index){
          var x= this.setAttribute("id","Row"+[index]);
        console.log(x);
        })
    }
    </script>

希望有所帮助。

Answer 5

您可以使用此功能： 您的CSS

<style>
body {
    counter-reset: section;
}

table tbody tr th::before {
    counter-increment: section;
    content: "Section " counter(section);
}

table tbody tr th::before {
    content: counter(section);
}
</style>

您的HTML

<table class="table">
        <thead>
                <tr>
                    <th colspan="6">
                    </th>
                </tr>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">f1</th>
                    <th scope="col">f2</th>
                    <th scope="col">f3</th>
                    <th scope="col">f4</th>
                    <th scope="col">f5</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                    <th class="align-middle" scope="row"></th>
                    <td class="align-middle">d1</td>
                    <td class="align-middle">d2</td>
                    <td class="align-middle">d3</td>
                </tr>
                <tr>
                    <th class="align-middle" scope="row"></th>
                    <td class="align-middle">d1</td>
                    <td class="align-middle">d2</td>
                    <td class="align-middle">d3</td>
                </tr>
        </tbody>
</table>