0

我想根据父 li 编号来计算表格的编号。我已经用 JQuery 进行了十进制编号，但我想知道是否可以将其传递到表中？所以就像我的例子，但没有让我手动放置 1.1 1.2 2.1 2.2 等。

<ol>
    <li>Item1
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
                <tr><td>1.1</td><td>some</td></tr>
            <tr><td>1.2</td><td>many</td></tr>
        </table>
    </li>
    <li>Item2</li>
            <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td>2.1</td><td>few</td></tr>
            <tr><td>2.2</td><td>lots</td></tr>
        </table>
    <li>Item3</li>
</ol>
4

1 回答 1

1 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="PATH-TO-jquery"></script>
<script type="text/javascript">
    $(function() {
    $("ol").each(function(indexOl, elemOl) {
        var liNr = 1;
        jQuery(elemOl).children("li").each(function(indexLi, elemLi) {
        var trNr = 1;
        jQuery(elemLi).find("tr").each(function(indexTr, elemTr){
            jQuery(elemTr).find("td:first").each(function(indexTd, elemTd){
            elemTd.innerHTML = "INSERTED: "+liNr+"."+trNr;
            ++trNr;
            });
        });
        ++liNr;
        });
    });
    });
</script>
</head>
<body>
<ol>
    <li>Item1
    <table>
        <tr><th>Num</th><th>Thing</th></tr>
        <tr><td></td><td>some</td></tr>
        <tr><td></td><td>many</td></tr>
    </table>
    </li>
    <li>Item2
    <table>
        <tr><th>Num</th><th>Thing</th></tr>
        <tr><td></td><td>few</td></tr>
        <tr><td></td><td>lots</td></tr>
    </table>
    </li>
    <li>Item3</li>
</ol>
</body>
</html>

对于 3 级结构也是如此：

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="PATH-TO-jquery"></script>
<script type="text/javascript">
    $(function() {
    $("ol:first").each(function(indexOl, elemOl) {
        var sectionNr = 1;
        jQuery(elemOl).children("li").each(function(indexLiSection, elemLiSection) {
        var subSectionNr = 1;
        jQuery(elemLiSection).children("ol").each(function(indexOlSubsection, elemOlSubsection){
            jQuery(elemOlSubsection).children("li").each(function(indexLiSubsection, elemLiSubsection) {
            var trNr = 1;
            jQuery(elemLiSubsection).find("tr").each(function(indexTr, elemTr){
                jQuery(elemTr).find("td:first").each(function(indexTd, elemTd){
                elemTd.innerHTML = "INSERTED: "+sectionNr+"."+subSectionNr+"."+trNr;
                ++trNr;
                });
            });
            ++subSectionNr;
            });
        });
        ++sectionNr;
        });
    });
    });
</script>
</head>
<body>
<ol>
    <li>Section1
    <ol>
        <li>Subsection1.1
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td></td><td>some</td></tr>
            <tr><td></td><td>many</td></tr>
        </table>
        </li>
        <li>Subsection1.2
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td></td><td>some</td></tr>
            <tr><td></td><td>many</td></tr>
        </table>
        </li>
    </ol>
    </li>
    <li>Section2
    <ol>
        <li>Subsection2.1
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td></td><td>some</td></tr>
            <tr><td></td><td>many</td></tr>
        </table>
        </li>
        <li>Subsection2.2
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td></td><td>some</td></tr>
            <tr><td></td><td>many</td></tr>
        </table>
        </li>
    </ol>
    </li>
    <li>Section3
    <ol>
        <li>Subsection3.1
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td></td><td>some</td></tr>
            <tr><td></td><td>many</td></tr>
        </table>
        </li>
        <li>Subsection3.2
        <table>
            <tr><th>Num</th><th>Thing</th></tr>
            <tr><td></td><td>some</td></tr>
            <tr><td></td><td>many</td></tr>
        </table>
        </li>
    </ol>
    </li>
</ol>
</body>
</html>
于 2013-04-12T16:36:45.670 回答