I am working on implementing a Sudoku puzzle.
The first step I am taking is trying to validate that what the user is inputing is a value between 0-9.
But I'm stuck with the syntax and how to tackle this problem.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td>4</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td>5</td>
<td contentEditable="true" class="sudEnter"></td>
<td>3</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>7</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>2</td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>6</td>
<td contentEditable="true" class="sudEnter"></td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>2</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>9</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td contentEditable="true" class="sudEnter"></td>
<td>8</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td>1</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>6</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>8</td>
<td contentEditable="true"></td>
<td>1</td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>7</td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
</table>
That's my Sudoku in html and here is the JS I have at the moment:
function inputCheck() {
var userInput = ""
userInput = document.getElementsByClassName("sudEnter");
if (userInput > 0) {
userInput === userInput;
} else if (userInput < 9) {
userInput === userInput;
} else {
document.getElementsByClassName("sudEnter").value = "";
}
}
document.addEventListener("keyup", inputCheck);
In your if you are using === which is used to compare variables. You are basically comparing userInput to userInput. Just use one = though you don't have to do anything at all for that if.
Try substituting input type="number" element with min attribute set to 0 , max attribute set to 9 for td element
$("input").change(function() {
if (this.value > this.max) {
this.value = this.max
}
if (this.value < this.min) {
this.value = this.min
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="number" min="0" max="9" value="0" />
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'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen
You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer
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 am having table data like this
how to remove text on specific td ( Generasi, Unit Code, Agent Code, Unit Name ) with having duplicate text and keep only 1
so the results can be like this
this is my fiddle
JSFIDDLE
I Have Fixed this. Please find the below changes in html and script.
This code will add a table below your table which is not sorted and remove your js totally and paste the below.
In HTML I have added a div below
var FinalIndex = [];
var tbl = $('table#tableUnit tr').get().map(function(row) {
return $(row).find('td').get().map(function(cell) {
return $(cell).html();
});
});
/* console.log(tbl) */
$.each(tbl, function(index, data) {
if (data.length > 5) {
console.log('data:' + index);
count = 0;
$.each(tbl, function(indexF, dataF) {
if (indexF <= index) {
if (data[0] == dataF[0] && data[1] == dataF[1] && data[2] == dataF[2] && data[3] == dataF[3] && count == 0 && count == 0) {
count = count + 1;
if (index == indexF) {
console.log("comparing :" + index + "with" + indexF);
console.log('count:' + count);
console.log(data[0] + '.' + data[1] + " first value " + dataF[0]);
FinalIndex.push(index);
}
}
}
});
} else {
FinalIndex.push(index);
}
});
console.log(FinalIndex)
function makeTable(tbl) {
var table = '<table>';
$.each(tbl, function(index, value) {
if (jQuery.inArray(index, FinalIndex) !== -1) {
table += '<tr>';
$.each(value, function(ind, v1) {
/* console.log(ind); */
table += '<td>' + v1 + '</td>';
});
table += '</tr>';
}
});
/* return ($(table)); */
table += '</table>';
console.log(table);
$('.finalTable').html(table);
};
makeTable(tbl);
$('#btnOrig').click(function(){
$('#orig_table').toggle();
});
#orig_table{border:1px solid red;box-sizing:border-box;display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btnOrig">Show Original Table</button>
<div id="orig_table">
<table class="table" id="tableUnit" style="width: 100%;">
<thead>
<tr>
<th style="width: 7em;"><strong>Generasi</strong></th>
<th style="width: 20em;"><strong>Unit Code</strong></th>
<th style="width: 20em;"><strong>Agent Code Unit</strong></th>
<th style="width: 6em;"><strong>Unit Name</strong></th>
<th style="width: 6em;" class="center"><strong>No.</strong></th>
<th style="width: 5em;"><strong>Agent Code</strong></th>
<th style="width: 15em;"><strong>Agent Name</strong></th>
<th style="width: 15em;"><strong>VOC</strong></th>
<th style="width: 15em;"><strong>KPM</strong></th>
<th style="width: 15em;" class="right"><strong>Case</strong></th>
<th style="width: 15em;" class="right"><strong>ALP</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-0</strong></td>
<td></td>
<td class="right"><strong>0</strong></td>
<td class="right"><strong>0</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>1</td>
<td>00905445</td>
<td>NESTI RAHAYU</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>2</td>
<td>00905448</td>
<td>AISYAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>3</td>
<td>00905454</td>
<td>ADYANTA YOGA PRADANA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A7924</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>4</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-1</strong></td>
<td></td>
<td class="right"><strong>5</strong></td>
<td class="right"><strong>48.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-2</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>1</td>
<td>00918088</td>
<td>JOHN HENDRI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A5993</td>
<td>00923678</td>
<td>PATENSAROHA PANJAITAN</td>
<td>2</td>
<td>00924255</td>
<td>PURNAMA MARINTAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">28.800.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>3</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">2</td>
<td class="right">31.200.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-2</strong></td>
<td></td>
<td class="right"><strong>8</strong></td>
<td class="right"><strong>72.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-3</td>
<td>A2190</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>1</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>2</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">73.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00911258</td>
<td>CAROTRIANA HARTIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>4</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>5</td>
<td>00925635</td>
<td>RICHA DEWI AZDANI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">4</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>6</td>
<td>00941248</td>
<td>ROCHIMI DIAN PUSPITASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">9.600.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7240</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>7</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">23.040.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8053</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>8</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>JB3</td>
<td>JAM707</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>9</td>
<td>00953857</td>
<td>MOCH KEMAL ASYAF</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>10</td>
<td>00968671</td>
<td>GITA NELWAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-3</strong></td>
<td></td>
<td class="right"><strong>21</strong></td>
<td class="right"><strong>195.640.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-4</td>
<td>A4040</td>
<td>00909748</td>
<td>KARINA</td>
<td>1</td>
<td>00909748</td>
<td>KARINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">54.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>2</td>
<td>00910517</td>
<td>ALFIAN IDRUS</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00912869</td>
<td>ROHMAT</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.060.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>4</td>
<td>00925358</td>
<td>ANDRIYANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6789</td>
<td>00909167</td>
<td>WAHYU RIDWAN NUGROHO</td>
<td>5</td>
<td>00938577</td>
<td>ACHMAD TAUFIK</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>6</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>7</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>8</td>
<td>00947779</td>
<td>YENNI CHRISTINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A7204</td>
<td>00941979</td>
<td>MANUELA R SIAGIAN</td>
<td>9</td>
<td>00959611</td>
<td>LAURENTIA DYAH IKA G</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">10.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A2042</td>
<td>00905588</td>
<td>HENY BAYU SAFITRI</td>
<td>10</td>
<td>00965234</td>
<td>YASAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>11</td>
<td>00968489</td>
<td>ANDRE PERBAWA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-4</strong></td>
<td></td>
<td class="right"><strong>14</strong></td>
<td class="right"><strong>167.660.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-5</td>
<td>A2157</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>1</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A2043</td>
<td>00905590</td>
<td>BUNGAIDAL ADKHIA</td>
<td>2</td>
<td>00911669</td>
<td>ZULFIKAR</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>3</td>
<td>00914524</td>
<td>RITAWATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">13.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>4</td>
<td>00923652</td>
<td>DEDEN AMARULLAH</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">4.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6916</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>5</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8199</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>6</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8131</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>7</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">15.600.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6307</td>
<td>00911807</td>
<td>BERTA M PURBA</td>
<td>8</td>
<td>00964680</td>
<td>DANIEL</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>9</td>
<td>00967703</td>
<td>YANTI ARIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>10</td>
<td>00968122</td>
<td>NOVIA BETSY CLARISSA</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">24.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-5</strong></td>
<td></td>
<td class="right"><strong>18</strong></td>
<td class="right"><strong>165.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>GRAND TOTAL</strong></td>
<td></td>
<td class="right"><strong>66</strong></td>
<td class="right"><strong>648.300.000</strong></td>
<td></td>
</tr>
</tfoot>
</table>
</div><!-- #orig_table -->
<h2>Final Table:</h2>
<div class="finalTable"></div>
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>