How do i introduce row and column span in my script?

Question

I'm trying to convert table string (like csv) to html table. My code works fine with simple table but when it merged row and column it fails. so how do i can use rowspan and column span in the script?

<!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 ---indicates rowspan of 2

cs#8 ---indicates colspan of 8

| ---is the dilimiter for cell

|\\n ---for new line

and value in $scope.allText is CSV table string

so essentially i should get this table as output-

输出表

Answer 1

You can create an object with rows and cols so that you can use that as rowspan and colspan.

Like this

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

You can add CS to your string and alter conditions as required in this code.

Answer 2

Controller

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>

Code Snippet

 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>

How do i introduce row and column span in my script?

Question

2 answers

solution1
2 ACCPTED 2015-12-01 10:03:18

solution2
1 2015-12-01 10:16:19

How do i introduce row and column span in my script?

Question

2 answers

solution1 2 ACCPTED 2015-12-01 10:03:18

solution2 1 2015-12-01 10:16:19

solution1
2 ACCPTED 2015-12-01 10:03:18

solution2
1 2015-12-01 10:16:19