表 html 内组件的结构

发布于 2024-12-03 03:48:40 字数 841 浏览 1 评论 0原文

我想制作一个订单表，每一行都有一个箭头，显示与每个订单相关的账单详细信息，并在我再次单击按钮时隐藏。

我怎样才能制作表的结构？

我这样制作，

<table id="customerTable">
<thead>
       <tr>
      <td>customer name </td>
      <td>order date</td>
      <td>sale point</td>
      <td>total</td>
        </tr>
</thead>

     <tr>
      <td>customer name </td>
      <td>order date</td>
      <td>sale point</td>
      <td>total</td>
          <td><a href="">show details</a></td>
      </tr>

 //also loop here as the number of bills
   <tr>
     <td>bill order/td>
     <td>product</td>
     <td>price</td>
  </tr>

我认为这种结构不正确，并且在表格内制作 div 不起作用，有什么建议吗？

原文

I want to make a table of orders, for each row there's an arrow that show a bill details related to each order and hide when I click again on the button.

How can I make the structure of the table?

I make like this

<table id="customerTable">
<thead>
       <tr>
      <td>customer name </td>
      <td>order date</td>
      <td>sale point</td>
      <td>total</td>
        </tr>
</thead>

     <tr>
      <td>customer name </td>
      <td>order date</td>
      <td>sale point</td>
      <td>total</td>
          <td><a href="">show details</a></td>
      </tr>

 //also loop here as the number of bills
   <tr>
     <td>bill order/td>
     <td>product</td>
     <td>price</td>
  </tr>

I don't think like this structure is correct, and making div inside a table doesn't work, any suggestion please?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

壹場煙雨 2024-12-10 03:48:40

可能的结构：

<table id="customerTable">
    <thead>
        <tr>
            <td>customer name </td>
            <td>order date</td>
            <td>sale point</td>
            <td>total</td>
            <td></td>
        </tr>
    </thead>

    <tbody>
        <tr class="master">
            <td>customer name </td>
            <td>order date</td>
            <td>sale point</td>
            <td>total</td>
            <td>
                <a href="">show details</a>
            </td>
        </tr>

        <tr class="detail">
             <td colspan=5>
                 <!-- new <table> with your details of this row -->
             </td>
        </tr>

        <!-- ... more rows ... --->
    </tbody>
</table>

示例：http://jsfiddle.net/J7szf/

示例 2 ： http://jsfiddle.net/J7szf/1/

Possible structure:

<table id="customerTable">
    <thead>
        <tr>
            <td>customer name </td>
            <td>order date</td>
            <td>sale point</td>
            <td>total</td>
            <td></td>
        </tr>
    </thead>

    <tbody>
        <tr class="master">
            <td>customer name </td>
            <td>order date</td>
            <td>sale point</td>
            <td>total</td>
            <td>
                <a href="">show details</a>
            </td>
        </tr>

        <tr class="detail">
             <td colspan=5>
                 <!-- new <table> with your details of this row -->
             </td>
        </tr>

        <!-- ... more rows ... --->
    </tbody>
</table>

Example: http://jsfiddle.net/J7szf/

Example 2: http://jsfiddle.net/J7szf/1/

回复收藏 0 原文