javascript - 如何在脚本中引入行和列跨度？

我正在尝试将表字符串(如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>

<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表字符串

所以本质上我应该将此表作为输出

最佳答案

您可以创建具有行和列的对象，以便可以将其用作行跨和列跨。

像这样

Demo

$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添加到您的字符串中，并根据此代码的要求更改条件。