表格 - 基于输入内容的具有特定布局/样式的用户控制内容

Question

更新：我决定另辟蹊径，重新设计表格结构本身，并使用 PHP 扫描 td 单元格，然后在发现特殊字符时在内部元素周围添加一些自定义 div 标签. div 允许每个 td 单元格内的全高。而且，这也允许具有多个可能的列的灵活性，因为这些表是由用户使用表构建器生成的，它只提供添加完整行/完整列的控制，而不是细分 td 单元格。

我确信有更有效的方法来执行此 PHP 检查是否有人愿意分享，但以下方法有效。

基本上，检查表格中的所有 td 单元格，并寻找 4 种可能的特殊字符场景。

"1,000 | 1,000 | 1,000" > 将在该 td 内显示为 3 个相等的“单元格”。

"1,000 | 1,000" > 将在该 td 内显示为 2 个相等的“单元格”。

"1,000 |: 1,000" > 在 td 内显示为 33% 处的 1 个“单元格”和 66% 处的 1 个“单元格”。

"1,000 :| 1,000" > 在该 td 内显示为 66% 处的 1 个“单元格”和 33% 处的 1 个“单元格”。

$cellcheck = $td['c'];

if (substr_count($cellcheck," | ") == 2 ) {
    $elem = explode(" | ", $cellcheck);
    echo '<td>';
    echo '<div class="elem-wrap"><div class="elem">' . $elem[0] . '</div><div class="elem">' . $elem[1] . '</div><div class="elem">' . $elem[2] . '</div></div>';
    echo '</td>';
} elseif (substr_count($cellcheck," | ") == 1 ) {
    $elem = explode(" | ", $cellcheck);
    echo '<td>';
    echo '<div class="elem-wrap"><div class="elem">' . $elem[0] . '</div><div class="elem">' . $elem[1] . '</div></div>';
    echo '</td>';
} elseif (substr_count($cellcheck," |: ") == 1 ) {
    $elem = explode(" |: ", $cellcheck);
    echo '<td>';
    echo '<div class="elem-wrap"><div class="elem">' . $elem[0] . '</div><div class="elem double">' . $elem[1] . '</div></div>';
    echo '</td>';
} elseif (substr_count($cellcheck," :| ") == 1 ) {
    $elem = explode(" :| ", $cellcheck);
    echo '<td>';
    echo '<div class="elem-wrap"><div class="elem double">' . $elem[0] . '</div><div class="elem">' . $elem[1] . '</div></div>';
    echo '</td>';
} else {
    echo '<td>'.$cellcheck.'</td>';
}

https://jsfiddle.net/evn0jc7v/

ORIG： 试图允许用户使用构建器控制其表格单元格数据以实现特定布局 - 构建器不允许细分 td 单元格，因此这些行中的每一行代表每行一个 td。我正在寻找一种方法来允许在每个 td 中自定义布局，方法是在输入单元格时识别特殊字符。

具体来说，设计和对齐方式如下所示：

这样用户就可以输入以下内容，然后样式如上图所示。

我正在使用 jQuery 来查找那些内部字符 |、:|、|: 然后可以在它们的位置插入一些 span 标签，但是无法让第一列的间距等于它上面的其他列，并且仍然当单元格中只输入两个值时，将第二个数字居中。

这是一个解释得更好的 JSFiddle：https://jsfiddle.net/wwwxydz1/1/

2 | 4 | 6
2,070 | 4,140 | 6,210
1,544 | 3,087 | 4,631
5.0
127
1,200 |: 1,400
1,000 |: 1,167
5.1 |: 5.9

关于如何最好地实现这一点有什么想法吗？感谢您提供任何见解。

Answer 1

我使用 jQuery 为您创建了一个小脚本，可以按照您的想法进行操作。它使用您的语法将字符串转换为表格。诀窍是从字符串中过滤每个单元格并将其放入自己的<td>

Fiddle

代码如下：

var input = `2 | 4 | 6
2,070 | 4,140 | 6,210
1,544 | 3,087 | 4,631
5.0
127
1,200 :| 1,400
1,000 |: 1,167
5.1 |: 5.9`;

// Split string at new lines
var lines = input.split('\n');

// Save the table so we don't have to look it up each time
var $table = $('#the-table');

// Loop over de lines
$.each(lines, function(){
    var cells = this.split('|');

  // Open the new row
  var html = '<tr>';

  // Loop over de cells
  $.each(cells, function() {  
    var colspan = 1;

    if (this.charAt(0) == ':' || this.substr(this.length - 1) == ':') {
      // There's a : character inside this cell, make it span 2 colums
            colspan = 2;
        } else if (cells.length == 1) {
      // There's only one cell, make it the size of the table
        colspan = 42; // Arbitrary big number
    }

    // Add the cell
    html += '<td colspan="' + colspan + '">' + this.replace(/[: ]/g, '') + '</td>';
  });

  // Close the row
  html += '</tr>';

  // Append the row html we created into the table
  $table.append(html);
});