javascript - 我将如何实现下一个/上一个按钮以循环浏览 HTML 中的表格数据

Question

我正在创建一个营养数据表，我想循环显示卡路里、蛋白质、总脂肪等，方法是按下一个或上一个按钮来更改表格显示的值。我当前的表是:http://jsfiddle.net/Zku6N/

        <table id='mealSection' border="1" rules="rows">
       <caption id="mealCaption"><b>Your Meal</b></caption>
       <!--nested table-->
       <tr><td align="center"><table>
          <tr><td><input type="button" id="prevValue" value="<"/></td><td style="width:100px" align="center"><b>Calories</b></td><td><input type="button" id="nextValue" value=">"/></td></tr>
        </table></td><tr>
        <!--nested table-->
        <tr><td><table id='info' border="1" rules="rows">
      <tr><td><b>Item Name:</b></td><td><b>Value:</b></td></tr>
        <tr><td id="itemName" style="width:160px"></td><td id="itemInfo" style="width:60px"></td></tr>
      </table></td></tr>
      </table>

该表被硬编码以显示卡路里。如何使用下一步按钮循环显示卡路里、蛋白质和总脂肪，并同时更改“id=itemInfo”的值？

Answer 1

我会把所有内容都放在一张表中，用 CSS 隐藏相应的列。类似的东西:

<table id="mealPlanner">
    <caption id="mealCaption"><b>Your Meal</b>

    </caption>

    <thead>
        <tr>
            <th colspan="2" class="calories">
                <input type="button" class="prev" value="<" />Calories
                <input type="button" class="next" value=">" />
            </th>
            <th colspan="2" class="protien">
                <input type="button" class="prev" value="<" />Protien
                <input type="button" class="next" value=">" />
            </th>
            <th colspan="2" class="fat">
                <input type="button" class="prev" value="<" />Total Fat
                <input type="button" class="next" value=">" />
            </th>
        </tr>
        <tr>
            <th class="calories">Item Name</th>
            <th class="calories">Item Value</th>
            <th class="protien">Item Name</th>
            <th class="protien">Item Value</th>
            <th class="fat">Item Name</th>
            <th class="fat">Item Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="calories">Name</td>
            <td class="calories">Value</td>
            <td class="protien">Name</td>
            <td class="protien">Value</td>
            <td class="fat">Name</td>
            <td class="fat">Value</td>
        </tr>
    </tbody>
</table>

使用以下 CSS:

.protien, .fat {

    display:none;

}

然后连接以下 javascript/jquery:

/*Calories*/
$("th.calories .next").click(function () {
    $(".calories").hide();
    $(".protien").show();
});


$("th.calories .prev").click(function () {
    $(".calories").hide();
    $(".fat").show();
});

/*Protein*/
$("th.protien .next").click(function () {
    $(".protien").hide();
    $(".fat").show();
});


$("th.protien .prev").click(function () {
    $(".protien").hide();
    $(".calories").show();
});

/*Fat*/
$("th.fat .next").click(function () {
    $(".fat").hide();
    $(".calories").show();
});


$("th.fat .prev").click(function () {
    $(".fat").hide();
    $(".protien").show();
});

有更优雅的方法可以用更少的行和更 DRY 的方式来做到这一点，但这是相当简单和不言自明的，如果您希望使用嵌套表，您应该能够适应它。

在此处查看操作:http://jsfiddle.net/6ZPmm/1/