Table - 用户根据输入的内容控制具有特定 layout/styling 的内容

Question

更新： 我决定走一条不同的路线并重新设计 table 结构本身，并使用 PHP 扫描 td 细胞，然后添加当发现特殊字符时，围绕内部元素的一些自定义 div 标签。 divs 允许每个 td 单元格内的完整高度。而且，这也允许具有多个可能的列的灵活性，因为 table 是由用户使用 table 生成器生成的，它只提供对添加完整行/完整列的控制，而不是sub-dividing td 细胞。

我相信有更有效的方法可以做到这一点 PHP 检查是否有人愿意分享，但以下方法有效。

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

"1,000 | 1,000 | 1,000" > 在该 td 内将显示为 3 等于 "cells"。

"1,000 | 1,000" > 在该 td 内将显示为 2 等于 "cells"。

"1,000 |: 1,000" > 在 td 内将显示为 1 "cell" 33% 和 1 "cell" 66%。

"1,000 :| 1,000" > 将显示为 1 "cell" 在 66% 和 1 "cell" 33% 在 td.

$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: 尝试允许用户使用构建器控制他们的 table 单元格数据以实现特定布局 - 构建器不允许子dividing 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 为您创建了一个小脚本，它可以满足您的需求。它使用您的语法将字符串转换为 table 。诀窍是过滤字符串中的每个单元格并将其放入自己的 <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);
});

Table - 用户根据输入的内容控制具有特定 layout/styling 的内容

Table - User controlled content with specific layout/styling based on the content entered

javascript

php

jquery

html-table

explode