I tried to add a column if a button is pressed, but with no success.
I made a JSFiddle example with my problem.
I would be very thankful if someone could help me with this problem.
This is my try:
$scope.addValue = function() {
$scope.headers.push('new header');
var users = 5;
for(var i = 0; i < users; i++) {
var rowData = [];
for (var j = 0; j < 1; j++) {
rowData.push('data i=' + i + ' j=' + j)
}
$scope.data.push(rowData);
}
};
Here is a working example based on this JSFiddle.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.headers = [];
$scope.data = [];
$scope.colCount = 3;
var data = [];
// populate demo data
for (var i = 0; i < 10; i++) {
$scope.headers.push('Col ' + (i + 1));
var rowData = [];
for (var j = 0; j < 10; j++) {
rowData.push('Row-' + (i + 1) + ' - Col ' + (j + 1))
}
data.push(rowData);
}
$scope.increment = function(dir) {
(dir === 'up') ? $scope.colCount++: $scope.colCount--;
}
$scope.data = data;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="increment('up')">Add Column</button>
<button ng-click="increment('down')">Remove Column</button>
<table>
<tr>
<th ng-repeat="h in headers | limitTo: colCount">{{h}}</th>
</tr>
<tr ng-repeat="row in data">
<td ng-repeat="item in row | limitTo: colCount">{{item}}</td>
</tr>
</table>
</div>
Related
I neet to return row and cell index according to user click in table.
My function:
function updatePrice()
{
var rIndex, cellIndex, table = document.getElementsByTagName('table')[0];
for(var i = 0; i < table.rows.length; i++){
table.rows[i].onclick = function valorLinha() {
rIndex = this.rowIndex;
/*console.log here works fine*/
};
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
cellIndex = this.cellIndex;
};
/*I NEED values of rIndex and cellIndex here*/
console.log(rIndex);
console.log(cellIndex);
}
}
I'm getting undefined when console.log runs.
How can I solve this?
var table = document.getElementsByTagName('table')[0];
for (let i = 0; i < table.rows.length; i++) {
for (let j = 0; j < table.rows[i].cells.length; j++){
table.rows[i].cells[j].onclick = function(){
console.log("Row = "+i+" Cell = "+j)
}
}
}
rIndex is the same as i variable in the loop
and cellIndex is a collection you should loop it
function updatePrice()
{
var rIndex, cellIndex, table = document.getElementsByTagName('table')[0];
for(var i = 0; i < table.rows.length; i++){
var rowi = table.rows[i];
// rIndex = rowi.rowIndex = i;
rIndex = i;
console.log(rIndex);
// cellIndex are multiple, you should loop
for (var j = 0; j < rowi.cells.length; j++){
var cellj = rowi.cells[j];
cellIndex = cellj.cellIndex;console.log(cellIndex);
}
}
}```
document.querySelectorAll('#table td')
.forEach(e => e.addEventListener("click", function() {
// Here, `this` refers to the element the event was hooked on
console.log("clicked cell at: " + this.cellIndex + ", " + this.parentNode.rowIndex);
}));
td{
cursor:pointer;
}
<table id="table">
<tbody>
<tr>
<td>00</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>11</td>
</tr>
<tr>
<td>02</td>
<td>12</td>
</tr>
</tbody>
</table>
I'm trying to fix my ngdupes error with the checkbox selection. I don't know what's going wrong. Can someone please help? Here is my code:
$scope.GetMultiCheckBox = function GetMultiCheckBox(CheckBoxs) {
var idx = $scope.selectedfunction.indexOf(CheckBoxs);
if (idx > -1) {
$scope.selectedfunction.splice(idx, 1);
}
else {
$scope.selectedfunction.push(CheckBoxs);
}
};
$scope.FilterValueByFunction = function (FunctionVal) {
$scope.Lv7 = [];
if (!$scope.selectedfunction.length == '') {
for (var i = 0; i < $scope.LoadAllData.length; i++) {
for (var j = 0; j < $scope.selectedfunction.length; j++) {
if ($scope.LoadAllData[i].Business_x0020_Checkbox.results.toString().match($scope.selectedfunction[j])) {
$scope.Lv7.push($scope.LoadAllData[i]);
}
}
}
} else {
for (var i = 0; i < $scope.LoadAllData.length; i++) {
$scope.Lv7.push($scope.LoadAllData[i]);
}
}
};
Here is my HTML code for checkboxes:
<ul><li ng-repeat="item in functions">
<input id="{{item}}" type="checkbox" value="{{item}}" ng-disabled="Site.length == 0"
ng-checked="selectedFunction.indexOf(item) > -1"
ng-click="GetMultiCheckBox(item); FilterValueByFunction(item);" autocomplete="off"/></li></ul>
This is the code for the whole data getting filtered based on choices:
<div ng-repeat="item in Lv8|orderBy: 'Category'| filter: SiteFilter
|groupBy: 'Category' | filter: searchBox">
<div id="grad1" ng-show="item.Category_CHANGED">{{item.Category}}
</div>
Thanks!
I am trying to implement the following.
A user enters a sentence into a textbox following which a table is created. An example would be this.
Input: "This is what I want to achieve"
Result:
Currently, based on the code I have there is an object that looks like this:
{t: ["this", "to"], i: ["is", "i"], w: ["what", "want"], a: ["achieve"]};
Below is the current code I have (also see jsfiddle here).
I am able to take the input string and create a table with a row which has the first letter of each word.
HTML
<textarea id="text-input" name="textarea" rows="5" cols="25">This is what I want to achieve</textarea>
<button class="calculate">Calculate</button>
<table>
<tbody>
<tr class="words-header"></tr>
</tbody>
</table>
Javascript
$(document).ready(function() {
$(".calculate").click(function() {
var result = {},
arr = [];
var array = $("#text-input").val().toLowerCase().split(" ");
for (var i = 0; i < array.length; i++) {
if (typeof result[array[i][0]] == 'undefined') {
result[array[i][0]] = [];
}
result[array[i][0]].push(arr[i]);
}
for (var key in result) {
$(".words-header").append("<td>" + key.toUpperCase() + "</td>");
}
});
});
I believe the final table should look like this if it helps:
<table>
<tr>
<td>A</td>
<td>I</td>
<td>T</td>
<td>W</td>
</tr>
<tr>
<td>achieve</td>
<td>is</td>
<td>this</td>
<td>what</td>
</tr>
<tr>
<td> </td>
<td>i</td>
<td>to</td>
<td>want</td>
</tr>
</table>
You can do it this way (Try it by clicking the Run code snippet button below):
var app = app || {};
(function() {
"use strict";
var result, arr;
app.initialize = {
init: function() {
app.splitWords.init();
}
};
app.splitWords = {
init: function() {
$(".calculate").click(function() {
result = [];
arr = $("#text-input").val().split(" ");
app.createMultiArray.init(arr);
});
}
};
app.createMultiArray = {
init: function(array) {
for (var i = 0; i < array.length; i++) {
var letter = array[i][0].toLowerCase();
if (typeof result[letter] == 'undefined') {
result[letter] = [];
}
result[letter].push(array[i]);
}
// I added this method
app.buildTable.init(result);
}
};
app.buildTable = {
init: function(result) {
var headers = Object.keys(result),
max_rows = 0,
rows_html = '';
headers.sort();
app.createHeaders.init(headers);
// Determine how many rows you'll need
for (var i = 0; i < headers.length; i++) {
if(result[headers[i]].length > max_rows) { max_rows = result[headers[i]].length; }
}
// Loop "max_rows" times
for (var i = 0; i < max_rows; i++) {
rows_html += '<tr>';
// Loop through all letters
for(var j = 0; j < headers.length; j++) {
rows_html += '<td>';
if(i < result[headers[j]].length) {
rows_html += result[headers[j]][i];
}
rows_html += '</td>';
}
rows_html += '</tr>';
}
$(".words-header").after(rows_html);
}
};
app.createHeaders = {
init: function(headers) {
// Empty the table in case of multiple tries
$(".words-header").parent().html('<tr class="words-header"></tr>');
for (var i = 0; i < headers.length; i++) {
$(".words-header").append("<td>" + headers[i].toUpperCase() + "</td>");
}
}
};
app.docOnReady = {
init: function() {
app.initialize.init();
}
};
$(document).ready(app.docOnReady.init);
})(jQuery);
#results-table table{ border-collapse: collapse; } #results-table td{ border: 1px solid #000; padding: .2em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="text-input" name="textarea" rows="5" cols="25">This is what I want to achieve</textarea>
<button class="calculate">Calculate</button>
<div id="results-table">
<table>
<tbody>
<tr class="words-header"></tr>
</tbody>
</table>
</div>
I am trying to figure out how to remove all table values from 'dzviokli' that hasnt got same 'majaId' with 'maja.ID'
This is my html
<tbody>
<tr ng-repeat="maja in majas">
<td>{{maja.numurs}}</td>
<td>{{maja.iela}}</td>
<td>{{maja.pilseta}}</td>
<td>{{maja.valsts}}</td>
<td>{{maja.pasts}}</td>
<td><button ng-click="linkedDzivokli(maja)" class="dzivoklap poga">Dzivokli</button></dt>
</tr>
</tbody>
<tbody>
<tr ng-repeat="dz in dzivokli">
<td>{{dz.numurs}}</td>
<td>{{dz.stavs}}</td>
<td>{{dz.ist_sk}}</td>
<td>{{dz.iedz_sk}}</td>
<td>{{dz.pilna_plat}}</td>
<td>{{dz.dziv_plat}}</td>
</tr>
</tbody>
This is my js. The maja.ID is maja from another database and it contais value ID. Table dzivokli has value 'MajaId' and it is linked with table 'maja' value ID.
$http.get("http://localhost:20988/api/maja").success(function (response){$scope.majas = response;});
$http.get("http://localhost:20988/api/dzivoklis").success(function(response){$scope.dzivokli = response;});
var sar = $scope.dzivokli;
var index = maja.ID;
lala(sar,index);
}
function lala(sar,index)
{
for(var i = 0; i < sar.length; i++)
{
if(sar[i].MajaId != index)
{
var x = sar.indexOf(sar[i]);
}
sar.splice(x,1);
}
}
Test with this:
for (var i = 0; i < maja.length; i++) {
seekAndDestroy($scope.dzivokli,majaId, maja[i].ID);
}
function seekAndDestroy(obj, key, value){
for (var i = 0; i < obj.length; i++) {
if (obj[i][key] == value) {
obj.splice(i, 1);
break;
}
}
}
I have figured it out. Thanks jlizanab for answering :)
Here is my js
$scope.linkedDzivokli = function(maja)
{
$http.get("http://localhost:####/api/dzivoklis").success(function(response){
var garums = response.length;
for (var i = 0; i != garums; i++)
{
if (response[i].MajaId == maja.ID) {}
else
{
response.splice(response.indexOf(response[i]), 1);
garums = garums - 1;
i = i - 1;
}
}
$scope.dzivokli = response;
});
}
Using javascript and AngularJS how would I go about adding the Hours values into a variable. I've tried simple JS that I do know (limited knowledge, still beginner) and no luck.
<table class="table table-condensed table-striped table-hover">
<thead>
<tr>
<!--<td></td>-->
<td>Employee <i class="fa fa-sort"></i></td>
<td>Hours <i class="fa fa-sort"></i></td>
<td>Date <i class="fa fa-sort"></i></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="jobhour in jobHours | orderBy:predicate:reverse">
<!--<td>{{$index + 1}}</td>-->
<td>{{jobhour.UserName}}</td>
<td>{{jobhour.AdminHours*1 + jobhour.FieldHours*1 + jobhour.OtherHours*1 + jobhour.TravelHours*1 | number:2}}</td>
<td>{{jobhour.Date | date:medium}}</td>
</tr>
</tbody>
</table>
Above is the code for the ng-repeat on the table and you see I'm adding several values into that column already (this may be why I'm not sure on a simple way to approach this). The TOTAL value I'm trying to get is nothing more than a simple UI notification. I want to place this 'TOTAL SUM' into the label above next to Total Hours:
ANSWER FOR THIS SPECIFIC CODE:
Here's what I ended up doing and worked perfectly. Thanks for the help.
function addArr(arr){
var val = 0;
for (var i = 0; i < arr.length; i++) {
val += parseFloat(arr[i].AdminHours || 0) + parseFloat(arr[i].FieldHours || 0) + parseFloat(arr[i].TravelHours || 0) + parseFloat(arr[i].OtherHours || 0);
//val += arr[i].AdminHours + arr[i].FieldHours + arr[i].TravelHours + arr[i].OtherHours;
}
$scope.totalHours = val;
}
Have a function on your controller that loops through the array and adds the values together, then return and value. Something like this
var addArr = function(arr){
var val = 0;
for(var i = 0; i < arr.length; i++){
val += arr[i];
}
return val;
}
$scope.val = addArr(theArray);
Here's what I ended up doing and worked perfectly. Thanks for the help.
function addArr(arr){
var val = 0;
for (var i = 0; i < arr.length; i++) {
val += parseFloat(arr[i].AdminHours || 0) + parseFloat(arr[i].FieldHours || 0) + parseFloat(arr[i].TravelHours || 0) + parseFloat(arr[i].OtherHours || 0);
//val += arr[i].AdminHours + arr[i].FieldHours + arr[i].TravelHours + arr[i].OtherHours;
}
$scope.totalHours = val;
}