I need your help. I have 2 fields for input dimension of table (input for number of rows and columns) and one button. If I click this button, table should be filled dynamically with given number of rows and columns. How can make this functionality, that table be filled with values starting from bottom right cell spiral / in circuit to the left and top until all cells (in clockwise direction)...
What is the best way to this with HTML, AngularJS, jQuery / JavaScript. (See picture)
http://i.imgur.com/O4GRpND.jpg
Thanks a lot
Currently i have made something just like this:
Cyclic table
<fieldset>
<legend>Input</legend>
<label id="nameRow" >Number of Rows</label> <br />
<input type="number" ng-model="row" placeholder="Row" ><br /><br /><br />
<label id="nameCol">Number of Columns</label> <br />
<input type="number" ng-model="col" placeholder="Column" ><br />
<br></br>
<button type="button" ng-click="addRowCol()">KREIRAJ TABLICU</button>
</fieldset>
<table border="1" cellpadding="10">
<body>
<tr ng-repeat="input Rows and Columns">
<td>
{{ input.row }}
</td>
<td>
{{ input.column }}
</td>
</tr>
</body>
</table>
Assign your rows and columns to a variable on the scope. Then in your template do an ng-repeat for the number of columns and rows and output the table. You might need to convert the number into an array first.
Something like this:
In the controller:
$scope.columns = 5;
$scope.rows = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
In the view:
<table>
<thead>
<th ng-repeat="col in getNumber(columns)" ></th>
</thead>
<tbody>
<tr ng-repeat="col in getNumber(rows)" >
<td ng-repeat="row in getNumber(columns)" ></td>
</tr>
</tbody>
</table>
If you had an array of values and wanted to print out the values you can do that with curly braces inside your ng-repeat as col or row dependent on the data.
Hope this helps!
Related
I have created an angularjs table with the help of an array.
Below is the reference code :-
HTML code:-
<table align="center">
<thead>
<tr>
<th>Session Code</th>
<th>Session Name</th>
</tr>
<tr>
<td>
<input type="text" placeholder="First Name" title="Enter First name here to filter data" ng-model="firstNameText"
/>
</td>
<td>
<input type="text" placeholder="Last Name.." title="Enter Last name here to filter data" ng-model="lastNameText"
/>
</td>
</tr>
</thead>
<tr ng-repeat="tr in Names | filter:{First_x0020_Name:firstNameText,Last_x0020_Name:lastNameText}" style="cursor:pointer">
<td data-ng-cloak ng-click="getInfo($index,$event)">{{tr.First_x0020_Name}}</td>
<td data-ng-cloak ng-click="getInfo($index,$event)">{{tr.Last_x0020_Name}}</td>
</tr>
</table>
When you clicked on the table data of a row you get alert of the First Name and Last Name of row that you have clicked.
Below is the code when clicked on the table data.
$scope.getInfo = function(index,$event){
alert($scope.Names[index].First_x0020_Name + ' , ' + $scope.Names[index].Last_x0020_Name);
}
It works when the data is not filtered.
But when I filtered data using input in table header and click on the table data, it gives wrong name and surname.
I want to get the first name and last name of the person that I have clicked even it is filtered.
I know that the getInfo function that I am using gets the data from non - filtered names array.
How can I use the filtered angularjs table then ?
Instead of index you can pass row object to your function
html
<td data-ng-cloak ng-click="getInfo(tr,$event)">{{tr.First_x0020_Name}}</td>
js
$scope.getInfo = function(row,$event){
alert(row.First_x0020_Name + ' , ' + row.Last_x0020_Name);
}
I have 2 tables i want to push the row of the first table to the second.
table 1 :
<table>
<tr ng-repeat="row in items">
<td>{{row.PRODUCTDESCRIPTION}}</td>
<td><input type="text" ng-model="quantity[$index]"></td>
</tr>
</table>
<button ng-click="pushRows(row)"> </button>
table 2 :
<table>
<tr ng-repeat="row in products">
<td>{{row.PRODUCTDESCRIPTION}}</td>
<td><input type="text" ng-model="quantity[$index]"></td>
</tr>
i need to push the row in table 1 to the table 2 (my problem is how to push the input type text with its value)
You can use ng-model and create a new property on all the items.
plunker Example
So I am trying to add additional columns to a table inside a form. Adding the columns themselves is not that difficult but I don't know how to go about setting their ng-models.
This is my current code:
(HTML)
<button ng-click="add()" type="button">+ column</button>
<table>
<thead id="inputtablehead">
<th class="theadlabel">(in 1.000 EUR)</th>
<th>{{startyear}}</th>
<th class="NBBCodesHeader">NBB Codes</th>
<th>Source</th>
</thead>
<tbody class="input">
<tr>
<td>number of months</td>
<td>
<input ng-model="input{{startyear}}.NumberMonths" type="text" class="{{startyear}}" required>
</td>
<td class="NBBCodes"></td>
</tr>
<tr>
<td>Fixed assets</td>
<td>
<input ng-model="input{{startyear}}.FixedAssets" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">20/28</td>
</tr>
<tr>
<td>Inventory</td>
<td>
<input ng-model="input{{startyear}}.Inventory" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">3</td>
</tr>
</table>
(JS)
angular.module("inputFields", []).controller("MyTable", function ($scope) {
$scope.startyear = new Date().getFullYear();
var nextyear = new Date().getFullYear() - 1;
$scope.add = function () {
$(".NBBCodesHeader").before("<th>"+nextyear+"</th>");
$(".input .NBBCodes").before('<td><input class='+nextyear+' type="text" required></td>');
nextyear--;
};
});
So in my JS the <input class='+nextyear+' type="text" required> should become something like <input ng-model="input'+nextyear+'.NumberMonths" class='+nextyear+' type="text" required> for the <td> element added next to the 'number of months' row.
I was thinking to give ea row an id in the form of NumberMonths and then look up the id when adding the column.
So my question would be: is this a valid way to do it and how would I get this id? Or am I overthinking it and is there an easier way to do this?
Use standard javascript [] object notation for variable property names.
<input ng-model="input[startyear].Inventory"
You shouldn't do DOM manipulations from a controller. It's not a good practice when working with AngularJS. A good rule to remember that is: don't use jQuery. It's a common mistake when starting working with AngularJS. And, in case you would be completely sure that you need to modify the DOM, do it always from a directive.
About your problem, maybe you can base your solution in create a data structure in your controller (a Javascript Object), and render it through a ng-repeat in your template. This way, if you modify the object (adding a new column), the template will be automatically updated.
I need to show hierarchical tree-view in tables. I am trying to create a table inside a parent table when expand is clicked. The child table columns are not aligning properly, even though I gave the same td width using css..
In the below image(http://i60.tinypic.com/352qm2u.jpg) red color lines shows the column reference, where child tds content has to come.. but content is coming in distracted way..
HTML used
<tr class="shaded">
<td>
<span><input type="checkbox" /></span>
</td>
<td>
<span ><img src="></span>
</td>
<td>Q1</td><td>785-061 - SHEATH1</td><td>PUMAfinal221 products</td>
</tr>
<tr>
<td></td>
<td colspan="999">
<div style="height: 180px;overflow-y: auto;">
<table id="tblProducts185346" >
<tbody >
<tr >
<td><input type="checkbox" ></td>
<td>Q1</td><td>785-061 - SHEATH1</td><td>PUMAfinal221 products</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
...... ``
Any idea on how to fix this issue?
I wrote a javascript method to set the target table tds width based on source table td's..
Thanks BigRabbit for your response..
function FormatTable(src, target) {
var count=0;
$(src + ' tr:nth-child(2)').eq(0).children("td").each(function() {
$(target + ' tr:first-child').eq(0).children("td")[count].width = $(this).css("width"); //this.offsetWidth+'px';
count = count + 1;
}
});
}
I am working on a html page. The page has a table with 3 columns and a button. One of the columns of the table is a check box (The number of rows are changed dynamically):
<table cellpadding="0" cellspacing="0" border="1" class="display" id="tag" width="100%">
<tbody>
<tr>
<td align="center">
<input type="checkbox" class="case" name="case" value="0"/>
<td>fruit</td>
<td>apple</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" class="case" name="case" value="1"/>
<td>fruit</td>
<td>pear</td>
</tr>
</tbody>
</table>
<p><input type="button" value="Generate" onclick="generate()"></p>
When user click the "Generate" button, the generate() function will generate a special string base on the column of each row.
My question is that how can I check if the "checkbox" row is checked or not? I would like to filter those non-checked rows when I generate the string.
Thanks.
Filter the rows based upon which have a checked checkbox:
var rows = $(".case:checked").closest("tr");
This returns a jQuery object that contains all of your table rows housing checked checkboxes.
Call getElementsByName will give you an array of references of your checkboxes.
Loop the array in order to get the values.
var arr = document.getElementsByName("case");
for(i = 0; i < arr.length; i++){
if(arr[i].checked){
doSomething;
}
}