繁体   English   中英

结转清单编号进入我的表

[英]Carryover List Numbering into my Table

我想根据父母李人数做表格的号码。 我已经用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>
<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>

三层结构相同:

<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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM