我怎样才能解析我的表字符串到角JS的HTML表？

我想将表字符串（如csv）转换为html表格。我的代码对于简单的表格工作正常，但是当它合并行和列时，它会失败。那么我如何在脚本中使用rowspan和column span？我怎样才能解析我的表字符串到角JS的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=" |Through Air |Over Surface |\nRS(0)|in. CM(1)|mm CM(1)|in. CM(2)|mm CM(2)|\nB |3/32\n (a) CM(1)|2.4 \n (a) CM(1)|3/32 \n (a) CM(2)|2.4 \n (a) CM(2)|\nD |1/16\n (a) CM(1)|1.6 \n (a) CM(1)|1/8 \n (a) CM(2)|3.2 \n (a) CM(2)|\nLAST ROW"; 
$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>

| ---是细胞

的dilimiter | \ n ---为新线

RS（＃）---行宽WRT列号

CM（＃）---柱拆分WRT列标题

和价值$ scope.allText是CSV表串

所以基本上我应该得到这个表作为输出 -

来源

2015-12-04 insomniac

在你processData功能，使表示表的数据单元格的对象与rowSpan和columnSplit属性：

[[{value: 10, rowSpan: 1, columnSplit: 0}, ... ] ... ]

你在你的例子有数据似乎是有问题的，因为它似乎定义是跨越两个头列作为一个“列”，而其他列实际上是一个分隔列。所以我想在你的情况下，你必须加1到每一行Span：

<td ng-repeat="y in x" rowSpan="{{y.rowSpan + 1 }}">{{ y.value }}</td>

来源

2015-12-04 11:59:08

我怎样才能解析我的表字符串到角JS的HTML表？

回答

相关问题