I am trying to fill a table with values from an array. How can I fill the second column (AKA the "Correct Answer" column) with the Strings defined in the stock array? I am trying to correctly fill that column with the "Correct Answers" and the "Your Answer" column with an array of String that the user gives. (Not shown, in another class).
var stock = new Array()
stock[0] = new Array("The")
stock[1] = new Array("of")
stock[2] = new Array("and")
stock[3] = new Array("a")
stock[4] = new Array("to")
stock[5] = new Array("in")
stock[6] = new Array("is")
stock[7] = new Array("you")
stock[8] = new Array("that")
stock[9] = new Array("it")
stock[10] = new Array("he")
stock[11] = new Array("for")
stock[12] = new Array("was")
stock[13] = new Array("on")
stock[14] = new Array("are")
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-
width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-
style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 363px">
<colgroup>
<col style="width: 121px">
<col style="width: 121px">
<col style="width: 121px">
</colgroup>
<tr>
<th class="tg-031e">Question:</th>
<th class="tg-031e">Correct Answer:</th>
<th class="tg-031e">Your Answer:</th>
</tr>
<tr>
<td class="tg-031e">1.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">2.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">3.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">4.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">5.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">6.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">7.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">8.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">9.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">10.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">11.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">12.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">13.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">14.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">15.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
</table>
You can use querySelectorAll() to grab each table cell and then fill it while you iterate over them:
var stock = [["The"], ["of"], ["and"], ["a"], ["to"],
["in"], ["is"], ["you"], ["that"], ["it"],
["he"], ["for"], ["was"], ["on"], ["are"]];
var nodes = document.querySelectorAll('td.tg-031e:nth-child(2)');
[].forEach.call(nodes, function(node, index) {
node.innerText = stock[index][0];
});
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
<table class="tg" style="undefined;table-layout: fixed; width: 363px">
<colgroup>
<col style="width: 121px">
<col style="width: 121px">
<col style="width: 121px">
</colgroup>
<tr>
<th class="tg-031e">Question:</th>
<th class="tg-031e">Correct Answer:</th>
<th class="tg-031e">Your Answer:</th>
</tr>
<tr>
<td class="tg-031e">1.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">2.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">3.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">4.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">5.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">6.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">7.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">8.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">9.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">10.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">11.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">12.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">13.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">14.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">15.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
</table>
you can use document.write method and fill each rows of that column individually. or you can give id to each row of that column 1,2... and then iterate in the script from 1 to the maximum Id and use document.getElementById(idNumber).innerHTMl method to set the given values.
Here is one example for you
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<script>
for(i=1;i<=3;i++)
{
document.getElementById(i).innerHTMl=yourDataOverHere
}
</script>
Related
I am trying to add dynamically rowspan to my table, I am totally new in the programming world so I am still learning. This is my table::
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>School 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
So if I add a new student to the table, I need to adjust rowspan so I was wondering if there is a way to add that automatically when I add a new student:
For example currently, if I add a new student my table is totally messed up:
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
I know that I can adjust rowspan but I want to do this via Javascript/jQuery, can anybody try to help me with this?
This works
Add a tbody per building
Calculate the rows in each building
Plain JS
document.querySelectorAll("table tbody")
.forEach(tb => tb.querySelector(".build-name")
.setAttribute("rowspan",tb.querySelectorAll("tr").length))
document.querySelectorAll("table tbody")
.forEach(tb => tb.querySelector(".build-name")
.setAttribute("rowspan",tb.querySelectorAll("tr").length))
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
jQuery
$("table tbody").each(function() {
$(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})
$("table tbody").each(function() {
$(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
I have this contenteditable table on my website.
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
I want to save every block with id on localstorage. I know I can use localStorage.setItem("p1d1", $('#p1d1').text()); to save these, but is there a better way to save all of these blocks without going like
localStorage.setItem("p1d1", $('#p1d1').text());
localStorage.setItem("p2d1", $('#p2d1').text());
localStorage.setItem("p3d1", $('#p3d1').text());
through the whole thing? I need to call each of them by their id later on.
Thank you.
You can use document.querySelectorAll('td[id^=p]') to select all the td that has id that startsWith p.
const tds = Array.from(document.querySelectorAll('td[id^=p]'));
tds.forEach(td => {
const id = td.id;
const text = td.innerText;
console.log(id, text);
})
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1>text of p1d1</td>
<td id="p1d2" tabindex=2>text of p1d2</td>
<td id="p1d3" tabindex=3>text of p1d3</td>
<td id="p1d4" tabindex=4>text of p1d4</td>
<td id="p1d5" tabindex=5>text of p1d5</td>
<td id="p1d6" tabindex=6>text of p1d6</td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
Personally I would store it in one key instead of tons of keys. Simple reduce statement can let you gather all of the data.
var cells = document.querySelectorAll('td[id^="p"]')
function save() {
const data = Array.from(cells).reduce(function (o, td) {
o[td.id] = td.innerHTML;
return o
}, {})
console.log(data)
//window.localStorage("data", JSON.stringify(data))
}
function loadData () {
var data = window.localStorage("data")
if (data) {
var obj = JSON.parse(data)
Object.entries(obj).forEach( function (entry) {
document.getElementById(entry[0]).innerHTML = entry[1]
})
}
}
save()
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
I would recommend adding a class to each cell:
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1 class="periodCell"></td>
<td id="p1d2" tabindex=2 class="periodCell"></td>
<td id="p1d3" tabindex=3 class="periodCell"></td>
<td id="p1d4" tabindex=4 class="periodCell"></td>
<td id="p1d5" tabindex=5 class="periodCell"></td>
<td id="p1d6" tabindex=6 class="periodCell"></td>
</tr>
Then doing something along the lines of the following:
$('.periodCell').each(function(index, elem)
{
localStorage.setItem(elem.id, elem.textContent);
});
you could do some other things with the selector so that you're not needing to add the class to every cell, but this is the most basic option...
another is regex on the cell ids... but that would be pretty painful
I'm trying to modify the contents of specific <td>'s unsuccessfully.
The idea is to change the script word 'S/JUROS' to ' C/JUROS' from 8x.
Any suggestions for the best way to do this? I already managed to rescue the values in an array, but got caught at this stage.
https://jsfiddle.net/diasbass/23swmsvn/
jQuery(document).ready(function($) {
if (jQuery(".tbl-payment-system").length) {
var getTexts = [];
$(".tbl-payment-system tr td.parcelas").each(function() {
getTexts.push($(this).text())
});
var resultTexts = '"' + getTexts.join('", "') + '"';
console.log(resultTexts);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/diasbass/23swmsvn/
You can use :contains(), .add(), general sibling selector ~, .map(), .replace(), .get(). Note, not clear if requirement is to change text of html td element or only text stored at array? If expected result is for td element text to be changed you can use .text(function(index, originalText) {}) where new text is returned
jQuery(document).ready(function($) {
if (jQuery(".tbl-payment-system").length) {
var getTexts = [];
var x = $(".tbl-payment-system tr:contains(8X)");
var resultTexts = x.add($("~ tr", x)).map(function() {
return $("td.parcelas", this).text(function(_, text) {
return text.replace(/S(?=\/)/, "C")
}).text()
}).get();
console.log('"' + resultTexts.join('", "') + '"');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>https://jsfiddle.net/23swmsvn/3/
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
jsfiddle https://jsfiddle.net/23swmsvn/5/
Take a look at this
$("td").each(function(){
if (parseInt($(this).text()) >= 8){
$(this).text(($(this).text()).replace("S/JUROS","C/JUROS"));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
Find 8X using :contains, then go it its parent and nextUntil the end. Then addBack to include 8X and get each rows :first-child.
Then each over them to update the text:-
var elements = $('table td:contains(8X)').parent().nextUntil().addBack().children(':first-child');
elements.each(function() {
$(this).text($(this).text().replace('S/JUROS', 'C/JUROS'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" class="tbl-payment-system" style="display: table;">
<tbody>
<tr class="even">
<th class="parcelas">Nº de Parcelas</th>
<th class="valor">Valor de cada parcela</th>
</tr>
<tr class="even">
<td class="parcelas">X S/JUROS</td>
<td>R$ 600,00</td>
</tr>
<tr>
<td class="parcelas">2X S/JUROS</td>
<td>R$ 300,00</td>
</tr>
<tr class="even">
<td class="parcelas">3X S/JUROS</td>
<td>R$ 200,00</td>
</tr>
<tr>
<td class="parcelas">4X S/JUROS</td>
<td>R$ 150,00</td>
</tr>
<tr class="even">
<td class="parcelas">5X S/JUROS</td>
<td>R$ 120,00</td>
</tr>
<tr>
<td class="parcelas">6X S/JUROS</td>
<td>R$ 100,00</td>
</tr>
<tr class="even">
<td class="parcelas">7X S/JUROS</td>
<td>R$ 85,71</td>
</tr>
<tr>
<td class="parcelas">8X S/JUROS</td>
<td>R$ 81,87</td>
</tr>
<tr class="even">
<td class="parcelas">9X S/JUROS</td>
<td>R$ 73,47</td>
</tr>
<tr>
<td class="parcelas">10X S/JUROS</td>
<td>R$ 66,76</td>
</tr>
<tr class="even">
<td class="parcelas">11X S/JUROS</td>
<td>R$ 64,81</td>
</tr>
<tr>
<td class="parcelas">12X S/JUROS</td>
<td>R$ 60,24</td>
</tr>
</tbody>
</table>
So, i have a table with some hidden rows with class="mov" that I would like to toggle when you click on a specific td with id="line" or class="line".
<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9">
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
</table>
And here's the jQuery function:
$(function() {
$('tr.sinaledit').click(function(){
$(this).siblings('.mov'+this.id).toggle('slow');
});
$('tr[class^=mov]').hide().children('td');
});
It works, but it toggles the rows when you click on any td, even the x one. The x td will have another delete function associated with it, that's why I don't want it do be part of the toggle. But I can't manage to make the toggle when you click only on id="line". Sorry, I'm a jQuery beginner.
Here's a fiddle for demo:
jsFiddle
Thank you very much!
you have simply to attach the click event on the required element.In your case the element has the id line so you have to use the # selector to select this element:
$(function() {
$('#line').click(function(){
$('tr.sinaledit').siblings('.mov').toggle('slow');
});
$('tr[class^=mov]').hide().children('td');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table align="center" id="editabletable" class="table" cellpadding="5" cellspacing="3" border="1">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9">
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
<tr class="mov">
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center"> </td>
</tr>
</table>
It's really just a matter of how you use your selectors. I chose to only apply the click event on anything with the '.line' class instead.
Made some changes but see the jsFiddle
$(function() {
$('.line').on('click', function(){
// Find the nearest element with .line class
// Once found, move up to the parent <tr> to find siblings
// Note: this only works with your current structure
$(this).closest('.line').parent().siblings('.mov').toggle();
});
$('tr[class^=mov]').hide().children('td');
});
For the html structure I like more this
<style>
.mov {
display: none;
}
</style>
<table align="center" id="editabletable">
<tr>
<td id="add">+</td>
<td id="remove">x</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
</table>
For the jquery part, this is more simple:
$(function() {
$('#add').click(function(){
$('.mov').show('slow');
});
$('#remove').click(function(){
$('.mov').hide('slow');
});
});
Try,
$(function() {
$('.sinaledit').click(function(){
$('.mov').toggle('slow');
});
$('tr[class^=mov]').hide().children('td');
});
This will help fixing your need.
There is no </tr> tag corresponding to the <tr class="sinaledit"> tag so the browser is applying the behavior to all td tags. Try the following:
<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9">
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td></tr>
<tr><td align="center" id="x" class="x">x</td></tr>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
</table>
There are other style edits I would make to make the html easier to follow, but the above is the bare minimum you need to get the desired functionality.
updated jsfiddle
jsFiddle
You cannot sibling <tr> and <td>, TD should always be child of TR.
It's good to avoid "+" as ID name selector.
If you plan to have multiple buttons - simply remove all of your ID and rely on CLASSes.
Here's an example with even multiple tables:
$(function() {
$('.table').on("click", ".line", function(){
$(this).siblings('.mov').toggle(800);
}).on("click", ".delete", function(){
$(this).closest("table").fadeOut(function(){
$(this)/*the table*/.remove();
});
});
});
.line:hover {
background-color:#cf5;
cursor: pointer;
}
.table {
margin: 0 auto;
width:100%;
border-collapse: collapse;
table-layout:fixed;
}
.table td,
.table th{
padding:5px 10px;
border:1px solid #444;
}
.table tr.mov{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr class="line">
<td class="show">+</td>
<td>1 text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="delete">x</td>
</tr>
<tr class="mov">
<td> </td>
<td>Card</td>
<td>Type</td>
<td>Code</td>
<td>Desc</td>
<td>P1</td>
<td>P2</td>
<td>P3</td>
<td>P4</td>
<td>P5</td>
<td> </td>
</tr>
<tr class="mov">
<td> </td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td> </td>
</tr>
</table>
<table class="table">
<tr class="line">
<td class="show">+</td>
<td>2 text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="delete">x</td>
</tr>
<tr class="mov">
<td> </td>
<td>Card</td>
<td>Type</td>
<td>Code</td>
<td>Desc</td>
<td>P1</td>
<td>P2</td>
<td>P3</td>
<td>P4</td>
<td>P5</td>
<td> </td>
</tr>
<tr class="mov">
<td> </td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td> </td>
</tr>
</table>
I am creating an HTML table which currently has a click event attached to the column heading TH to sort the table.
What I am now trying to do is to expand a column by showing additional hidden columns when you click "somewhere".
Now, my initial thought for this "somewhere" was to create a :pseudo element on each TH which has hidden columns (they all have a specific css class) and to attach the show event on to this :pseudo element, however, when I do this its triggering the column sorting.
I have tried changing $('.xxp').on('click', function () { to $('.xxp:before').on('click', function () { but I because the TH has data attributes that I need, when I use $(this).parent('th') I am not able to get the data so the expand is not firing.... Can you target the parent of a pseudo element?
So, looking at the snippet, I want to click on the green to sort the table, I want to click on the red to show the hidden columns but not trigger the sort at the same time (which it is currently).
$(document).ready(function () {
var openData = null;
$('.xxp').on('click', function () {
var $this = $(this),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp:before {
display:inline-block;
width:15px;
height:15px;
content:"";
background-color:#ff0000;
float:right;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>
And here is a fiddle: http://jsfiddle.net/wf_4/qkv510ot/
Ok, thanks to the suggestion from #bergi this is how I did it.
$(document).ready(function () {
var pseudoBtn = $('<span />').attr({ 'class': 'pseudoBtn' });
$('.xxp').prepend(pseudoBtn);
var openData = null;
$('.xxp span.pseudoBtn').on('click', function (e) {
e.stopPropagation();
var $this = $(this).parent('th'),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp > span.pseudoBtn {
display:inline-block;
width:15px;
height:15px;
background-color:#ff0000;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>