我想根据父李号来做表的数量。我已经使用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>
答案 0 :(得分: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>
三级结构相同:
<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>