separate big table in html into small tables - javascript

I am creating a table but I have to separate it into separate tables. They must be separated by "table_title" and the content of the tables is "table_line" I would greatly appreciate your support
<thead>
<tr>
<th>Product</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="titulo_tabla">Title 1</td>
</tr>
<tr>
<td class="linea_tabla">Resolución de la pantalla</td>
<td class="linea_tabla">1366 x 768 Pixeles</td>
</tr>
<tr>
<td class="linea_tabla">Pantalla táctil</td>
<td class="linea_tabla">No</td>
</tr>
<tr>
<td class="linea_tabla">Tipo HD</td>
<td class="linea_tabla">HD</td>
</tr>
<tr>
<td class="linea_tabla">Retroiluminación LED</td>
<td class="linea_tabla">Si</td>
</tr>
<tr>
<td class="linea_tabla">Relación de aspecto nativa</td>
<td class="linea_tabla">16:9</td>
</tr>
<tr>
<td class="linea_tabla">Pantalla antirreflejante</td>
<td class="linea_tabla">Si</td>
</tr>
<tr>
<td class="linea_tabla">Brillo de pantalla</td>
<td class="linea_tabla">220 cd / m²</td>
</tr>
<tr>
<td class="linea_tabla">Densidad del pixel</td>
<td class="linea_tabla">112 ppi</td>
</tr>
<tr>
<td class="linea_tabla">Espacio de color RGB</td>
<td class="linea_tabla">NTSC</td>
</tr>
<tr>
<td class="linea_tabla">Gama de colores</td>
<td class="linea_tabla">45%</td>
</tr>
<tr>
<td class="linea_tabla">Máxima velocidad de actualización</td>
<td class="linea_tabla">60 Hz</td>
</tr>
<tr>
<td class="linea_tabla">Razón de contraste (típica)</td>
<td class="linea_tabla">400:1</td>
</tr>
<tr>
<td colspan="2" class="titulo_tabla">TItle 2</td>
</tr>
<tr>
<td class="linea_tabla">Modelo del procesador</td>
<td class="linea_tabla">i5-1135G7</td>
</tr>
<tr>
<td class="linea_tabla">Frecuencia del procesador turbo</td>
<td class="linea_tabla">4.2 GHz</td>
</tr>
<tr>
<td class="linea_tabla">Familia de procesador</td>
<td class="linea_tabla">Intel® Core™ i5 de 11ma Generación</td>
</tr>
<tr>
<td class="linea_tabla">Núcleos del procesador</td>
<td class="linea_tabla">4</td>
</tr>
<tr>
<td class="linea_tabla">Caché del procesador</td>
<td class="linea_tabla">8 MB</td>
</tr>
<tr>
<td class="linea_tabla">Tipo de cache en procesador</td>
<td class="linea_tabla">Smart Cache</td>
</tr>
<tr>
<td class="linea_tabla">Frecuencia configurable TDP-up</td>
<td class="linea_tabla">2.4 GHz</td>
</tr>
<tr>
<td class="linea_tabla">TDP-up configurable</td>
<td class="linea_tabla">28 W</td>
</tr>
<tr>
<td class="linea_tabla">TDP-down configurable</td>
<td class="linea_tabla">12 W</td>
</tr>
<tr>
<td class="linea_tabla">Frecuencia configurable TDP-down</td>
<td class="linea_tabla">0.9 GHz</td>
</tr>
<tr>
<td colspan="2" class="titulo_tabla">Title 3</td>
</tr>
<tr>
<td class="linea_tabla">Cantidad de puertos tipo A USB 3.2 Gen 1 (3.1 Gen 1)</td>
<td class="linea_tabla">2</td>
</tr>
<tr>
<td class="linea_tabla">Puertos Ethernet LAN (RJ-45)</td>
<td class="linea_tabla">1</td>
</tr>
<tr>
<td class="linea_tabla">Número de puertos HDMI</td>
<td class="linea_tabla">1</td>
</tr>
<tr>
<td class="linea_tabla">Versión HDMI</td>
<td class="linea_tabla">1.4</td>
</tr>
<tr>
<td class="linea_tabla">Combo de salida de auriculares / micrófono del puerto</td>
<td class="linea_tabla">Si</td>
</tr>
<tr>
<td class="linea_tabla">Tipo de puerto de carga</td>
<td class="linea_tabla">Toma de entrada de CC</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let types = [... new Set($('table.original tr .titulo_tabla').get().map(type => type.textContent))];
//create a container for the cloned tables
$('table.original').after(`<h4>After:</h4><div class="cloned-tables"></div>`)
//loop over types, clone tables, modify accordingly
$.each(types, function(index, type) {
$(`<p class="type">${type}</p>${$('table.original')[0].outerHTML}`)
.appendTo('.cloned-tables')
.find('.titulo_tabla').each(function() {
//if (this.textContent !== type) { this.parentElement.remove(); }
//this.remove();
});
});
</script>
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
descripcion de código


