首页 文章

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

提问于
浏览 次
1

UPDATE: 我决定采用不同的路径并重新编写表结构本身，并使用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内的自定义布局的方法 .

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

这样用户就可以输入以下内容，然后如上所示进行样式设置 .

我正在使用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

关于如何最好地解决这个问题的任何想法？感谢您的任何见解 .

javascript php jquery html-table explode

1 回答

  • 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);
});
    回复于

相关问题