如何在html中向已完成的表中插入一列？

Question

我使用html创建一个表，如下所示：

<h1>SEAFOOD<br><span>w. White Rice</span></h1>
                <table>
                    <tr>
                        <td>72.</td>
                        <td>Shrimp Lo Mein</td>
                        <td>6.75</td>
                    </tr>
                    <tr>
                        <td>73.</td>
                        <td>Burry Shrimp</td>
                        <td>9.25</td>
                    </tr>
                    <tr>
                        <td>74.</td>
                        <td>Shrimp w. Mixed Vegetable</td>
                        <td>9.25</td>
                    </tr>
                    <tr>
                        <td>75.</td>
                        <td>Shrimp w. Mushroon</td>
                        <td>9.25</td>
                    </tr>
                    <tr>
                        <td>76.</td>
                        <td>Shrimp w. Garlic Shuce</td>
                        <td>9.25</td>
                    </tr>
                    <tr>
                        <td>77.</td>
                        <td>Szechuan Shrimp</td>
                        <td>9.25</td>
                    </tr>
                    <tr>
                        <td>78.</td>
                        <td>Coconut Shrimp</td>
                        <td>11.99</td>
                    </tr>
                </table>

我想我需要在虾卤面和炸虾之间再加一道菜

既然我不想把整个菜号重新输入到我的桌子上，有没有更快的方法呢？

Answer 1

您可以更新表中的所有后续行，也可以使用css让浏览器为您完成此操作。查看这个jFiddle：http://jsfiddle.net/SpacePineapple/Xkj6u/1/

CSS3中的计数可以使用计数器增量来完成。所以，举个例子：

body { counter-reset: numList; } //resetting the counter
span.counter::after {
      counter-increment: numList; //increment
      content: counter(numList) "."; //write to content
}

将导致对每个计数器范围(使用class=counter的范围)进行编号。

浏览器将保留此规则，即使跨度的位置发生更改，或者在其间动态添加其他跨度。

你也可以用<td>做同样的事情

table{counter-reset: numList} //reset counter when a table begins
tr td:first-child::before { //first-child = the first TD in the TR
      counter-increment: numList; //increment
      content: counter(numList) "."; //write to content
}

分叉小提琴：http://jsfiddle.net/SpacePineapple/9LZNd/

http://css-tricks.com/almanac/properties/c/counter-increment/ http://www.w3schools.com/cssref/pr_gen_counter-increment.asp

Answer 2

这些数字似乎是内容的一部分--它们可能是在订购-时用来表示菜肴的，所以它们最好包含在HTML标记中，而不是与CSS或JavaScript一起添加。

根据用于创建和编辑页面的技术，可能会有一些方便的工具为您进行编号。然后，您可以在某个地方维护一个没有数字的表，该工具(例如，PHP代码)将生成一个插入了数字的超文本标记语言table元素。