Can you just make two separate tables similar to this:
<tbody>
<tr>
<td colspan="2" class="titulo_tabla">Title 1</td>
</tr>
...
<tbody>
<tr>
<td colspan="2" class="titulo_tabla">Title 2</td>
</tr>

Related

Add dynamically rowspan with Javascript/ jQuery

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>

How to Group columns in front end?

Table has to be displayed in front end. Following is the code.
<logic:present name="searchStudent">
<table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0">
<caption><b><bean:message key="label.student.details.display"/></b></caption>
<tr>
<td align="center"><b><bean:message key="label.student.class.code"/></b></td>
<td align="center"><b><bean:message key="label.student.name.code"/></b></td>
<td align="center"><b><bean:message key="label.student.section.code"/></b></td>
<td align="center"><b><bean:message key="label.edit" /></b></td>
<td align="center"><b><bean:message key="label.delete" /></b></td>
</tr>
<logic:iterate name="searchStudent" id="row">
<tr>
<td rowspan="2">
<bean:write name="row" property="sclass" />
</td>
<td>
<bean:write name="row" property="sname" />
</td>
<td>
<bean:write name="row" property="section" />
</td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();updateStudent(this);"
type="image"
src="${pageContext.request.contextPath}/images/pen_edit_thick.png"
class="imgEditPen"
title="<bean:message key="button.tooltip.edit"/>"></td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();deleteStudent();"
type="image"
src="${pageContext.request.contextPath}/images/icon_delete.gif"
class="imgEditPen"
title="<bean:message key="button.tooltip.remove"/>"></td>
</tr>
</logic:iterate>
</table>
</logic:present>
It has three columns in table namely class,student name and section. Since class is same for some student it has to spanned across students having same class. Following is the sample output.
Data is fetched from Backend.

Colspan Attribute can merge columns in a table.
<td colspan="2">Sum: $180</td>
Example
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Result
Refer: https://www.w3schools.com/tags/att_td_colspan.asp
Rowspan Attribute:
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
https://www.w3schools.com/tags/att_td_rowspan.asp

localstorage setitem for every block in <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

Change a table element content with jQuery

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>

How can I use special characters in angular directives attributes?

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">&Auml;</td>
<td class="codes">&#196;</td>
<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
<td class="codes">ä </td>
<td class="codes">&auml;</td>
<td class="codes">&#228;</td>
<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
<td>É</td>
<td>&Eacute;</td>
<td>&#201;</td>
<td>Capital E-acute</td>
</tr>
<tr>
<td>é</td>
<td>&eacute;</td>
<td>&#233;</td>
<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
<td class="codes">Ö </td>
<td class="codes">&Ouml;</td>
<td class="codes">&#214;</td>
<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
<td class="codes">ö </td>
<td class="codes">&ouml;</td>
<td class="codes">&#246;</td>
<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">Ü </td>
<td class="codes">&Uuml;</td>
<td class="codes">&#220;</td>
<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
<td class="codes">ü </td>
<td class="codes">&uuml;</td>
<td class="codes">&#252;</td>
<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">ß</td>
<td class="codes">&szlig;</td>
<td class="codes">&#223;</td>
<td class="codes">SZ ligature</td>
</tr>
<tr>
<td class="codes">«</td>
<td class="codes">&laquo;</td>
<td class="codes">&#171;</td>
<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
<td class="codes">»</td>
<td class="codes">&raquo;</td>
<td class="codes">&#187;</td>
<td class="codes">Right angle quotes</td>
</tr>
<tr>
<td class="codes">„</td>
<td class="codes"> </td>
<td class="codes">&#132;</td>
<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
<td class="codes">“</td>
<td class="codes"> </td>
<td class="codes">&#147;</td>
<td class="codes">Left quotes</td>
</tr>
<tr>
<td class="codes">”</td>
<td class="codes"> </td>
<td class="codes">&#148;</td>
<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
<td class="codes">°</td>
<td class="codes"> </td>
<td class="codes">&#176;</td>
<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
<td class="codes">€</td>
<td class="codes">&euro;</td>
<td class="codes">&#128;</td>
<td class="codes">Euro</td>
</tr>
<tr class="grey">
<td>£</td>
<td>&pound;</td>
<td>&#163;</td>
<td>Pound Sterling</td>
</tr>
</tbody></table>

Categories

Resources