如何轻松地从表中添加/删除单元格（改变现有单元格）

问题描述：

我想要一个表格自动将单元格对齐为每行两个，这意味着如果添加/删除一个单元格，单元格将移动为每行两个（如果总数为奇数，最后一行）。

I want a table to automatically align cells to be two per row, meaning that if a add/remove a cell, cells will shift to be two per row (with one on last row if total number of cells is odd).

示例：

<table>

<tr>
<td>old1</td> <td>old2</td>
</tr>


<tr>
<td>old3</td> <td>old4</td>
</tr>

</table>

到此：

<table>

<tr>
<td>NEW</td> <td>old1</td>
</tr>


<tr>
<td>old2</td> <td>old3</td>
</tr>


<tr>
<td>old4</td>
</tr>

</table>

请注意自动添加的行。 / p>

Notice the automatically added row.

答

我会告诉你三种方法来完成你需要的，

I'll show you three ways to accomplish what you need,

css3 使用 flex （仅限现代浏览器）

css 使用 inline- code> （单元格高度有问题，但可用作后退）

jquery 使用标准< table& / code> （所有浏览器）

css3 Using flex (modern browsers only)
css Using inline-table (problem with cell height but usable as sort-of fallback)
jquery Using standard <table> (All browsers!)

.table{
  display: flex;
  flex-wrap: wrap;
}
.cell{
  width:50%;
  background:#ddd;
}

<div class="table">
  <div class="cell">NEW</div>
  <div class="cell">OLD1</div>
  <div class="cell">OLD2</div>
  <div class="cell">OLD3<br>new line</div>
  <div class="cell">OLD4</div>
</div>

display：table; 表示父元素和

display：inline-table 内部DIV：

display: table; for the parent element and
display: inline-table for the inner DIVs:

.table{
  display:table;
}
.cell{
  display:inline-table;
  width:50%;     /* With percentage you simulate "how-many-per-Row" */
  background:#ddd;
}

<div class="table">
  <div class="cell">NEW</div>
  <div class="cell">OLD1</div>
  <div class="cell">OLD2</div> <!-- Works but notice this cell height  -->
  <div class="cell">OLD3<br>new line</div> 
  <div class="cell">OLD4</div>
</div>

您可以使用 inline-table 作为旧版浏览器的后备 - 它不是完全相同的结果，但是没有JavaScript是你能得到的最好的。

You could use the inline-table as a fallback for older browsers - it's not the exact same result but without JavaScript it's the best you could get.

_{查看有关 display 属性的规范： https://developer.mozilla.org/en-US/docs/Web/CSS/display}

_{Take a look in the specs about the display property: https://developer.mozilla.org/en-US/docs/Web/CSS/display}

如果你想坚持使用好的'$ 表元素，你可以使用一点的jQuery。

在这种情况下，它是一个比较复杂（见代码注释）：

If you want to stick to good 'ol table elements you can use "a bit" of jQuery.
In that case it's a bit more complicated (see code-comments):

jQuery(function($){ // DOM is now ready

  var $table = $("table"); // Get your table
  var maxRowCells = 2;     // only 2-per-Row
  var counter = 0;         // just a dummy counter

  function prependNewCell(){

    var $newCell = $("<td/>", {html: "NEW"+(++counter)});

    // Is the last row full?
    if($table.find("tr:last td").length == maxRowCells){
      // If true, append a new TR to TABLE to shift TD's to
      $table.append( $("<tr/>") ); 
    }


    // Shift all last TD's to the next row:
    $table.find("tr:not(:last)").each(function(){
      var $tdLast = $(this).find("td").last();
      $(this).next("tr").prepend( $tdLast );
    });

    // Finally. Prepend the new TD element to the first TR
    $table.find("tr").first().prepend( $newCell );

  }

  $("button").on("click", prependNewCell);

});

td{
  width:50%;
  background:#ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>ADD NEW CELL ON TOP</button>

<table>
  <tr>
    <td>OLD1</td>
    <td>OLD2</td>
  </tr>
  <tr>
    <td>OLD3</td>
    <td>OLD4</td>
  </tr>
</table>

如何轻松地从表中添加/删除单元格（改变现有单元格）

相关推荐