4

我正在尝试将表字符串（如 csv）转换为 html 表。我的代码适用于简单的表，但是当它合并行和列时它失败了。那么如何在脚本中使用行跨度和列跨度？

<!DOCTYPE html>
<html ng-app="" ng-controller="myCtrl">
<style>
table, th, td {
border: 1px solid black;
padding:5px;
}
table {
   border-collapse: collapse;
   margin:10px;
}
</style>
<body>
    <button ng-click="processData(allText)">
        Display CSV as Data Table
    </button>
    <div id="divID">
        <table>
            <tr ng-repeat="x in data">
                <td ng-repeat="y in x">{{ y }}</td>
            </tr>
        </table>
    </div>
    <div>
        <table>
        </table>
    </div>

JS

<script>
function myCtrl($scope, $http) {

    $scope.allText="Series |Wire Range\n (AWG) |"+
           "Wire Type |FW |Voltage\n (V) |Current \n (A) |"+
           "UG |CA |\nSL-6100 RS#2|26 16, SOL,\n Unprepared |"+
           "Cu RS#2|2 RS#2|300 RS#2|7 RS#2|B, D RS#2|"+
           "2(105), 4 RS#2|\n24 - 16, STR,\n Unprepared |"+
           "\nNominal Strip length: 9 - 10 mm CS#8|"+
           "\nEnvironmental - Maximum ambient temperature"+
           " rating for CNR: 85 C CS#8|\n";
    $scope.processData = function(allText) {
        // split content based on new line
        var allTextLines = allText.split(/\|\n|\r\n/);
        var headers = allTextLines[0].split('|');
        var lines = [];

        for ( var i = 0; i < allTextLines.length; i++) {
            // split content based on comma
            var data = allTextLines[i].split('|');
            if (data.length == headers.length) {
                var temp = [];
                for ( var j = 0; j < headers.length; j++) {
                    temp.push(data[j]);
                }
                lines.push(temp);
            }
        };
        $scope.data = lines;
    };
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

RS#2 ---表示行跨度为 2

cs#8 ---表示 colspan 为 8

| ---是单元格的分隔符

|\n ---换行

$scope.allText 中的值是 CSV 表字符串

所以基本上我应该把这张表作为输出 -

输出表

4

2 回答 2

2

您可以使用行和列创建一个对象，以便您可以将其用作行跨度和列跨度。

像这样

演示

$scope.processData = function(allText) {
    // split content based on new line
    var allTextLines = allText.split(/\|\n|\r\n/);
    var headers = allTextLines[0].split('|');
    var lines = [];
    var r,c;
    for ( var i = 0; i < allTextLines.length; i++) {
        // split content based on comma
        var data = allTextLines[i].split('|');
        if (data.length == headers.length) {
            var temp = [];
            for ( var j = 0; j < headers.length; j++) {
                if(data[j].indexOf("RS") !== -1) {
                    r = data[j].split("#").reverse()[0];
                }
                else {
                    r = 0;
                }
                if(data[j].indexOf("CS") !== -1) {
                    c = data[j].split("#").reverse()[0];

                }
                else {
                    c = 0;
                }
                temp.push({"rows":r,"cols":c,"data":data[j]});
            }
            lines.push(temp);
        }
    }
    alert(JSON.stringify(lines));
    $scope.data = lines;
}

您可以将 CS 添加到您的字符串并根据此代码中的要求更改条件。

于 2015-12-01T10:03:18.397 回答
1

控制器

function myCtrl($scope, $http) {
    $scope.allText = "Series |Wire Range\n (AWG) |Wire Type |FW |Voltage\n (V) |Current \n (A) |UG |CA |\nSL-6100 RS#2|26 16, SOL,\n Unprepared |Cu RS#2|2 RS#2|300 RS#2|7 RS#2|B, D RS#2|2(105), 4 RS#2|\n24 - 16, STR,\n Unprepared |\nNominal Strip length: 9 - 10 mm CS#8|\nEnvironmental - Maximum ambient temperature rating for CNR: 85 C CS#8";
    $scope.processData = function (allText) {
        var table = [];
        allText.split(/\|\n|\r\n/).forEach(function (line) {
            var tr = [];
            line.split('|').forEach(function (cell) {
                tr.push({
                    text: cell.replace(/RS#.*$/, '').replace(/CS#.*$/, ''),
                    rowspan: (cell + 'RS#1').replace(/^[\S\s]*?RS#(\d*).*$/, '$1'),
                    colspan: (cell + 'CS#1').replace(/^[\S\s]*?CS#(\d*).*$/, '$1'),
                })
            })
            table.push(tr)
        });
        $scope.table = table;
    };
}

HTML

<table>
    <tr ng-repeat="tr in table">
        <td ng-repeat="td in tr" ng-attr-colspan="{{td.colspan}}"  ng-attr-rowspan="{{td.rowspan}}">{{ td.text }}</td>
    </tr>
</table>

代码片段

function myCtrl($scope, $http) {
  $scope.allText = "Series |Wire Range\n (AWG) |Wire Type |FW |Voltage\n (V) |Current \n (A) |UG |CA |\nSL-6100 RS#2|26 16, SOL,\n Unprepared |Cu RS#2|2 RS#2|300 RS#2|7 RS#2|B, D RS#2|2(105), 4 RS#2|\n24 - 16, STR,\n Unprepared |\nNominal Strip length: 9 - 10 mm CS#8|\nEnvironmental - Maximum ambient temperature rating for CNR: 85 C CS#8";
  $scope.processData = function (allText) {
    var table = [];
    allText.split(/\|\n|\r\n/).forEach(function (line) {
      var tr = [];
      line.split('|').forEach(function (cell) {
        tr.push({
          text: cell.replace(/RS#.*$/, '').replace(/CS#.*$/, ''),
          rowspan: (cell + 'RS#1').replace(/^[\S\s]*?RS#(\d*).*$/, '$1'),
          colspan: (cell + 'CS#1').replace(/^[\S\s]*?CS#(\d*).*$/, '$1'),
        })
      })
      table.push(tr)
    });
    $scope.table = table;
  };
}

angular.module('myApp', [])
.controller('ctrlr', myCtrl)
table, th, td {
    border: 1px solid black;
    padding: 5px;
}

table {
    border-collapse: collapse;
    margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="ctrlr">
    <button ng-click="processData(allText)">
      Display CSV as Data Table
    </button>
    <div id="divID">
      <table>
        <tr ng-repeat="tr in table">
          <td ng-repeat="td in tr" ng-attr-colspan="{{td.colspan}}"  ng-attr-rowspan="{{td.rowspan}}">{{ td.text }}</td>
        </tr>
      </table>
    </div>
    <div>
      <table></table>
    </div>
  </div>
</div>

于 2015-12-01T10:16:19.163 回答