Question

我知道这个问题很愚蠢，小提琴仅用于测试你的代码，但通过将JS放在脚本＆lt;＆gt;下将其合并到一个代码中和css下的样式＆lt;＆gt;对我不起作用！

我按照其他人的建议使用了以下方式：

<html>

<head>
<style type="text/css">
table tr td {
  border: 1px solid;
  padding: 4px;
}

<body>
 <div ng-controller="MyCtrl">
<button ng-click="processData(allText)">
  Display CSV as Data Table
</button>
<div id="divID">
  <table style="border:1px solid">
    <tr ng-repeat="x in data">
      <td ng-repeat="y in x" rowspan="{{y.rows}}" colspan="{{y.cols}}">{{ y.data }}</td>
    </tr>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script language="JavaScript" type="text/javascript">
var myApp = angular.module('myApp', []);

 myApp.controller("MyCtrl", function($scope) {
  $scope.allText = "RS#2|Through Air CS#2|Over Surface CS#2|\nin.|mm|in.|mm|\nB |3/32\n (a)|2.4 \n (a)|3/32 \n (a)|2.4 \n (a)|\nD |1/16\n (a)|1.6 \n (a)|1/8 \n (a)|3.2 \n (a)|\n";
  $scope.processData = function(allText) {
    // split content based on new line
    var allTextLines = allText.split(/\|\n|\r\n/);
    var lines = [];
    var r, c;
    for (var i = 0; i < allTextLines.length; i++) {
      // split content based on comma
      var data = allTextLines[i].split('|');

      var temp = [];
      for (var j = 0; j < data.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].replace(/RS#.*$/, '').replace(/CS#.*$/, '')
        });
      }
      lines.push(temp);

    }
    alert(JSON.stringify(lines));
    $scope.data = lines;
  }
});

Answer 1

问题在于您使用的是外部JS框架AngularJS。您将不得不创建另一个加载Angular的脚本标记。有两种方法可以执行此操作：您可以下载角度源代码，然后将其加载到HTML中，或使用CDN。

要使用CDN，您只需在当前<script>标记上方添加以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

您的最终输出应如下所示：

<html>
<head>
<style type="text/css">
    // CSS Content
    </style>
</head>
<body ng-app="myApp">
 <!-- some html elements -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script language="JavaScript"  type="text/javascript">
        // more js here.
    </script>   
</body>

如何结合小提琴中的html，js和css

1 个答案: