I need help populating my table with JSON array based on last and previous result in Bigroad Scoreboard format.
[{"result":"M","no":"1"},{"result":"M","no":"2"},{"result":"M","no":"3"},{"result":"D","no":"4"},{"result":"M","no":"5"},{"result":"M","no":"6"},{"result":"M","no":"7"},{"result":"W","no":"8"},{"result":"W","no":"9"},{"result":"M","no":"10"},{"result":"D","no":"11"},{"result":"M","no":"12"},{"result":"W","no":"13"},{"result":"M","no":"14"}]
ive tried counless times to no avail i keep getting stuck at the comparison with last and previous objects of the json array.
im using this to populate another table i tried approaches similar to this
function history() {
$.getJSON('/history.php', function(data) {
$.historyText = '';
$.each(data, function(i) {
$.winner = data[i].result;
$.no = data[i].no;
$.historyText = '<div class="history ' + $.winner + '" >' + $.no + '</div>';
$(".cols-" + i).html($.historyText);
});
});
}
I need it to output like this.
any suggestions would be greatly apreciated.
table {border-collapse:collapse;border-spacing:0;}
table td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
<table>
<tr>
<td class="cols-0">1m</td>
<td class="cols-5">8w</td>
<td class="cols-10">10m</td>
<td class="cols-15">13w</td>
<td class="cols-20">14m</td>
<td class="cols-25"></td>
<td class="cols-30"></td>
<td class="cols-35"></td>
<td class="cols-40"></td>
<td class="cols-45"></td>
</tr>
<tr>
<td class="cols-1">2m</td>
<td class="cols-6">9w</td>
<td class="cols-11">11d</td>
<td class="cols-16"></td>
<td class="cols-21"></td>
<td class="cols-26"></td>
<td class="cols-31"></td>
<td class="cols-36"></td>
<td class="cols-41"></td>
<td class="cols-46"></td>
</tr>
<tr>
<td class="cols-2">3m</td>
<td class="cols-7"></td>
<td class="cols-12">12m</td>
<td class="cols-17"></td>
<td class="cols-22"></td>
<td class="cols-27"></td>
<td class="cols-32"></td>
<td class="cols-37"></td>
<td class="cols-42"></td>
<td class="cols-47"></td>
</tr>
<tr>
<td class="cols-3">4d</td>
<td class="cols-8"></td>
<td class="cols-13"></td>
<td class="cols-18"></td>
<td class="cols-23"></td>
<td class="cols-28"></td>
<td class="cols-33"></td>
<td class="cols-38"></td>
<td class="cols-43"></td>
<td class="cols-48"></td>
</tr>
<tr>
<td class="cols-4">5m</td>
<td class="cols-9">6m</td>
<td class="cols-14">7m</td>
<td class="cols-19"></td>
<td class="cols-24"></td>
<td class="cols-29"></td>
<td class="cols-34"></td>
<td class="cols-39"></td>
<td class="cols-44"></td>
<td class="cols-49"></td>
</tr>
</table>
Related
Only started using javascript 2 weeks ago so I only have a limited understanding.
I have some javascript code that generates a html table from excel documents and i need to extract the values from part of one column and place those values into an array. Which i later will use to generate a line graph. The code mainly needs to work on IE11.
Truncated example table below.
<tbody>
// several other rows here
<tr>
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
//several more empty rows here
</tbody>
I need the value of all cells with ids in the E(xx) but only id sjs-E17 and greater (sjs-Exx where xx >= 17), so value 1E-3E+ but no cell above that one (so not sjs-E16 to sjs-E1).
The number of rows i varies but the needed values always start on row 17. And as seen the scrip generates several empty rows after the values stop, but none of them have any id.
Expected results is just an array (or function) containing the values from cell E17+
var test_array = ["1E", "2E", "3E", ...];
Using jQuery, you can do this:
var td = $('[id^="sjs-E"]'),
valArray = [];
td.each(function() {
var id = $(this).attr('id'),
idVal = +id.substring(5); //parse value after `E` to number using (+)
//check if idVal is number
if (!isNaN(idVal)) {
if (idVal >= 17) {
valArray.push($(this).html());
}
}
});
console.log(valArray);
.header {
background-color: grey;
font-size: 15px;
}
td {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<!-- several empty rows -->
</tbody>
</table>
Or, using vanilla javascript:
var tdRE = /^sjs-E([2-9]\d|1[7-9]|[1-9]{3,})$/,
els = document.getElementsByTagName('*'),
valArray = [];
for (var i = 0; i < els.length; i++) {
var match = tdRE.exec(els[i].id);
if (match) {
if ((+match[1]) >= 17) { //the (+) operator again, convert string to number and check if >= 17
valArray.push(els[i].innerHTML);
}
}
}
console.log(valArray);
.header {
background-color: grey;
font-size: 15px;
}
td {
text-align: center;
}
<table>
<tbody>
<tr class="header">
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<!-- several empty rows -->
</tbody>
</table>
Regex explanation:
^sjs-E([2-9]\d|[1-9][7-9]|\d{3,})$
^ - asserts beginning of string
() - catching group
| - logical OR
$ - end of string
^sjs-E - starts with sjs-E
[2-9]\d - matches between 20 - 99
OR
1[7-9] - matches 17 - 19
OR
[1-9]{3,} - matches 100 and above
let result = [];
$('table tr td[id^="sjs-E"]').each(function(){
let ele = $(this);
//extracting last two digits of id
let digits = ele.attr('id').slice(-2);
if(!isNaN(digits) && digits >= 17){
result.push(ele.html());
}
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
</tbody>
</table>
var test_array = [];
var isGreaterThan = 17;
var until = 1000; // i don't know
for (var i=isGreaterThan; i < until; i++) {
var html = document.getElementById('sjs-E' + i.toString());
if (html) {
test_array.push(html.innerText);
}
}
I want get length <td> between two selector .bg-primary and booked:first-child, what do i do?
I am trying as following code but it doesn't work: (i want result as:"num:5")
var term3 = document.getElementsByClassName( "booked" );
var vrtid = $( ".bg-primary" ).nextUntil( term3, "td" ).length;
alert('num:'+vrtid);
.booked {
color: rgb(255, 250, 81) !important;
background-color: #009975 !important;
}
.bg-primary {
color: #fff !important;
background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-name="disabled-day">29</td>
<td data-name="disabled-day">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
<td data-name="disabled-day">04</td>
<td data-name="disabled-day" class="text-danger">05</td>
</tr>
<tr>
<td data-name="disabled-day">06</td>
<td data-name="disabled-day">07</td>
<td data-name="disabled-day">08</td>
<td data-name="disabled-day">09</td>
<td data-name="disabled-day">10</td>
<td data-name="disabled-day">11</td>
<td data-name="disabled-day" class="text-danger">12</td>
</tr>
<tr>
<td data-name="disabled-day">13</td>
<td data-name="disabled-day">14</td>
<td data-name="disabled-day">15</td>
<td data-name="disabled-day">16</td>
<td data-name="disabled-day">17</td>
<td data-name="disabled-day">18</td>
<td data-name="disabled-day" class="text-danger">19</td>
</tr>
<tr>
<td data-name="disabled-day">20</td>
<td data-name="disabled-day">21</td>
<td data-name="disabled-day">22</td>
<td data-name="disabled-day">23</td>
<td data-name="today" class="bg-primary">24</td>
<td data-name="day">25</td>
<td data-name="day" class="text-danger">26</td>
</tr>
<tr>
<td data-name="day">27</td>
<td data-name="day">28</td>
<td data-name="disabled-day" class="booked">29</td>
<td data-name="disabled-day" class="booked">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
</tr>
</tbody>
</table>
You could subtract indices:
var vrtid = $('.booked:first').index('td') - $('.bg-primary').index('td');
alert('num:'+vrtid);
.booked {
color: rgb(255, 250, 81) !important;
background-color: #009975 !important;
}
.bg-primary {
color: #fff !important;
background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-name="disabled-day">29</td>
<td data-name="disabled-day">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
<td data-name="disabled-day">04</td>
<td data-name="disabled-day" class="text-danger">05</td>
</tr>
<tr>
<td data-name="disabled-day">06</td>
<td data-name="disabled-day">07</td>
<td data-name="disabled-day">08</td>
<td data-name="disabled-day">09</td>
<td data-name="disabled-day">10</td>
<td data-name="disabled-day">11</td>
<td data-name="disabled-day" class="text-danger">12</td>
</tr>
<tr>
<td data-name="disabled-day">13</td>
<td data-name="disabled-day">14</td>
<td data-name="disabled-day">15</td>
<td data-name="disabled-day">16</td>
<td data-name="disabled-day">17</td>
<td data-name="disabled-day">18</td>
<td data-name="disabled-day" class="text-danger">19</td>
</tr>
<tr>
<td data-name="disabled-day">20</td>
<td data-name="disabled-day">21</td>
<td data-name="disabled-day">22</td>
<td data-name="disabled-day">23</td>
<td data-name="today" class="bg-primary">24</td>
<td data-name="day">25</td>
<td data-name="day" class="text-danger">26</td>
</tr>
<tr>
<td data-name="day">27</td>
<td data-name="day">28</td>
<td data-name="disabled-day" class="booked">29</td>
<td data-name="disabled-day" class="booked">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
</tr>
</tbody>
</table>
I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive.
For example:
<my-custom-directive my-label="Lärm" />
Another example is the ui.bootstrap.tabs directive:
<tabset>
<tab heading="Lärm"> content ... </tab>
<tab heading="Second Heading"> content ... </tab>
</tabset>
This results in a tab with heading "L�rm". Any ideas?
Usually in a good editor you can change the document encoding type, the document is saved in. try to set it to iso-8859-1/utf-8 and save/upload again.
Next bet would be to change the encoding of the html-output with
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Umlauts often is trial & error...
Use escape characters for javascript.
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody><tr>
<th>Display</th>
<th>Friendly Code</th>
<th>Numerical Code</th>
<th>Description</th>
</tr>
<tr class="grey">
<td class="codes">Ä </td>
<td class="codes">Ä</td>
<td class="codes">Ä</td>
<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
<td class="codes">ä </td>
<td class="codes">ä</td>
<td class="codes">ä</td>
<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
<td>É</td>
<td>É</td>
<td>É</td>
<td>Capital E-acute</td>
</tr>
<tr>
<td>é</td>
<td>é</td>
<td>é</td>
<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
<td class="codes">Ö </td>
<td class="codes">Ö</td>
<td class="codes">Ö</td>
<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
<td class="codes">ö </td>
<td class="codes">ö</td>
<td class="codes">ö</td>
<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">Ü </td>
<td class="codes">Ü</td>
<td class="codes">Ü</td>
<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
<td class="codes">ü </td>
<td class="codes">ü</td>
<td class="codes">ü</td>
<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">ß</td>
<td class="codes">ß</td>
<td class="codes">ß</td>
<td class="codes">SZ ligature</td>
</tr>
<tr>
<td class="codes">«</td>
<td class="codes">«</td>
<td class="codes">«</td>
<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
<td class="codes">»</td>
<td class="codes">»</td>
<td class="codes">»</td>
<td class="codes">Right angle quotes</td>
</tr>
<tr>
<td class="codes">„</td>
<td class="codes"> </td>
<td class="codes">„</td>
<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
<td class="codes">“</td>
<td class="codes"> </td>
<td class="codes">“</td>
<td class="codes">Left quotes</td>
</tr>
<tr>
<td class="codes">”</td>
<td class="codes"> </td>
<td class="codes">”</td>
<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
<td class="codes">°</td>
<td class="codes"> </td>
<td class="codes">°</td>
<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
<td class="codes">€</td>
<td class="codes">€</td>
<td class="codes">€</td>
<td class="codes">Euro</td>
</tr>
<tr class="grey">
<td>£</td>
<td>£</td>
<td>£</td>
<td>Pound Sterling</td>
</tr>
</tbody></table>
here is a color chart.i am willing to click on any one of them and using css scale property make it larger for better view.then click on it again to select the desired color.i had no idea about it.so i tried to make a code .but it is not working as i expeted.in fact it is not working at all.how can i do that?
HERE IS THE CODE:
<html>
<head>
<style>
#colorchart {
position: fixed;
width:250px;
height:250px;
padding:0px;
margin:0px;
left:0px;
top:350px;
}
</style>
</head>
<body>
<script>
var table = document.getElementById('colorchart');
table.addEventListener ('click', function (event) {
var target = event.target||event.srcElement;
if (target.tagName == 'TD') {
target.style.transform=scale(5, 5);
target.addEventListener ("click", function(event) {
var newTarget=event.target;
if (newTarget.tagName=='TD') {
alert(newTarget.bgColor);
}
}, false);
}
}, false);
</script>
<table id="colorchart" >
<tr>
<td bgColor="#FBEFEF"></td>
<td bgColor="#FBF2EF"></td>
<td bgColor="#FBF5EF"></td>
<td bgColor="#FBF8EF"></td>
<td bgColor="#FBFBEF"></td>
<td bgColor="#F8FBEF"></td>
<td bgColor="#F5FBEF"></td>
<td bgColor="#F2FBEF"></td>
<td bgColor="#EFFBEF"></td>
<td bgColor="#EFFBF2"></td>
<td bgColor="#EFFBF5"></td>
<td bgColor="#EFFBF8"></td>
<td bgColor="#EFFBFB"></td>
<td bgColor="#EFF8FB"></td>
<td bgColor="#EFF5FB"></td>
<td bgColor="#EFF2FB"></td>
<td bgColor="#EFEFFB"></td>
<td bgColor="#F2EFFB"></td>
<td bgColor="#F5EFFB"></td>
<td bgColor="#F8EFFB"></td>
<td bgColor="#FBEFFB"></td>
<td bgColor="#FBEFF8"></td>
<td bgColor="#FBEFF5"></td>
<td bgColor="#FBEFF2"></td>
<td bgColor="#FFFFFF"></td>
</tr>
<tr>
<td bgColor="#F8E0E0"></td>
<td bgColor="#F8E6E0"></td>
<td bgColor="#F8ECE0"></td>
<td bgColor="#F7F2E0"></td>
<td bgColor="#F7F8E0"></td>
<td bgColor="#F1F8E0"></td>
<td bgColor="#ECF8E0"></td>
<td bgColor="#E6F8E0"></td>
<td bgColor="#E0F8E0"></td>
<td bgColor="#E0F8E6"></td>
<td bgColor="#E0F8EC"></td>
<td bgColor="#E0F8F1"></td>
<td bgColor="#E0F8F7"></td>
<td bgColor="#E0F2F7"></td>
<td bgColor="#E0ECF8"></td>
<td bgColor="#E0E6F8"></td>
<td bgColor="#E0E0F8"></td>
<td bgColor="#E6E0F8"></td>
<td bgColor="#ECE0F8"></td>
<td bgColor="#F2E0F7"></td>
<td bgColor="#F8E0F7"></td>
<td bgColor="#F8E0F1"></td>
<td bgColor="#F8E0EC"></td>
<td bgColor="#F8E0E6"></td>
<td bgColor="#FAFAFA"></td>
</tr>
<tr>
<td bgColor="#F6CECE"></td>
<td bgColor="#F6D8CE"></td>
<td bgColor="#F6E3CE"></td>
<td bgColor="#F5ECCE"></td>
<td bgColor="#F5F6CE"></td>
<td bgColor="#ECF6CE"></td>
<td bgColor="#E3F6CE"></td>
<td bgColor="#D8F6CE"></td>
<td bgColor="#CEF6CE"></td>
<td bgColor="#CEF6D8"></td>
<td bgColor="#CEF6E3"></td>
<td bgColor="#CEF6EC"></td>
<td bgColor="#CEF6F5"></td>
<td bgColor="#CEECF5"></td>
<td bgColor="#CEE3F6"></td>
<td bgColor="#CED8F6"></td>
<td bgColor="#CECEF6"></td>
<td bgColor="#D8CEF6"></td>
<td bgColor="#E3CEF6"></td>
<td bgColor="#ECCEF5"></td>
<td bgColor="#F6CEF5"></td>
<td bgColor="#F6CEEC"></td>
<td bgColor="#F6CEE3"></td>
<td bgColor="#F6CED8"></td>
<td bgColor="#F2F2F2"></td>
</tr>
<tr>
<td bgColor="#F5A9A9"></td>
<td bgColor="#F5BCA9"></td>
<td bgColor="#F5D0A9"></td>
<td bgColor="#F3E2A9"></td>
<td bgColor="#F2F5A9"></td>
<td bgColor="#E1F5A9"></td>
<td bgColor="#D0F5A9"></td>
<td bgColor="#BCF5A9"></td>
<td bgColor="#A9F5A9"></td>
<td bgColor="#A9F5BC"></td>
<td bgColor="#A9F5D0"></td>
<td bgColor="#A9F5E1"></td>
<td bgColor="#A9F5F2"></td>
<td bgColor="#A9E2F3"></td>
<td bgColor="#A9D0F5"></td>
<td bgColor="#A9BCF5"></td>
<td bgColor="#A9A9F5"></td>
<td bgColor="#BCA9F5"></td>
<td bgColor="#D0A9F5"></td>
<td bgColor="#E2A9F3"></td>
<td bgColor="#F5A9F2"></td>
<td bgColor="#F5A9E1"></td>
<td bgColor="#F5A9D0"></td>
<td bgColor="#F5A9BC"></td>
<td bgColor="#E6E6E6"></td>
</tr>
<tr>
<td bgColor="#F78181"></td>
<td bgColor="#F79F81"></td>
<td bgColor="#F7BE81"></td>
<td bgColor="#F5DA81"></td>
<td bgColor="#F3F781"></td>
<td bgColor="#D8F781"></td>
<td bgColor="#BEF781"></td>
<td bgColor="#9FF781"></td>
<td bgColor="#81F781"></td>
<td bgColor="#81F79F"></td>
<td bgColor="#81F7BE"></td>
<td bgColor="#81F7D8"></td>
<td bgColor="#81F7F3"></td>
<td bgColor="#81DAF5"></td>
<td bgColor="#81BEF7"></td>
<td bgColor="#819FF7"></td>
<td bgColor="#8181F7"></td>
<td bgColor="#9F81F7"></td>
<td bgColor="#BE81F7"></td>
<td bgColor="#DA81F5"></td>
<td bgColor="#F781F3"></td>
<td bgColor="#F781D8"></td>
<td bgColor="#F781BE"></td>
<td bgColor="#F7819F"></td>
<td bgColor="#D8D8D8"></td>
</tr>
<tr>
<td bgColor="#FA5858"></td>
<td bgColor="#FA8258"></td>
<td bgColor="#FAAC58"></td>
<td bgColor="#F7D358"></td>
<td bgColor="#F4FA58"></td>
<td bgColor="#D0FA58"></td>
<td bgColor="#ACFA58"></td>
<td bgColor="#82FA58"></td>
<td bgColor="#58FA58"></td>
<td bgColor="#58FA82"></td>
<td bgColor="#58FAAC"></td>
<td bgColor="#58FAD0"></td>
<td bgColor="#58FAF4"></td>
<td bgColor="#58D3F7"></td>
<td bgColor="#58ACFA"></td>
<td bgColor="#5882FA"></td>
<td bgColor="#5858FA"></td>
<td bgColor="#8258FA"></td>
<td bgColor="#AC58FA"></td>
<td bgColor="#D358F7"></td>
<td bgColor="#FA58F4"></td>
<td bgColor="#FA58D0"></td>
<td bgColor="#FA58AC"></td>
<td bgColor="#FA5882"></td>
<td bgColor="#BDBDBD"></td>
</tr>
<tr>
<td bgColor="#FE2E2E"></td>
<td bgColor="#FE642E"></td>
<td bgColor="#FE9A2E"></td>
<td bgColor="#FACC2E"></td>
<td bgColor="#F7FE2E"></td>
<td bgColor="#C8FE2E"></td>
<td bgColor="#9AFE2E"></td>
<td bgColor="#64FE2E"></td>
<td bgColor="#2EFE2E"></td>
<td bgColor="#2EFE64"></td>
<td bgColor="#2EFE9A"></td>
<td bgColor="#2EFEC8"></td>
<td bgColor="#2EFEF7"></td>
<td bgColor="#2ECCFA"></td>
<td bgColor="#2E9AFE"></td>
<td bgColor="#2E64FE"></td>
<td bgColor="#2E2EFE"></td>
<td bgColor="#642EFE"></td>
<td bgColor="#9A2EFE"></td>
<td bgColor="#CC2EFA"></td>
<td bgColor="#FE2EF7"></td>
<td bgColor="#FE2EC8"></td>
<td bgColor="#FE2E9A"></td>
<td bgColor="#FE2E64"></td>
<td bgColor="#A4A4A4"></td>
</tr>
<tr>
<td bgColor="#FF0000"></td>
<td bgColor="#FF4000"></td>
<td bgColor="#FF8000"></td>
<td bgColor="#FFBF00"></td>
<td bgColor="#FFFF00"></td>
<td bgColor="#BFFF00"></td>
<td bgColor="#80FF00"></td>
<td bgColor="#40FF00"></td>
<td bgColor="#00FF00"></td>
<td bgColor="#00FF40"></td>
<td bgColor="#00FF80"></td>
<td bgColor="#00FFBF"></td>
<td bgColor="#00FFFF"></td>
<td bgColor="#00BFFF"></td>
<td bgColor="#0080FF"></td>
<td bgColor="#0040FF"></td>
<td bgColor="#0000FF"></td>
<td bgColor="#4000FF"></td>
<td bgColor="#8000FF"></td>
<td bgColor="#BF00FF"></td>
<td bgColor="#FF00FF"></td>
<td bgColor="#FF00BF"></td>
<td bgColor="#FF0080"></td>
<td bgColor="#FF0040"></td>
<td bgColor="#848484"></td>
</tr>
<tr>
<td bgColor="#DF0101"></td>
<td bgColor="#DF3A01"></td>
<td bgColor="#DF7401"></td>
<td bgColor="#DBA901"></td>
<td bgColor="#D7DF01"></td>
<td bgColor="#A5DF00"></td>
<td bgColor="#74DF00"></td>
<td bgColor="#3ADF00"></td>
<td bgColor="#01DF01"></td>
<td bgColor="#01DF3A"></td>
<td bgColor="#01DF74"></td>
<td bgColor="#01DFA5"></td>
<td bgColor="#01DFD7"></td>
<td bgColor="#01A9DB"></td>
<td bgColor="#0174DF"></td>
<td bgColor="#013ADF"></td>
<td bgColor="#0101DF"></td>
<td bgColor="#3A01DF"></td>
<td bgColor="#7401DF"></td>
<td bgColor="#A901DB"></td>
<td bgColor="#DF01D7"></td>
<td bgColor="#DF01A5"></td>
<td bgColor="#DF0174"></td>
<td bgColor="#DF013A"></td>
<td bgColor="#6E6E6E"></td>
</tr>
<tr>
<td bgColor="#B40404"></td>
<td bgColor="#B43104"></td>
<td bgColor="#B45F04"></td>
<td bgColor="#B18904"></td>
<td bgColor="#AEB404"></td>
<td bgColor="#86B404"></td>
<td bgColor="#5FB404"></td>
<td bgColor="#31B404"></td>
<td bgColor="#04B404"></td>
<td bgColor="#04B431"></td>
<td bgColor="#04B45F"></td>
<td bgColor="#04B486"></td>
<td bgColor="#04B4AE"></td>
<td bgColor="#0489B1"></td>
<td bgColor="#045FB4"></td>
<td bgColor="#0431B4"></td>
<td bgColor="#0404B4"></td>
<td bgColor="#3104B4"></td>
<td bgColor="#5F04B4"></td>
<td bgColor="#8904B1"></td>
<td bgColor="#B404AE"></td>
<td bgColor="#B40486"></td>
<td bgColor="#B4045F"></td>
<td bgColor="#B40431"></td>
<td bgColor="#585858"></td>
</tr>
<tr>
<td bgColor="#8A0808"></td>
<td bgColor="#8A2908"></td>
<td bgColor="#8A4B08"></td>
<td bgColor="#886A08"></td>
<td bgColor="#868A08"></td>
<td bgColor="#688A08"></td>
<td bgColor="#4B8A08"></td>
<td bgColor="#298A08"></td>
<td bgColor="#088A08"></td>
<td bgColor="#088A29"></td>
<td bgColor="#088A4B"></td>
<td bgColor="#088A68"></td>
<td bgColor="#088A85"></td>
<td bgColor="#086A87"></td>
<td bgColor="#084B8A"></td>
<td bgColor="#08298A"></td>
<td bgColor="#08088A"></td>
<td bgColor="#29088A"></td>
<td bgColor="#4B088A"></td>
<td bgColor="#6A0888"></td>
<td bgColor="#8A0886"></td>
<td bgColor="#8A0868"></td>
<td bgColor="#8A084B"></td>
<td bgColor="#8A0829"></td>
<td bgColor="#424242"></td>
</tr>
<tr>
<td bgColor="#610B0B"></td>
<td bgColor="#61210B"></td>
<td bgColor="#61380B"></td>
<td bgColor="#5F4C0B"></td>
<td bgColor="#5E610B"></td>
<td bgColor="#4B610B"></td>
<td bgColor="#38610B"></td>
<td bgColor="#21610B"></td>
<td bgColor="#0B610B"></td>
<td bgColor="#0B6121"></td>
<td bgColor="#0B6138"></td>
<td bgColor="#0B614B"></td>
<td bgColor="#0B615E"></td>
<td bgColor="#0B4C5F"></td>
<td bgColor="#0B3861"></td>
<td bgColor="#0B2161"></td>
<td bgColor="#0B0B61"></td>
<td bgColor="#210B61"></td>
<td bgColor="#380B61"></td>
<td bgColor="#4C0B5F"></td>
<td bgColor="#610B5E"></td>
<td bgColor="#610B4B"></td>
<td bgColor="#610B38"></td>
<td bgColor="#610B21"></td>
<td bgColor="#2E2E2E"></td>
</tr>
<tr>
<td bgColor="#3B0B0B"></td>
<td bgColor="#3B170B"></td>
<td bgColor="#3B240B"></td>
<td bgColor="#3A2F0B"></td>
<td bgColor="#393B0B"></td>
<td bgColor="#2E3B0B"></td>
<td bgColor="#243B0B"></td>
<td bgColor="#173B0B"></td>
<td bgColor="#0B3B0B"></td>
<td bgColor="#0B3B17"></td>
<td bgColor="#0B3B24"></td>
<td bgColor="#0B3B2E"></td>
<td bgColor="#0B3B39"></td>
<td bgColor="#0B2F3A"></td>
<td bgColor="#0B243B"></td>
<td bgColor="#0B173B"></td>
<td bgColor="#0B0B3B"></td>
<td bgColor="#170B3B"></td>
<td bgColor="#240B3B"></td>
<td bgColor="#2F0B3A"></td>
<td bgColor="#3B0B39"></td>
<td bgColor="#3B0B2E"></td>
<td bgColor="#3B0B24"></td>
<td bgColor="#3B0B17"></td>
<td bgColor="#1C1C1C"></td>
</tr>
<tr>
<td bgColor="#2A0A0A"></td>
<td bgColor="#2A120A"></td>
<td bgColor="#2A1B0A"></td>
<td bgColor="#29220A"></td>
<td bgColor="#292A0A"></td>
<td bgColor="#222A0A"></td>
<td bgColor="#1B2A0A"></td>
<td bgColor="#122A0A"></td>
<td bgColor="#0A2A0A"></td>
<td bgColor="#0A2A12"></td>
<td bgColor="#0A2A1B"></td>
<td bgColor="#0A2A22"></td>
<td bgColor="#0A2A29"></td>
<td bgColor="#0A2229"></td>
<td bgColor="#0A1B2A"></td>
<td bgColor="#0A122A"></td>
<td bgColor="#0A0A2A"></td>
<td bgColor="#120A2A"></td>
<td bgColor="#1B0A2A"></td>
<td bgColor="#220A29"></td>
<td bgColor="#2A0A29"></td>
<td bgColor="#2A0A22"></td>
<td bgColor="#2A0A1B"></td>
<td bgColor="#2A0A12"></td>
<td bgColor="#151515"></td>
</tr>
<tr>
<td bgColor="#190707"></td>
<td bgColor="#190B07"></td>
<td bgColor="#191007"></td>
<td bgColor="#181407"></td>
<td bgColor="#181907"></td>
<td bgColor="#141907"></td>
<td bgColor="#101907"></td>
<td bgColor="#0B1907"></td>
<td bgColor="#071907"></td>
<td bgColor="#07190B"></td>
<td bgColor="#071910"></td>
<td bgColor="#071914"></td>
<td bgColor="#071918"></td>
<td bgColor="#071418"></td>
<td bgColor="#071019"></td>
<td bgColor="#070B19"></td>
<td bgColor="#070719"></td>
<td bgColor="#0B0719"></td>
<td bgColor="#100719"></td>
<td bgColor="#140718"></td>
<td bgColor="#190718"></td>
<td bgColor="#190714"></td>
<td bgColor="#190710"></td>
<td bgColor="#19070B"></td>
<td bgColor="#000000"></td>
</tr>
</table>
</body>
</html>
First you need to halt your code until the DOM is ready.
Or else the code starts to add an event listener to something that is not there.
This you can do by adding a function that is called when the body is loaded.
I've done this to your code below.
Setting CSS3 properties from javascript isn't as easy as setting CSS properties.
Not all browsers support all features, so you need to check that it is supported first.
We need to check both for webkit and moz.
To check for the transformProperty you could do something like
function getCSS3TransformSupport(){
if (undefined!==document.documentElement.style.webkitTransform){
return "webkit";
}
else if (undefined!==document.documentElement.style.mozTransform){
return "moz";
}
else{
return false;
}
}
var supportsCSSTransform=getCSS3TransformSupport();
This will give you 'webkit' or 'moz' if the browser supports it. If it doesn't it returns false.
Now, if you want to change the CSS property, you have to consider if it's webkit or moz.
So the target.style.transform would be either target.style.webkitTransform or target.style.mozTransform.
For more info about styling CSS3 with javascript, and my source in this: http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Here is the code:
<html>
<head>
<style>
#colorchart {
position: fixed;
width:250px;
height:250px;
padding:0px;
margin:0px;
left:0px;
top:350px;
}
</style>
</head>
<body onload="initialize();">
<script type="text/javascript">
function getCSS3TransformSupport(){
if (undefined!==document.documentElement.style.webkitTransform){
return "webkit";
}
else if (undefined!==document.documentElement.style.mozTransform){
return "moz";
}
else{
return false;
}
}
var supportsCSSTransform=getCSS3TransformSupport();
function initialize(){
var table = document.getElementById('colorchart');
table.addEventListener('click', function (event) {
var target = event.target||event.srcElement;
if (target.tagName == 'TD') {
var transformTo="scale(2,2)";
switch (supportsCSSTransform){
case 'moz':
target.style.mozTransform=transformTo;
break;
case 'webkit':
target.style.webkitTransform=transformTo;
break;
}
target.addEventListener ("click", function(event) {
var newTarget=event.target;
if (newTarget.tagName=='TD') {
alert(newTarget.bgColor);
}
}, false);
}
}, false);
}
</script>
<table id="colorchart" >
<tr>
<td bgColor="#FBEFEF"></td>
<td bgColor="#FBF2EF"></td>
<td bgColor="#FBF5EF"></td>
<td bgColor="#FBF8EF"></td>
<td bgColor="#FBFBEF"></td>
<td bgColor="#F8FBEF"></td>
<td bgColor="#F5FBEF"></td>
<td bgColor="#F2FBEF"></td>
<td bgColor="#EFFBEF"></td>
<td bgColor="#EFFBF2"></td>
<td bgColor="#EFFBF5"></td>
<td bgColor="#EFFBF8"></td>
<td bgColor="#EFFBFB"></td>
<td bgColor="#EFF8FB"></td>
<td bgColor="#EFF5FB"></td>
<td bgColor="#EFF2FB"></td>
<td bgColor="#EFEFFB"></td>
<td bgColor="#F2EFFB"></td>
<td bgColor="#F5EFFB"></td>
<td bgColor="#F8EFFB"></td>
<td bgColor="#FBEFFB"></td>
<td bgColor="#FBEFF8"></td>
<td bgColor="#FBEFF5"></td>
<td bgColor="#FBEFF2"></td>
<td bgColor="#FFFFFF"></td>
</tr>
<tr>
<td bgColor="#F8E0E0"></td>
<td bgColor="#F8E6E0"></td>
<td bgColor="#F8ECE0"></td>
<td bgColor="#F7F2E0"></td>
<td bgColor="#F7F8E0"></td>
<td bgColor="#F1F8E0"></td>
<td bgColor="#ECF8E0"></td>
<td bgColor="#E6F8E0"></td>
<td bgColor="#E0F8E0"></td>
<td bgColor="#E0F8E6"></td>
<td bgColor="#E0F8EC"></td>
<td bgColor="#E0F8F1"></td>
<td bgColor="#E0F8F7"></td>
<td bgColor="#E0F2F7"></td>
<td bgColor="#E0ECF8"></td>
<td bgColor="#E0E6F8"></td>
<td bgColor="#E0E0F8"></td>
<td bgColor="#E6E0F8"></td>
<td bgColor="#ECE0F8"></td>
<td bgColor="#F2E0F7"></td>
<td bgColor="#F8E0F7"></td>
<td bgColor="#F8E0F1"></td>
<td bgColor="#F8E0EC"></td>
<td bgColor="#F8E0E6"></td>
<td bgColor="#FAFAFA"></td>
</tr>
<tr>
<td bgColor="#F6CECE"></td>
<td bgColor="#F6D8CE"></td>
<td bgColor="#F6E3CE"></td>
<td bgColor="#F5ECCE"></td>
<td bgColor="#F5F6CE"></td>
<td bgColor="#ECF6CE"></td>
<td bgColor="#E3F6CE"></td>
<td bgColor="#D8F6CE"></td>
<td bgColor="#CEF6CE"></td>
<td bgColor="#CEF6D8"></td>
<td bgColor="#CEF6E3"></td>
<td bgColor="#CEF6EC"></td>
<td bgColor="#CEF6F5"></td>
<td bgColor="#CEECF5"></td>
<td bgColor="#CEE3F6"></td>
<td bgColor="#CED8F6"></td>
<td bgColor="#CECEF6"></td>
<td bgColor="#D8CEF6"></td>
<td bgColor="#E3CEF6"></td>
<td bgColor="#ECCEF5"></td>
<td bgColor="#F6CEF5"></td>
<td bgColor="#F6CEEC"></td>
<td bgColor="#F6CEE3"></td>
<td bgColor="#F6CED8"></td>
<td bgColor="#F2F2F2"></td>
</tr>
<tr>
<td bgColor="#F5A9A9"></td>
<td bgColor="#F5BCA9"></td>
<td bgColor="#F5D0A9"></td>
<td bgColor="#F3E2A9"></td>
<td bgColor="#F2F5A9"></td>
<td bgColor="#E1F5A9"></td>
<td bgColor="#D0F5A9"></td>
<td bgColor="#BCF5A9"></td>
<td bgColor="#A9F5A9"></td>
<td bgColor="#A9F5BC"></td>
<td bgColor="#A9F5D0"></td>
<td bgColor="#A9F5E1"></td>
<td bgColor="#A9F5F2"></td>
<td bgColor="#A9E2F3"></td>
<td bgColor="#A9D0F5"></td>
<td bgColor="#A9BCF5"></td>
<td bgColor="#A9A9F5"></td>
<td bgColor="#BCA9F5"></td>
<td bgColor="#D0A9F5"></td>
<td bgColor="#E2A9F3"></td>
<td bgColor="#F5A9F2"></td>
<td bgColor="#F5A9E1"></td>
<td bgColor="#F5A9D0"></td>
<td bgColor="#F5A9BC"></td>
<td bgColor="#E6E6E6"></td>
</tr>
<tr>
<td bgColor="#F78181"></td>
<td bgColor="#F79F81"></td>
<td bgColor="#F7BE81"></td>
<td bgColor="#F5DA81"></td>
<td bgColor="#F3F781"></td>
<td bgColor="#D8F781"></td>
<td bgColor="#BEF781"></td>
<td bgColor="#9FF781"></td>
<td bgColor="#81F781"></td>
<td bgColor="#81F79F"></td>
<td bgColor="#81F7BE"></td>
<td bgColor="#81F7D8"></td>
<td bgColor="#81F7F3"></td>
<td bgColor="#81DAF5"></td>
<td bgColor="#81BEF7"></td>
<td bgColor="#819FF7"></td>
<td bgColor="#8181F7"></td>
<td bgColor="#9F81F7"></td>
<td bgColor="#BE81F7"></td>
<td bgColor="#DA81F5"></td>
<td bgColor="#F781F3"></td>
<td bgColor="#F781D8"></td>
<td bgColor="#F781BE"></td>
<td bgColor="#F7819F"></td>
<td bgColor="#D8D8D8"></td>
</tr>
<tr>
<td bgColor="#FA5858"></td>
<td bgColor="#FA8258"></td>
<td bgColor="#FAAC58"></td>
<td bgColor="#F7D358"></td>
<td bgColor="#F4FA58"></td>
<td bgColor="#D0FA58"></td>
<td bgColor="#ACFA58"></td>
<td bgColor="#82FA58"></td>
<td bgColor="#58FA58"></td>
<td bgColor="#58FA82"></td>
<td bgColor="#58FAAC"></td>
<td bgColor="#58FAD0"></td>
<td bgColor="#58FAF4"></td>
<td bgColor="#58D3F7"></td>
<td bgColor="#58ACFA"></td>
<td bgColor="#5882FA"></td>
<td bgColor="#5858FA"></td>
<td bgColor="#8258FA"></td>
<td bgColor="#AC58FA"></td>
<td bgColor="#D358F7"></td>
<td bgColor="#FA58F4"></td>
<td bgColor="#FA58D0"></td>
<td bgColor="#FA58AC"></td>
<td bgColor="#FA5882"></td>
<td bgColor="#BDBDBD"></td>
</tr>
<tr>
<td bgColor="#FE2E2E"></td>
<td bgColor="#FE642E"></td>
<td bgColor="#FE9A2E"></td>
<td bgColor="#FACC2E"></td>
<td bgColor="#F7FE2E"></td>
<td bgColor="#C8FE2E"></td>
<td bgColor="#9AFE2E"></td>
<td bgColor="#64FE2E"></td>
<td bgColor="#2EFE2E"></td>
<td bgColor="#2EFE64"></td>
<td bgColor="#2EFE9A"></td>
<td bgColor="#2EFEC8"></td>
<td bgColor="#2EFEF7"></td>
<td bgColor="#2ECCFA"></td>
<td bgColor="#2E9AFE"></td>
<td bgColor="#2E64FE"></td>
<td bgColor="#2E2EFE"></td>
<td bgColor="#642EFE"></td>
<td bgColor="#9A2EFE"></td>
<td bgColor="#CC2EFA"></td>
<td bgColor="#FE2EF7"></td>
<td bgColor="#FE2EC8"></td>
<td bgColor="#FE2E9A"></td>
<td bgColor="#FE2E64"></td>
<td bgColor="#A4A4A4"></td>
</tr>
<tr>
<td bgColor="#FF0000"></td>
<td bgColor="#FF4000"></td>
<td bgColor="#FF8000"></td>
<td bgColor="#FFBF00"></td>
<td bgColor="#FFFF00"></td>
<td bgColor="#BFFF00"></td>
<td bgColor="#80FF00"></td>
<td bgColor="#40FF00"></td>
<td bgColor="#00FF00"></td>
<td bgColor="#00FF40"></td>
<td bgColor="#00FF80"></td>
<td bgColor="#00FFBF"></td>
<td bgColor="#00FFFF"></td>
<td bgColor="#00BFFF"></td>
<td bgColor="#0080FF"></td>
<td bgColor="#0040FF"></td>
<td bgColor="#0000FF"></td>
<td bgColor="#4000FF"></td>
<td bgColor="#8000FF"></td>
<td bgColor="#BF00FF"></td>
<td bgColor="#FF00FF"></td>
<td bgColor="#FF00BF"></td>
<td bgColor="#FF0080"></td>
<td bgColor="#FF0040"></td>
<td bgColor="#848484"></td>
</tr>
<tr>
<td bgColor="#DF0101"></td>
<td bgColor="#DF3A01"></td>
<td bgColor="#DF7401"></td>
<td bgColor="#DBA901"></td>
<td bgColor="#D7DF01"></td>
<td bgColor="#A5DF00"></td>
<td bgColor="#74DF00"></td>
<td bgColor="#3ADF00"></td>
<td bgColor="#01DF01"></td>
<td bgColor="#01DF3A"></td>
<td bgColor="#01DF74"></td>
<td bgColor="#01DFA5"></td>
<td bgColor="#01DFD7"></td>
<td bgColor="#01A9DB"></td>
<td bgColor="#0174DF"></td>
<td bgColor="#013ADF"></td>
<td bgColor="#0101DF"></td>
<td bgColor="#3A01DF"></td>
<td bgColor="#7401DF"></td>
<td bgColor="#A901DB"></td>
<td bgColor="#DF01D7"></td>
<td bgColor="#DF01A5"></td>
<td bgColor="#DF0174"></td>
<td bgColor="#DF013A"></td>
<td bgColor="#6E6E6E"></td>
</tr>
<tr>
<td bgColor="#B40404"></td>
<td bgColor="#B43104"></td>
<td bgColor="#B45F04"></td>
<td bgColor="#B18904"></td>
<td bgColor="#AEB404"></td>
<td bgColor="#86B404"></td>
<td bgColor="#5FB404"></td>
<td bgColor="#31B404"></td>
<td bgColor="#04B404"></td>
<td bgColor="#04B431"></td>
<td bgColor="#04B45F"></td>
<td bgColor="#04B486"></td>
<td bgColor="#04B4AE"></td>
<td bgColor="#0489B1"></td>
<td bgColor="#045FB4"></td>
<td bgColor="#0431B4"></td>
<td bgColor="#0404B4"></td>
<td bgColor="#3104B4"></td>
<td bgColor="#5F04B4"></td>
<td bgColor="#8904B1"></td>
<td bgColor="#B404AE"></td>
<td bgColor="#B40486"></td>
<td bgColor="#B4045F"></td>
<td bgColor="#B40431"></td>
<td bgColor="#585858"></td>
</tr>
<tr>
<td bgColor="#8A0808"></td>
<td bgColor="#8A2908"></td>
<td bgColor="#8A4B08"></td>
<td bgColor="#886A08"></td>
<td bgColor="#868A08"></td>
<td bgColor="#688A08"></td>
<td bgColor="#4B8A08"></td>
<td bgColor="#298A08"></td>
<td bgColor="#088A08"></td>
<td bgColor="#088A29"></td>
<td bgColor="#088A4B"></td>
<td bgColor="#088A68"></td>
<td bgColor="#088A85"></td>
<td bgColor="#086A87"></td>
<td bgColor="#084B8A"></td>
<td bgColor="#08298A"></td>
<td bgColor="#08088A"></td>
<td bgColor="#29088A"></td>
<td bgColor="#4B088A"></td>
<td bgColor="#6A0888"></td>
<td bgColor="#8A0886"></td>
<td bgColor="#8A0868"></td>
<td bgColor="#8A084B"></td>
<td bgColor="#8A0829"></td>
<td bgColor="#424242"></td>
</tr>
<tr>
<td bgColor="#610B0B"></td>
<td bgColor="#61210B"></td>
<td bgColor="#61380B"></td>
<td bgColor="#5F4C0B"></td>
<td bgColor="#5E610B"></td>
<td bgColor="#4B610B"></td>
<td bgColor="#38610B"></td>
<td bgColor="#21610B"></td>
<td bgColor="#0B610B"></td>
<td bgColor="#0B6121"></td>
<td bgColor="#0B6138"></td>
<td bgColor="#0B614B"></td>
<td bgColor="#0B615E"></td>
<td bgColor="#0B4C5F"></td>
<td bgColor="#0B3861"></td>
<td bgColor="#0B2161"></td>
<td bgColor="#0B0B61"></td>
<td bgColor="#210B61"></td>
<td bgColor="#380B61"></td>
<td bgColor="#4C0B5F"></td>
<td bgColor="#610B5E"></td>
<td bgColor="#610B4B"></td>
<td bgColor="#610B38"></td>
<td bgColor="#610B21"></td>
<td bgColor="#2E2E2E"></td>
</tr>
<tr>
<td bgColor="#3B0B0B"></td>
<td bgColor="#3B170B"></td>
<td bgColor="#3B240B"></td>
<td bgColor="#3A2F0B"></td>
<td bgColor="#393B0B"></td>
<td bgColor="#2E3B0B"></td>
<td bgColor="#243B0B"></td>
<td bgColor="#173B0B"></td>
<td bgColor="#0B3B0B"></td>
<td bgColor="#0B3B17"></td>
<td bgColor="#0B3B24"></td>
<td bgColor="#0B3B2E"></td>
<td bgColor="#0B3B39"></td>
<td bgColor="#0B2F3A"></td>
<td bgColor="#0B243B"></td>
<td bgColor="#0B173B"></td>
<td bgColor="#0B0B3B"></td>
<td bgColor="#170B3B"></td>
<td bgColor="#240B3B"></td>
<td bgColor="#2F0B3A"></td>
<td bgColor="#3B0B39"></td>
<td bgColor="#3B0B2E"></td>
<td bgColor="#3B0B24"></td>
<td bgColor="#3B0B17"></td>
<td bgColor="#1C1C1C"></td>
</tr>
<tr>
<td bgColor="#2A0A0A"></td>
<td bgColor="#2A120A"></td>
<td bgColor="#2A1B0A"></td>
<td bgColor="#29220A"></td>
<td bgColor="#292A0A"></td>
<td bgColor="#222A0A"></td>
<td bgColor="#1B2A0A"></td>
<td bgColor="#122A0A"></td>
<td bgColor="#0A2A0A"></td>
<td bgColor="#0A2A12"></td>
<td bgColor="#0A2A1B"></td>
<td bgColor="#0A2A22"></td>
<td bgColor="#0A2A29"></td>
<td bgColor="#0A2229"></td>
<td bgColor="#0A1B2A"></td>
<td bgColor="#0A122A"></td>
<td bgColor="#0A0A2A"></td>
<td bgColor="#120A2A"></td>
<td bgColor="#1B0A2A"></td>
<td bgColor="#220A29"></td>
<td bgColor="#2A0A29"></td>
<td bgColor="#2A0A22"></td>
<td bgColor="#2A0A1B"></td>
<td bgColor="#2A0A12"></td>
<td bgColor="#151515"></td>
</tr>
<tr>
<td bgColor="#190707"></td>
<td bgColor="#190B07"></td>
<td bgColor="#191007"></td>
<td bgColor="#181407"></td>
<td bgColor="#181907"></td>
<td bgColor="#141907"></td>
<td bgColor="#101907"></td>
<td bgColor="#0B1907"></td>
<td bgColor="#071907"></td>
<td bgColor="#07190B"></td>
<td bgColor="#071910"></td>
<td bgColor="#071914"></td>
<td bgColor="#071918"></td>
<td bgColor="#071418"></td>
<td bgColor="#071019"></td>
<td bgColor="#070B19"></td>
<td bgColor="#070719"></td>
<td bgColor="#0B0719"></td>
<td bgColor="#100719"></td>
<td bgColor="#140718"></td>
<td bgColor="#190718"></td>
<td bgColor="#190714"></td>
<td bgColor="#190710"></td>
<td bgColor="#19070B"></td>
<td bgColor="#000000"></td>
</tr>
</table>
</body>
</html>
I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>
I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}