Question

使用 HTML表格时出现问题。

下面我有一个表结构。

<table>
    <caption>Movie Details</caption>
    <thead>
        <tr>
            <th axis="m" header="movie">Movie Name</th>
            <th axis="g" header="genre"> Genre</th>
        </tr>
    </thead>
    <!-- note: rows generates dynamically using loop -->
    <tbody>
        <tr>
            <td axis="m">Aanjana Anjani</td>
            <td axis="g">Romance</td>
        </tr>
        <tr>
            <td axis="m">Bodyguard</td>
            <td axis="g">Romance</td>
        </tr>
        <tr>
            <td axis="m">Gajini</td>
            <td axis="g">Action</td>
        </tr>
        <tr>
            <td axis="m">Singham</td>
            <td axis="g">Action</td>
        </tr>
    </tbody>
</table>

目前此表格按电影名称排序，现在

如果我在<thead>然后<tbody>交换列，是否有任何方法，数据会自动交换（表示tbody，然后是thead 显示）只使用HTML？

表示如果我更改列顺序（genre现在是第一列），

<th axis="g" header="genre"> Genre</th>
<th axis="m" header="movie">Movie Name</th>

然后应更改每行<tbody>的列。

我认为axis和headers属性可能对此有所帮助，但没有得到确切的结果。

Reference for axis in headers

Answer 1

如果你愿意考虑（只是一点点）CSS，你可以。在下面的示例中，您只需交换CSS类的名称即可“切换列”。（即，将.right更改为.left，将.left更改为.right）。您不必对表格中的HTML进行任何更改。

<style type="text/css">
   .right {width:100px; float:right;}
   .left {width:100px; float:left;}
</style>

<table>
   <thead>
      <tr>
         <td width="250px">
            <div class="right">LEFT</div>
            <div class="left">RIGHT</div>
         </td>
      </tr>
   </thead>
   <tr>
      <td width="250px">
         <div class="right">L Data</div>
         <div class="left">R Data</div>
      </td>
   </tr>
</table>

Answer 2

“如果我更改列顺序”是什么意思？

您只能使用JavaScript实时更改HTML结构。

如果你想在没有JavaScript的情况下进行更改，则必须使用PHP等服务器端语言重新加载页面，这将对表进行排序并以不同方式编写HTML代码。

无论如何，您选择，仅交换<thead>内容或替换它是不够的。您仍然必须替换/更改<tbody>的内容，以查看以新方式排序的项目。

HTML：tbody列首先查看thead列的顺序然后显示

2 个答案: