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

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);
});