Ok so i have this html structure jsfiddle and what I want do is grab all 8 surrounding tds when one is clicked.
So for example if the user clicks on #c3 then I want an array of the ['b2', 'b3', 'b4', 'c2', 'c4', 'd2', 'd3', 'd4'] but if they select #a2 since it doesnt have 8 surrounding corners it would return ['a1', 'a3', 'b1', 'b2', 'b3']
This is the direction I was going with but I think this will get pretty complicated ...any better ideas or is this the best way
function surrounding_table_rows(id){
var table_rows = new Array();
var letters = new Array("a","b","c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o");
var letter = id[0];
var number = id[1];
var index = letters.indexOf(letter);
if (index == 0) {
// need to add this logic here
}else{
var prior_letter = letters[index - 1];
var after_letter = letters[index + 1];
if (number == 0) {
// need to add this logic here
}else if(number == 14){
// need to add this logic here
}else{
table_rows.push("#"+letter+(parseInt(number)-1));
table_rows.push("#"+letter+(parseInt(number)+1));
table_rows.push("#"+prior_letter+(parseInt(number)-1));
table_rows.push("#"+prior_letter+(number));
table_rows.push("#"+prior_letter+(parseInt(number)+1));
table_rows.push("#"+after_letter+(parseInt(number)-1));
table_rows.push("#"+after_letter+(number));
table_rows.push("#"+after_letter+(parseInt(number)+1));
}
}
return table_rows;
}
my javascript function does work on middle
surrounding_table_rows("d4")
["#d3", "#d5", "#c3", "#c4", "#c5", "#e3", "#e4", "#e5"]
here is the html
<table class='config'>
<tr>
<td id='a1'></td>
<td id='a2'></td>
<td id='a3'></td>
<td id='a4'></td>
<td id='a5'></td>
<td id='a6'></td>
<td id='a7'></td>
<td id='a8'></td>
<td id='a9'></td>
<td id='a10'></td>
<td id='a11'></td>
<td id='a12'></td>
<td id='a13'></td>
<td id='a14'></td>
<td id='a15'></td>
</tr>
<tr>
<td id='b1'></td>
<td id='b2'></td>
<td id='b3'></td>
<td id='b4'></td>
<td id='b5'></td>
<td id='b6'></td>
<td id='b7'></td>
<td id='b8'></td>
<td id='b9'></td>
<td id='b10'></td>
<td id='b11'></td>
<td id='b12'></td>
<td id='b13'></td>
<td id='b14'></td>
<td id='b15'></td>
</tr>
<tr>
<td id='c1'></td>
<td id='c2'></td>
<td id='c3'></td>
<td id='c4'></td>
<td id='c5'></td>
<td id='c6'></td>
<td id='c7'></td>
<td id='c8'></td>
<td id='c9'></td>
<td id='c10'></td>
<td id='c11'></td>
<td id='c12'></td>
<td id='c13'></td>
<td id='c14'></td>
<td id='c15'></td>
</tr>
<tr>
<td id='d1'></td>
<td id='d2'></td>
<td id='d3'></td>
<td id='d4'></td>
<td id='d5'></td>
<td id='d6'></td>
<td id='d7'></td>
<td id='d8'></td>
<td id='d9'></td>
<td id='d10'></td>
<td id='d11'></td>
<td id='d12'></td>
<td id='d13'></td>
<td id='d14'></td>
<td id='d15'></td>
</tr>
<tr>
<td id='e1'></td>
<td id='e2'></td>
<td id='e3'></td>
<td id='e4'></td>
<td id='e5'></td>
<td id='e6'></td>
<td id='e7'></td>
<td id='e8'></td>
<td id='e9'></td>
<td id='e10'></td>
<td id='e11'></td>
<td id='e12'></td>
<td id='e13'></td>
<td id='e14'></td>
<td id='e15'></td>
</tr>
<tr>
<td id='f1'></td>
<td id='f2'></td>
<td id='f3'></td>
<td id='f4'></td>
<td id='f5'></td>
<td id='f6'></td>
<td id='f7'></td>
<td id='f8'></td>
<td id='f9'></td>
<td id='f10'></td>
<td id='f11'></td>
<td id='f12'></td>
<td id='f13'></td>
<td id='f14'></td>
<td id='f15'></td>
</tr>
Here is a rudimentary solution to your problem, using jQuery: http://jsfiddle.net/ujDsS/9/
$(function() {
$("td").css("cursor","pointer").click(function() {
$("td").css("background","white");
var $i, $j;
var cell = $(this), parentRow = cell.parent(), container = parentRow.parent();
var x = parentRow.children("td").index(cell), y = container.children("tr").index(parentRow);
var myID = cell.attr("id");
for ($i = -1; $i <= 1; $i++) {
if (y-$i < 0) continue;
var row = container.children("tr").eq(y-$i);
if (!row.length) continue;
for ($j = -1; $j <= 1; $j++) {
if (x-$j < 0) continue;
var cell2 = row.children("td").eq(x-$j);
if (!cell2.length) continue;
cell2.css("background","red");
}
}
});
});
What I am doing is pretty simple: on each click, I convert the cell into its x-y coordinates, and then loop through the 8 neighbors + itself and paint them red.
jQuery has an issue (it's a feature, really) where the indices of eq can be negative. Fixing this is left as an exercise - it's as simple as checking if y-$i is negative :-)
This assumes one thing: You will not use colspan or rowspan
Related
I am using google table charts,value where the data is like :
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
So the table value keeps on incrementing, that means, tr and td keeps increasing based on test executions and number of testcases.
So What I like to make a change is if the td value is Pass, the background colour should be green and if its fail, it should be red.
i tried like
var table1 = document.getElementsByClassName('google-visualization-table-td');
var key = table1.value;
for (key in table1) {
if(key != "Pass"){
key.bgColor='#800000';
}
};
But no luck !!
How its possible. Please help.
So as a caveat to doing it via the javascript way, you're already adding a style tag to each cell that will re-eval and paint each independently as you're say for example adding new rows etc that would also involve firing off that method each time.
Another option to consider is a css selector that doesn't need to be refired, and will handle the issue while not adding a new style tag to each cell which becomes something like an added attribute of data-whatever="<value>" vs style="background-color: <colorThatWillBeConvertedToRGBAutomatically>" to each cell.
So just a no js option;
// Nope.
[data-tag=Pass] {
background-color: green;
}
[data-tag=Fail] {
background-color: red;
}
<table>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td" data-tag="TC-206">TC-206</td>
<td class="google-visualization-table-td" data-tag="Customer logs in">Customer logs in</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td" data-tag="TC-207">TC-207</td>
<td class="google-visualization-table-td" data-tag="Customer signs out">Customer signs out</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
</table>
You are not using the right for loop.
Take a look at this documentation (MDN).
Also, using element.value will return the value of the attribute value, not the text content.
The following code should do the trick.
var elements = document.getElementsByClassName('google-visualization-table-td');
for (var i = 0; i < elements.length; i++) {
var value = elements[i].innerText || elements[i].textContent;
if (value === 'Fail') {
elements[i].style.backgroundColor = '#FF0000';
} else if (value === 'Pass') {
elements[i].style.backgroundColor = '#00FF00';
}
}
td {
display: block;
border: solid 1px #CCC;
}
<table>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
</table>
You can add a listener if user can add or remove items in the table or if yourself manage table you can just add this code to your managing functions like adding or removing:-
var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
if(x[i].innerText === 'Pass')
x[i].style.backgroundColor = "green";
else if(x[i].innerText === 'Fail')
x[i].style.backgroundColor = "red";
}
.forEach your HTMLTable.rows
.forEach your HTMLRow.cells
Get each cell content cell.textContent.trim().toLowerCase()
If the content is either pass|fail add a is-[pass|fail] classname
[...document.getElementById("google-visualization").rows].forEach( row =>
[...row.cells].forEach( cell => {
const cont = cell.textContent.trim().toLowerCase();
if (/^(pass|fail)$/.test(cont)) {
cell.classList.add(`is-${cont}`);
}
})
);
.is-pass{background: green;}
.is-fail{background: red;}
<table id="google-visualization">
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
</table>
Clearly the best way would be to assign a class fail or pass at elements creation and style using CSS, instead of using JS loops.
I have a table that uses DataTables. The table consists of 4 columns and has text in some and numbers in some as well. Within the numbers column if there is no number then 'null' is shown in the td. How can I still sort the numbers correctly and give the null value a 0 or some number to help sort better?
Right now when you sort through the list it's not sorting more than one digit. So '10' comes before '3'. Also, do you notice the 1440 comes before 180.
You can view my http://codepen.io/tetonhiker/pen/dOBeqY
$(function() {
$('#dataTable').DataTable({
"paging": false,
"info": false
});
});
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp dataTable">
<thead>
<tr role="row">
<th class="mdl-data-table__cell--non-numeric">Shape Name</th>
<th class="numeric-cell">Number Edges</th>
<th class="numeric-cell">Sum of Interior Angles</th>
<th class="mdl-data-table__cell--non-numeric">Deleted?</th>
</tr>
</thead>
<tbody>
<tr class="rowEditData odd" value="7924" role="row" title="">
<td class="mdl-data-table__cell--non-numeric">Hexagon</td>
<td class="numeric-cell">6</td>
<td class="numeric-cell">null</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData odd deleted" value="7930" role="row" title="">
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="numeric-cell">3</td>
<td class="numeric-cell">180</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData even" value="7931" role="row">
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="numeric-cell">4</td>
<td class="numeric-cell">360</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData odd" value="7932" role="row" title="">
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="numeric-cell">5</td>
<td class="numeric-cell">540</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData even" value="7933" role="row">
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="numeric-cell">6</td>
<td class="numeric-cell">120</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData odd" value="7934" role="row">
<td class="mdl-data-table__cell--non-numeric">null hello</td>
<td class="numeric-cell">10</td>
<td class="numeric-cell">1440</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData even" value="7925" role="row">
<td class="mdl-data-table__cell--non-numeric">Octagon sample</td>
<td class="numeric-cell">8</td>
<td class="numeric-cell">null</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData odd" value="7922" role="row">
<td class="mdl-data-table__cell--non-numeric">pentagon</td>
<td class="numeric-cell">null</td>
<td class="numeric-cell">null</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData even deleted" value="7926" role="row">
<td class="mdl-data-table__cell--non-numeric">Pentagon</td>
<td class="numeric-cell">null</td>
<td class="numeric-cell">null</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData odd" value="7920" role="row">
<td class="mdl-data-table__cell--non-numeric">square-test</td>
<td class="numeric-cell">4</td>
<td class="numeric-cell">null</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
<tr class="rowEditData even" value="7927" role="row">
<td class="mdl-data-table__cell--non-numeric">Square</td>
<td class="numeric-cell">null</td>
<td class="numeric-cell">null</td>
<td class="mdl-data-table__cell--non-numeric">No</td>
</tr>
</tbody>
</table>
Try out this sorting plugin for DataTables: https://datatables.net/plug-ins/sorting/natural
(function() {
/*
* Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license
* Author: Jim Palmer (based on chunking idea from Dave Koelle)
* Contributors: Mike Grier (mgrier.com), Clint Priest, Kyle Adams, guillermo
* See: http://js-naturalsort.googlecode.com/svn/trunk/naturalSort.js
*/
function naturalSort (a, b, html) {
var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?%?$|^0x[0-9a-f]+$|[0-9]+)/gi,
sre = /(^[ ]*|[ ]*$)/g,
dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,
hre = /^0x[0-9a-f]+$/i,
ore = /^0/,
htmre = /(<([^>]+)>)/ig,
// convert all to strings and trim()
x = a.toString().replace(sre, '') || '',
y = b.toString().replace(sre, '') || '';
// remove html from strings if desired
if (!html) {
x = x.replace(htmre, '');
y = y.replace(htmre, '');
}
// chunk/tokenize
var xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
// numeric, hex or date detection
xD = parseInt(x.match(hre), 10) || (xN.length !== 1 && x.match(dre) && Date.parse(x)),
yD = parseInt(y.match(hre), 10) || xD && y.match(dre) && Date.parse(y) || null;
// first try and sort Hex codes or Dates
if (yD) {
if ( xD < yD ) {
return -1;
}
else if ( xD > yD ) {
return 1;
}
}
// natural sorting through split numeric strings and default strings
for(var cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
// find floats not starting with '0', string or 0 if not defined (Clint Priest)
var oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc], 10) || xN[cLoc] || 0;
var oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc], 10) || yN[cLoc] || 0;
// handle numeric vs string comparison - number < string - (Kyle Adams)
if (isNaN(oFxNcL) !== isNaN(oFyNcL)) {
return (isNaN(oFxNcL)) ? 1 : -1;
}
// rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
else if (typeof oFxNcL !== typeof oFyNcL) {
oFxNcL += '';
oFyNcL += '';
}
if (oFxNcL < oFyNcL) {
return -1;
}
if (oFxNcL > oFyNcL) {
return 1;
}
}
return 0;
}
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"natural-asc": function ( a, b ) {
return naturalSort(a,b,true);
},
"natural-desc": function ( a, b ) {
return naturalSort(a,b,true) * -1;
},
"natural-nohtml-asc": function( a, b ) {
return naturalSort(a,b,false);
},
"natural-nohtml-desc": function( a, b ) {
return naturalSort(a,b,false) * -1;
},
"natural-ci-asc": function( a, b ) {
a = a.toString().toLowerCase();
b = b.toString().toLowerCase();
return naturalSort(a,b,true);
},
"natural-ci-desc": function( a, b ) {
a = a.toString().toLowerCase();
b = b.toString().toLowerCase();
return naturalSort(a,b,true) * -1;
}
} );
}());
You have the class "non-numeric" in each row, which tells this weird plugin not to sort those columns as numbers. Remove that string.
I have one object array with time intervals , Number 0 indicates sunday . In my time scheduling page selecting different time ranges in a particular day . I want to group the time values . My initial array is given below
time schedule selection looks like
Each cell has data-day and data-time attribute and selected cell with data-selected attribute
i am iterate through the selected time and got the result like
var selectedIntervals = {};
$('td[data-selected]').each(function() {
var a = $(this).attr('data-day');
var b = $(this).attr('data-time');
if(!selectedIntervals[a]) {
selectedIntervals[a]=[];
}
selectedIntervals[a].push(b);
});
I want the output like
{
0: [["00:00", "05:00"],["08:00", "11:00"]]
}
Please help .
Try this:
arr = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "08:00", "09:00", "10:00", "11:00"];
output = [];
start = arr[0];
for(i=1; i<arr.length; i++) {
if(i == arr.length-1) {
output.push([start, arr[i]]);
break;
}
if(parseInt(arr[i]) - parseInt(arr[i-1]) > 1) {
output.push([start, arr[i-1]]);
start = arr[i];
}
}
Here is a function to make intervals from an array of hour strings.
function makeInterval(arr) {
//e.g. arr = ["00:00", "01:00", "02:00", "03:00", "06:00", "10:00", "11:00"]
//returns [["00:00", "03:00"], ["06:00", "06:00"], ["10:00", "11:00"]]
var interval, result = [];
for (var i = 0; i < arr.length; i++) {
var hour = parseInt(arr[i]);
if (!interval || (hour != parseInt(interval[1]) + 1)) { //if first time or the hour jumps
interval = [arr[i], arr[i]]; //create new interval
result.push(interval);
}
else {
interval[1] = arr[i]; //update the end of interval
}
}
return result;
}
you can call it like
makeInterval(selectedIntervals[0]);
do a loop over the day number if necessary.
mid = a.length
mid=parseInt(a.length / 2)
b=[[a[0],a[mid]],[a[mid+1],a[a.length-1]]]
console.info(b)
Combining your initial code with elfan's code You get this:
$(function() {
var list = {};
var day = 0;
list[day] = selectedSchedules(day);
day = 1;
list[day] = selectedSchedules(day);
console.log(list);
function selectedSchedules(day) {
var schedules = [];
var interval, hour;
$('td[data-selected][data-day=' + day + ']').each(function() {
var b = $(this).data('time');
var current = parseInt(b);
if (!interval || (current != parseInt(interval[1]) + 1)) {
interval = [b, b];
schedules.push(interval);
} else {
interval[1] = b;
}
});
return schedules;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-day="0" data-time="00:00" data-selected="true">00:00</td>
<td data-day="1" data-time="00:00" data-selected="true">00:00</td>
</tr>
<tr>
<td data-day="0" data-time="01:00" data-selected="true">01:00</td>
<td data-day="1" data-time="01:00" data-selected="true">01:00</td>
</tr>
<tr>
<td data-day="0" data-time="02:00" data-selected="true">02:00</td>
<td data-day="1" data-time="02:00" data-selected="true">02:00</td>
</tr>
<tr>
<td data-day="0" data-time="03:00" data-selected="true">03:00</td>
<td data-day="1" data-time="03:00" data-selected="true">03:00</td>
</tr>
<tr>
<td data-day="0" data-time="04:00" data-selected="true">04:00</td>
<td data-day="1" data-time="04:00" data-selected="true">04:00</td>
</tr>
<tr>
<td data-day="0" data-time="05:00" data-selected="true">05:00</td>
<td data-day="1" data-time="05:00" data-selected="true">05:00</td>
</tr>
<tr>
<td data-day="0" data-time="06:00">06:00</td>
<td data-day="1" data-time="06:00">06:00</td>
</tr>
<tr>
<td data-day="0" data-time="07:00">07:00</td>
<td data-day="1" data-time="07:00">07:00</td>
</tr>
<tr>
<td data-day="0" data-time="08:00" data-selected="true">08:00</td>
<td data-day="1" data-time="08:00">08:00</td>
</tr>
<tr>
<td data-day="0" data-time="09:00" data-selected="true">09:00</td>
<td data-day="1" data-time="09:00" data-selected="true">09:00</td>
</tr>
<tr>
<td data-day="0" data-time="10:00" data-selected="true">10:00</td>
<td data-day="1" data-time="10:00" data-selected="true">10:00</td>
</tr>
<tr>
<td data-day="0" data-time="11:00" data-selected="true">11:00</td>
<td data-day="1" data-time="11:00" data-selected="true">11:00</td>
</tr>
<tr>
<td data-day="0" data-time="12:00">12:00</td>
<td data-day="1" data-time="12:00" data-selected="true">12:00</td>
</tr>
<tr>
<td data-day="0" data-time="13:00">13:00</td>
<td data-day="1" data-time="13:00">13:00</td>
</tr>
<tr>
<td data-day="0" data-time="14:00">14:00</td>
<td data-day="1" data-time="14:00">14:00</td>
</tr>
<tr>
<td data-day="0" data-time="15:00">15:00</td>
<td data-day="1" data-time="15:00">15:00</td>
</tr>
<tr>
<td data-day="0" data-time="16:00">16:00</td>
<td data-day="1" data-time="16:00">16:00</td>
</tr>
<tr>
<td data-day="0" data-time="17:00">17:00</td>
<td data-day="1" data-time="17:00">17:00</td>
</tr>
<tr>
<td data-day="0" data-time="18:00">18:00</td>
<td data-day="1" data-time="18:00">18:00</td>
</tr>
<tr>
<td data-day="0" data-time="19:00">19:00</td>
<td data-day="1" data-time="19:00">19:00</td>
</tr>
<tr>
<td data-day="0" data-time="20:00">20:00</td>
<td data-day="1" data-time="20:00" data-selected="true">20:00</td>
</tr>
<tr>
<td data-day="0" data-time="21:00">21:00</td>
<td data-day="1" data-time="21:00" data-selected="true">21:00</td>
</tr>
<tr>
<td data-day="0" data-time="22:00">22:00</td>
<td data-day="1" data-time="22:00" data-selected="true">22:00</td>
</tr>
<tr>
<td data-day="0" data-time="23:00">23:00</td>
<td data-day="1" data-time="23:00" data-selected="true">23:00</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
var week = 5;
var players = 8;
var numbers = [];
var array = [];
for (o = 0; o < players; o++) {
for (i = 0; i < week + 1; i++) {
var improved = i + 1;
var oString = o.toString();
var iString = i.toString();
var id = "#" + oString + iString;
var rawText = $(id).text();
var refined = Number(rawText);
array.push(refined);
}
numbers.push(array);
array = [];
}
for (p = 0; i < numbers.length; p++) {
var total1 = 0;
$.each(numbers[0], function() {
total1 += this;
});
}
$("#total1").text(total1);
for (p = 0; i < numbers.length; p++) {
var total2 = 0;
$.each(numbers[0], function() {
total2 += this;
});
}
$("#total2").text(total2);
for (p = 0; i < numbers.length; p++) {
var total3 = 0;
$.each(numbers[0], function() {
total3 += this;
});
}
$("#total3").text(total3);
for (p = 0; i < numbers.length; p++) {
var total4 = 0;
$.each(numbers[0], function() {
total4 += this;
});
}
$("#total4").text(total4);
for (p = 0; i < numbers.length; p++) {
var total5 = 0;
$.each(numbers[0], function() {
total5 += this;
});
}
$("#total5").text(total5);
var total = total1 + total2 + total3 + total4 + total5;
$("#total").text(total);
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="style2.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>
<body>
<table>
<tr>
<th>Player</th>
<th>Position</th>
<th>Week 7</th>
<th>Week 8</th>
<th>Week 9</th>
<th>Week 10</th>
<th>Week 11</th>
</tr>
<tr>
<td>Matt Ryan</td>
<td>QB</td>
<td id="01">11</td>
<td id="02">15</td>
<td id="03">00</td>
<td id="04">14</td>
<td id="05">14</td>
</tr>
<tr>
<td>Marshawn Lynch</td>
<td>RB</td>
<td id="11">06</td>
<td id="12">01</td>
<td id="13">09</td>
<td id="14">40</td>
<td id="15">12</td>
</tr>
<tr>
<td>Calvin Johsnon</td>
<td>WR</td>
<td id="21">00</td>
<td id="22">00</td>
<td id="23">00</td>
<td id="24">00</td>
<td id="25">00</td>
</tr>
<tr>
<td>Allen Hurns</td>
<td>WR</td>
<td id="31">00</td>
<td id="32">04</td>
<td id="33">23</td>
<td id="34">17</td>
<td id="35">05</td>
</tr>
<tr>
<td>A.J. Green</td>
<td>WR</td>
<td id="41">00</td>
<td id="42">00</td>
<td id="43">10</td>
<td id="44">02</td>
<td id="45">18</td>
</tr>
<tr>
<td>Julius Thomas</td>
<td>Tight End</td>
<td id="51">02</td>
<td id="52">02</td>
<td id="53">09</td>
<td id="54">18</td>
<td id="55">00</td>
</tr>
<tr>
<td>Matt Bryant</td>
<td>Kicker</td>
<td id="61">00</td>
<td id="62">03</td>
<td id="63">00</td>
<td id="64">15</td>
<td id="65">15</td>
</tr>
<tr>
<td>Texans</td>
<td>Defense</td>
<td id="71">04</td>
<td id="72">07</td>
<td id="73">12</td>
<td id="74">00</td>
<td id="75">08</td>
</tr>
<tr>
<td>Total:</td>
<td></td>
<td id="total1">00</td>
<td id="total2">00</td>
<td id="total3">00</td>
<td id="total4">00</td>
<td id="total5">00</td>
</tr>
</table>
<p>Total: <span id="totalAll"></span>
</p>
</body>
</html>
Recently, I was charged with creating a fantasy football website for my group of friends, having minimal Javascript and HTML experience. I don't mind manually inputing data from the NFL website, but I thought it would be cool to have a script to automatically add up the numbers in the table. But, the code I wrote doesn't work. Nobody I know has any knowledge in Computer Science, and Ive turned to Google throughout the whole process. The browser console returns no errors. What I expect to happen is the total points from all of my tds for each week go into the week total at the bottom, and then the week totals be added up into the final total. What really happens is nothing. Half the time, when I change something, the page crashes.
I cant seem to get a JSfiddle to run without crashing on run-time, so im putting it into pastebin
http://pastebin.com/Wb3ENMZY
All the for loops at the end are temporary, to be taken down when the first part works.
Not too sure why your code wouldn't work in JSFiddle
Here's a fiddle with a work example of what you were trying to accomplish Demo
HTML
<table>
<thead>
<tr>
<th>Player</th>
<th>Position</th>
<th>Week 7</th>
<th>Week 8</th>
<th>Week 9</th>
<th>Week 10</th>
<th>Week 11</th>
</tr>
<thead>
<tbody>
<tr>
<td>Matt Ryan</td>
<td>QB</td>
<td id="01">11</td>
<td id="02">15</td>
<td id="03">00</td>
<td id="04">14</td>
<td id="05">14</td>
</tr>
<tr>
<td>Marshawn Lynch</td>
<td>RB</td>
<td id="11">06</td>
<td id="12">01</td>
<td id="13">09</td>
<td id="14">40</td>
<td id="15">12</td>
</tr>
<tr>
<td>Calvin Johsnon</td>
<td>WR</td>
<td id="21">00</td>
<td id="22">00</td>
<td id="23">00</td>
<td id="24">00</td>
<td id="25">00</td>
</tr>
<tr>
<td>Allen Hurns</td>
<td>WR</td>
<td id="31">00</td>
<td id="32">04</td>
<td id="33">23</td>
<td id="34">17</td>
<td id="35">05</td>
</tr>
<tr>
<td>A.J. Green</td>
<td>WR</td>
<td id="41">00</td>
<td id="42">00</td>
<td id="43">10</td>
<td id="44">02</td>
<td id="45">18</td>
</tr>
<tr>
<td>Julius Thomas</td>
<td>Tight End</td>
<td id="51">02</td>
<td id="52">02</td>
<td id="53">09</td>
<td id="54">18</td>
<td id="55">00</td>
</tr>
<tr>
<td>Matt Bryant</td>
<td>Kicker</td>
<td id="61">00</td>
<td id="62">03</td>
<td id="63">00</td>
<td id="64">15</td>
<td id="65">15</td>
</tr>
<tr>
<td>Texans</td>
<td>Defense</td>
<td id="71">04</td>
<td id="72">07</td>
<td id="73">12</td>
<td id="74">00</td>
<td id="75">08</td>
</tr>
<tr>
<td>Total:</td>
<td></td>
<td id="total1">00</td>
<td id="total2">00</td>
<td id="total3">00</td>
<td id="total4">00</td>
<td id="total5">00</td>
</tr>
</tbody>
</table>
<p>Total: <span id="totalAll"></span>
</p>
Note the addition of the <thead> and the <tbody> this is so we can easily select the body rows in JQuery
Code
//Make a list of values for each column
var sums = [0,0,0,0,0];
//Go through each row in the body of the table
$("tbody tr").each(function () {
//We start at 2 because thats the firs of the weeks columns
for(var i = 2; i <= 6; i++)
{
//Add the current column's value to the sum. Note we use :eq() selector to get the i'th column
sums[i-2] += parseInt($("td:eq("+i+")", this).html());
}
});
var total = 0;
//Go through each column sum totalling it and writing it to the appropriate column
for(var i = 0; i < sums.length; i++)
{
total += sums[i];
$("#total" + (i + 1)).html(sums[i]);
}
//Write the total
$("#totalAll").html(total);
From your original code
for (p = 0; i < numbers.length; p++) {
var total1 = 0;
$.each(numbers[0], function() {
total1 += this;
});
}
This was causing Javascript to loop forever. Your for loop will loop until i < numbers.length but i isn't defined here. You probably mean p there. After replacing the i with p it no longer looped forever but each column would have the same value, numbers[0] should be changed for each column you're parsing.
I'm still having issues with your original code even after fixing those errors though.
I dont know if it is possible to do but i this is my code.
function start(blauw){
document.getElementById(blauw).style.background="white";
}
<table>
<tr>
<td id= niks></td>
<td id= niks></td>
<td id= blauw onclick="start(id)">1</td>
<td id= blauw onclick="start(id)">2</td>
<td id= blauw>3</td>
<td id= blauw>4</td>
<td id= blauw>5</td>
<td id= blauw>6</td>
<td id= blauw>7</td>
<td id= blauw>8</td>
<td id= niks></td>
<td id= niks></td>
</tr>
</table>
i want to achieve that if i click on it the background will turn into white so people now what they are booking. but do i have to give everything an own ID? because right now if i click on "2" only "1" turns white and "2" won't turn white.
(excuse me for my bad english)
Instead of passing attributes just pass the element itselfe:
function start(element) {
element.style.background = "green";
}
<table>
<tr>
<td class=niks></td>
<td class=niks></td>
<td class=blauw onclick="start(this)">1</td>
<td class=blauw onclick="start(this)">2</td>
<td class=blauw>3</td>
<td class=blauw>4</td>
<td class=blauw>5</td>
<td class=blauw>6</td>
<td class=blauw>7</td>
<td class=blauw>8</td>
<td class=niks></td>
<td class=niks></td>
</tr>
</table>
And as mentioned in the comments - ID`s had to be unique!!
EDIT:
Altered function to switch the background color.
function start(element) {
var backgroundColor = element.style.background;
if (backgroundColor === "green") {
element.style.background = "red";
} else {
element.style.background = "green";
}
}
So this is a very simple demo
See FIDDLE