如何组合来自fiddle的html、js和css

How to combine html, js and css from fiddle

本文关键字：html js css fiddle 何组合 组合      更新时间：2023-09-26

我知道这个问题很傻，fiddle只是用来测试你的代码，但是通过将JS置于脚本<>下将其组合为一个代码和样式<>下的css对我不起作用！

链接到我的代码

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

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

问题是您使用的是外部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>
相关文章：