gpt4 book ai didi

javascript - 如何在 Angular JS 中将我的表字符串解析为 html 表?

转载 作者:行者123 更新时间:2023-12-03 08:12:21 25 4
gpt4 key购买 nike

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

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

|\n ---换行

RS(#) ---行跨度与列号

CM(#) ---按列标题拆分列

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

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

最佳答案

processData 函数中,将表示表格单元格的数据设为具有 rowSpancolumnSplit 属性的对象:

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

您的示例中的数据似乎有问题,因为它似乎将跨越两列的标题定义为一个“列”,而其他列实际上是一个拆分列。所以我想在你的情况下,你必须为每个 rowSpan 添加 1:

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

关于javascript - 如何在 Angular JS 中将我的表字符串解析为 html 表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34087330/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com