Question

是否可以使用JavaScript for循环来组合多个div？我有16套这些我想放入for循环。我遇到的问题是它的HTML而不是JavaScript我试图这样做。到目前为止，我还没有看到过如何解决这个问题。感谢您提供任何帮助或建议。

以下代码的作用是捕获从16X17表中预定义的数据，并将其插入到我的文档中的一个单元格中。然后我使用div id来获得其他代码，这些代码只显示我需要的代码。

<div id="101" class="hidden"><script>document.write(tab1a1)</script></div>
<div id="102" class="hidden"><script>document.write(tab1a2)</script></div>
<div id="103" class="hidden"><script>document.write(tab1a3)</script></div>
<div id="104" class="hidden"><script>document.write(tab1a4)</script></div>
<div id="105" class="hidden"><script>document.write(tab1a5)</script></div>
<div id="106" class="hidden"><script>document.write(tab1a6)</script></div>
<div id="107" class="hidden"><script>document.write(tab1a7)</script></div>
<div id="108" class="hidden"><script>document.write(tab1a8)</script></div>
<div id="109" class="hidden"><script>document.write(tab1a9)</script></div>
<div id="110" class="hidden"><script>document.write(tab1a10)</script></div>
<div id="111" class="hidden"><script>document.write(tab1a11)</script></div>
<div id="112" class="hidden"><script>document.write(tab1a12)</script></div>
<div id="113" class="hidden"><script>document.write(tab1a13)</script></div>
<div id="114" class="hidden"><script>document.write(tab1a14)</script></div>
<div id="115" class="hidden"><script>document.write(tab1a15)</script></div>
<div id="116" class="hidden"><script>document.write(tab1a16)</script></div>
<div id="117" class="hidden"><script>document.write(tab1a17)</script></div>

更新：从表中提取数据

<!--Start- Takes Assembly number from Data Table-->  <!--Change "<Col1;" equala columns-->
    for (var x = 1; x<Col1; x++){window["aa"+x] = document.getElementById("part1Table").rows[0].cells[x+1].innerHTML;}
<!--End--- Takes Assembly number from Data Table-->

<!--Start- Takes Assembly Rows from Data Table-->    <!--Change "<Row1;" equals rows-->
    for (var y = 1; y<Row1+1; y++){window["rows"+y] = document.getElementById("part1Table").rows[y].cells[1].innerHTML;}
<!--End- Takes Assembly Rows from Data Table-->

<!--Start- Takes Part number from Data Table-->      <!-- "<Col1;" equals columns----> <!-- If a Column is added to main table add a new line below---->
    for (var z1 =  1; z1 <Col1; z1++) {window["tab1a"+z1]   = document.getElementById("part1Table").rows[1].cells[z1  +1].innerHTML;}
    for (var z2 =  1; z2 <Col1; z2++) {window["tab2a"+z2]   = document.getElementById("part1Table").rows[2].cells[z2  +1].innerHTML;}
    for (var z3 =  1; z3 <Col1; z3++) {window["tab3a"+z3]   = document.getElementById("part1Table").rows[3].cells[z3  +1].innerHTML;}

Answer 1

尝试使用AngularJS（这是一个可以轻松添加到html页面的javascript框架（请参阅AngularJS.com以获得快速介绍））

<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app='myApp'>

    <div ng-repeat='entry in entries'>
      <div id={{entry.id}} class="hidden"><script>document.write({{entry.table}})</script></div>

    </div>

<script src='app.js'></script>
</body>
</html>

然后在名为app.js的文件中的控制器中，您将创建一个对象数组1 ... 100或您想要的任何数字，并将其传递给像这样的范围

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope) {

$scope.entries = [{
id: '101', table: 'tab1a1'}, {id: '102', table: 'tab1a2'}]

// extend to your own range

});

Answer 2

拥有像tab1a1这样的一系列连续变量很难处理。你能把它们放在一个阵列中吗？然后...

var b=document.getElementsByTagName('body')[0];
for(var i=1; i<18; i++){
    var d=document.createElement('div'); //make a div element
    d.id='10'+i; //assign sequential id
    d.innerHTML=tab1a[i]; //put the the array element content corresponding to that number into the new div element
    b.appendChild(d); //place new element into the DOM
    }

Answer 3

另一种选择是使用excel并且基本上在行101,102,103上创建一个列......并且表格的列相似。然后只需以字符串格式添加代码行，并将colums与＆amp;结合在一起。复制所有内容并将其粘贴到记事本中，然后粘贴到您的代码中！

例如：

="<div id='" & A1 & "' etc etc

Answer 4

感谢所有提出建议的人。我花了几个小时的代码并想出了以下内容。它在测试中非常有用。我现在可以在我的表中添加和删除行和列，而无需更改代码。

for (var w =  1; w <Row1; w++)  
for (var z1 =  1; z1 <Col1; z1++) {window["tab" + w + "a" + z1]  = document.getElementById("part1Table").rows[w].cells[z1 +1].innerHTML;}

这取代了我的以下17行：

for (var z17 =  1; z17 <Col1; z17++) {window["tab17a"+z17]   = document.getElementById("part1Table").rows[17].cells[z17  +1].innerHTML;}

这非常好，因为我的新表有50多行。

在for循环中组合div

4 个答案: