如何结合 html、js 和 css 来自 fiddle

Question

我知道这个问题很愚蠢，fiddle 只是为了测试你的代码，但是通过将 JS 放在 script<> 下和 css 放在 style<> 下将其组合成一个代码对我来说不起作用！

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

<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。有两种方法可以做到这一点：您可以下载 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 来自 fiddle

How to combine html, js and css from fiddle

html

javascript

css

jsfiddle