Can anyone help me learn how to convert an HTML table into a dynamic Javascript table using the for loop? This is an example I found in my book and wanted to see how I could go about doing this.
Heading There is sections of the table that need to have the rows combined and he columns combined. I have been struggling with this for some time. Any help would be appreciated. I did not include the CSS portion of the code only the table.
<html>
<body>
<table class="table">
<tr>
<th colspan= "3" class= "MH">Conversion Tables</th>
</tr>
<tr>
<th rowspan="3" class="heading1">Meters to
<br />Feet</th>
<td>1 meter</td>
<td>3.28 feet</td>
</tr>
<tr class="difrow">
<td>50 meters</td>
<td>164.04 feet</td>
</tr>
<tr>
<td>100 meters</td>
<td>328.08 feet</td>
</tr>
<tr class="difrow">
<th rowspan="3" class="heading1">Kilometers to
<br />Miles</th>
<td>1 kilometer</td>
<td>0.62 miles</td>
</tr>
<tr>
<td>50 kilometers</td>
<td>31.07 miles</td>
</tr>
<tr class="difrow">
<td>100 kilometers</td>
<td>62.14 miles</td>
</tr>
</table>
</body>
</html>
you can add id attribute to table tag then call a javascript method on page load:
<table class="table" id="tableId">
function createRows(){
var items = "<tr><td></td></tr>...";
document.getElementById("tableId").innerHTML = items;
}
in javascript method you can use for to generate table rows.
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
I'm trying to figure out what I am doing wrong here. For some reason angular will build out the div structure 10 times because there are 10 items in $scope.aggregators. However it doesn't build out the TR structure at all?
<div class="info-pane" ng-controller="CatalogCtrl">
<table id="records">
<thead>
<tr>
<th><span>Vendor Code</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="aggregator in aggregators}">
<td>{{aggregator.vendor_code}}</td>
</tr>
</tbody>
</table>
<div ng-repeat="aggregator in aggregators">
</div>
remove } from ng-repeat="aggregator in aggregators}"
Is it possible to group data (using rowspan as explained here) in a table rendered with angularjs. Data is hierarchical, with state having many counties and each counties has multiple zipcodes. I want a table with only column for state, county, zip etc (so give a rowspan for length of the collection). I am not sure ng-repeat-start and ng-repeat-end can be used to achieve this. Please see the starter template here
<table>
<thead>
<tr>
<th>State</th>
<th>County</th>
<th>Zip</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='st in states'>
<td>{{st.name}}</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
data
var oh_counties = [
{name: "Franklin", zips: [111,222,333,444,555]},
{name: "Adams", zips: [111,222,333,444]},
{name: "Allen", zips: [111,222,333]}
],
wi_counties = [
{name: "Dane", zips: [111]},
{name: "Adams", zips: [111,222,333,444]}
]
$scope.states = [
{name: "OH", counties: oh_counties},
{name: "WI", counties: wi_counties},
];
Edit:
A handcrafted version of the desired output is here http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview
This is a variant of Holly Cummins' answer. The repeat is moved into the tr with ng-repeat-start and ng-repeat-end to prevent the tbody from being repeated. Also uses a slightly different method to hide the first row.
<tbody>
<tr ng-repeat-start='st in states'>
<th rowspan="{{st.counties.length}}">{{st.name}}</th>
<td>{{st.counties[0].name}}</td>
</tr>
<tr ng-repeat-end ng-repeat='county in st.counties' ng-hide="$first">
<td>{{county.name}}</td>
</tr>
</tbody>
This variant of KayakDave's answer improves the structuring by pulling the first nested row out to share the <tr> of the header:
<tbody ng-repeat='st in states'>
<tr>
<th rowspan="{{st.counties.length}}">{{st.name}}</th>
<td>{{county[0].name}}</td>
</tr>
<tr ng-repeat='county in st. counties' ng-show="$index > 0">
<td>{{county.name}}</td>
</tr>
</tbody>
Sure. Is something like this what you had in mind:
<tbody ng-repeat='st in states'>
<td rowspan="{{st.counties.length+1}}">{{st.name}}</td>
<tr ng-repeat='county in st.counties'>
<td>{{county.name}}</td>
</tr>
</tbody>
I kept this example simple, nested 2 deep. But in the fiddle, below, I've got it nested 3 deep (so it includes zip).
demo fiddle
This may be usefull
<table>
<tbody ng-repeat='st in states'>
<tr>
<th >{{st.name}}</th>
<td>
<table>
<tr ng-repeat='county in st.counties'>
<td>{{county.name}}</td>
<td>
<table>
<tr ng-repeat='zip in county.zips'>
<td>{{zip}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I want to determine that whether any html table on the webpage has the tags present or not. If it not present , I want to insert the colgroup tag in the html. I have got the table object in the javascript but I dont find any way to solve this problem. Please help !!!
See http://jsfiddle.net/jv5yQ/
Just use .getElementsByTagName('colgroup'):
HTML:
<table id="t1">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
<table id="t2">
<colgroup style="background-color:#F00"></colgroup>
<colgroup style="background-color:#00F"></colgroup>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
JavaScript:
var ids=['t1','t2'];
for(var i=0;i<ids.length;i++){
var el=document.getElementById(ids[i]),
cond=el.getElementsByTagName('colgroup').length===0;
if(cond){
var col1=document.createElement('colgroup'),
col2=col1.cloneNode(false);
col1.style.background='#0f0';
col2.style.background='#f0f';
el.insertBefore(col2,el.firstChild);
el.insertBefore(col1,el.firstChild);
}
}