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();
});

使用更少的行和更干的方式可以有更优雅的方法来实现这一点但这非常简单且不言自明，如果您希望使用嵌套表，您应该能够适应它。

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

我如何实现下一个/上一个按钮来循环HTML中的表格数据

1 个答案: