如何为表格各行设置不同规则的单元格递增数值（日历场景）

你之前的代码只针对每一行的第一个单元格做了处理，所以只能实现纵向列的数值递增。要实现横向行内的递增效果，我们需要针对每一行单独遍历它的所有单元格，根据单元格的位置（列索引）来计算对应的值。

先结合目标结果简化需求里的计算规则：

• 基础值：月份month=1，年份year=2019，年份后两位yearLastTwo=19
• 第二行目标值：2、3、4、5、6 → 对应公式：月份 + 日期（和你给出的「月份 + 日期 -1 +1」等价，-1与+1相互抵消）
• 第三行目标值：21、22、23、24、25 → 对应公式：月份 + 日期 + 年份后两位（1+1+19=21，完全匹配目标结果，推测你原规则里的-1 +1 +19是笔误，按此公式计算更贴合需求）

修改后的完整代码 #

整合HTML、CSS与JavaScript

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 1px solid #dddddd;
            text-align: center;
            padding: 8px;
        }
        tr:nth-child(1) {
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <h2 id="Month">Month: 1</h2>
    <span id="Year">Year: 2019</span>
    <table id="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <script>
        $(function() {
            // 从页面元素中提取月份和年份（比硬编码更灵活）
            const month = parseInt($('#Month').text().split(': ')[1]);
            const year = parseInt($('#Year').text().split(': ')[1]);
            const yearLastTwo = year % 100;

            // 处理第二行（索引为1，第一行是表头tr:eq(0)）
            $('#table tr:eq(1) td').each(function(index) {
                const date = index + 1; // 列索引从0开始，对应表头的1-5
                const value = month + date;
                $(this).text(value);
            });

            // 处理第三行（索引为2）
            $('#table tr:eq(2) td').each(function(index) {
                const date = index + 1;
                const value = month + date + yearLastTwo;
                $(this).text(value);
            });
        });
    </script>
</body>
</html>

关键修改点说明 #

1. 精准选中目标单元格：用$('#table tr:eq(1) td')选中第二行的所有单元格，替代了原来只选中每行第一个单元格的td:nth-child(1)。
2. 用列索引对应日期：遍历单元格时，index是当前单元格在该行的索引（从0开始），所以日期为index + 1，正好对应表头的1-5。
3. 动态获取基础值：不再硬编码月份和年份，而是从页面的#Month和#Year元素中提取，后续修改月份年份时无需改动JS代码。

如果后续需要处理更多行，只需要按照相同逻辑，增加对应行的遍历代码即可。

内容的提问来源于stack exchange，提问作者Borislav Evtimov