表格：在中间行空间中添加内容的下一行

Question

我正在尝试创建这样的表：

我想在每一行之间都有一个元素。这将是一个在这些行之间添加一行的按钮。类似于 Msft Word 的做法：

Rowspan 不会在这里删减，因为 rowspan 将跨越第 1 行和第 2 行、第 3 行和第 4 行，而不是第 2 行和第 3 行。

基本表代码：https://jsfiddle.net/hs3sz5bh/

<table>
    <tbody>
    <tr>
        <td>foo row 1</td>
        <td rowspan="2" >+</td>
    </tr>
    <tr>
        <td>bar row 2</td>
    </tr>
    <tr>
        <td>xxx row 3</td>
        <td rowspan="2" >+</td>
    </tr>
    <tr>
        <td>yyy row 4</td>
    </tr>
    <tr>    

    </tr>
    </tbody>
</table>

这就是我想要的样子：

谢谢，

Answer 1

需要一些微调，但使用 HTML5 的 Content Editable 属性，我们可以将 :focus pseudo class 与 :after pseudo element 结合使用来实现以下目标：

table {
  border-spacing:0 4px;
}
tbody tr:focus {
  outline: none;
}
tbody tr:focus * {
  border-bottom: 5px  double black;
}
tbody tr:focus:after {
  content: '+';
  display: block;
  cursor: pointer;
  transform: translateY(0.75rem);
  border: 2px solid black;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  text-align: center;
}

<table>
  <thead>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holidays</th>
  </thead>
  <tbody>
    <tr contenteditable='true'>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr contenteditable='true'>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr contenteditable='true'>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
  </tbody>
</table>

---

为了让“新行”按钮始终可见，您可以删除 css 的 contenteditable 属性和 :focus 部分，如下所示：

table {
  border-spacing:0 4px;
}
tbody tr * {
  border-bottom: 5px  double black;
}
tbody tr:after {
  content: '+';
  display: block;
  cursor: pointer;
  transform: translateY(0.75rem);
  border: 2px solid black;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  text-align: center;
}

<table>
  <thead>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holidays</th>
  </thead>
  <tbody>
    <tr>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
    <tr>
      <td>Month</td>
      <td>Money</td>
      <td>value</td>
    </tr>
  </tbody>
</table>

Answer 2

我的回答将针对您提供的 HTML 表格起作用，但如果您有不同的表格，它也会给您一个想法。

我已将id 添加到某些单元格，然后将样式应用于每个单元格。

td {
  border: 1px solid red;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#cell1 {
  border-top: 1px solid red !important;
}

#cell2, #cell1{
  border-bottom: none;
  position: absolute;
  padding-top: 11px;
  border-left: none;
  border-top: none;
  padding-left: 2px;
  
  
}

#cell3{
  border-top: none;
}

<table>
    <tbody>
    <tr>
        <td>foo row 1</td>
        <td id="cell1">+</td>
    </tr>
    <tr>
        <td>bar row 2</td>
        <td id="cell2">+</td>
    </tr>
    <tr>
        <td>xxx row 3</td>
        <td rowspan="2" id="cell3">+</td>
    </tr>
    <tr>
        <td>yyy row 4</td>
    </tr>
    <tr>    

    </tr>
    </tbody>
</table>

Answer 3

您可以通过在 td 中添加另一个 table 来轻松完成此操作，而该 table 只有三行和三个单元格。

见以下代码：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="4" style="border:0;">
      <table>
        <tr>
          <td>Something here</td>
        </tr>
        <tr>
          <td>Something here</td>
        </tr>
        <tr>
          <td>Something here</td>
        </tr>

      </table>
    </td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>April</td>
    <td>$80</td>
  </tr>
</table>

https://jsfiddle.net/hs3sz5bh/2/

Answer 4

您可以使用编辑此代码来获得相同的结果

<script>

$(document).ready(function(){
    var i=0;
    $("#btnGenerate").click(function () {
        var ename = $("#ename").val();
        var eid = $("#eid").val();
        var desc = $("#desc").val();

        szTr = "<tr><td>";
        szTr = szTr + ename + "</td>";
        szTr = szTr + "<td>" + eid + "</td>";
        szTr = szTr + "<td>" + desc  + "</td>";
        if(i%2==0) szTr = szTr + "<td rowspan='2'>+</td>";
        i++;
        szTr = szTr + "</tr>";
        $('#display').append(szTr);

    });


    $('#display').on('click', '.delete', function () {
        $(this).parents('tr').remove();
    });

});



</script>
</head>
<body>

Name:<input type="text" id="ename" value="Name"/><br />
Id: <input type="text" id="eid" value="new_id"/><br />
Des <input type="text" id="desc" value="description"/><br />
 <input type="button" value="Generate" id="btnGenerate">

<div id="dvTable">
<table id="display">
</table>
</div>
</body>
</html>