ID select of td using JQuery - javascript

What I am trying to do is onLoad essentially, find all id's of each td, that has a number 1-7 and replace it with the image that corresponds with that number i.e.
<td id="7" class="level">7</td>
would change the 7, the content to ...
<td id="7" class="level"><img src="../img/CL7.png" alt=""></td>
So what i have so far is as follows:
$(document).ready(function()
{
$("td").click(function()
{
var findID =$(this).attr('id');
var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
function ReplaceCellContent(findID, replace)
{
return $("tbody tr td.level:contains('" + findID + "')").html(replace);
}
var myStringArray = [1,2,3,4,5,6,7];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
ReplaceCellContent(findID, replace);
}
});
});
So it will go, find all of the ID's of the td's onclick of each td. I want it to do this to ALL of the ids ranging from 1-7, when the page loads.
I am somewhat new to JQuery/JavaScript,I DO HAVE THE SCRIPT LINK TO JQUERY API THROUGH GOOGLE FYI, so any explanation would be greatly appreciated as well. I was trying to use the loop at the bottom to loop through all of the possible numbers and just plug them in but i can't think of how to connect each back to of its original td, which had had that ID.
the HTML Table that the JQuery needs to change looks like this, written out:
<table class="sortable">
<thead>
<tr>
<th>Player Name</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Krack</td>
<td id="7" class="level">7</td>
</tr>
<tr>
<td>Lively</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Bamon Williams</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Sinister Char</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Senior BoomBox</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Blitzking</td>
<td id="4" class="level">4</td>
</tr>
<tr>
<td>Hadooooken</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Jumpman2392</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>ALEC*</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Frokido</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>B. McOxbig</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>[MES] Koko</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>PinkStrank</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>papa von</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Nuski</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>LunchBoxes</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Grenade65</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>[MGS]TOAD</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>NoahS</td>
<td id="1" class="level">1</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>


jQuery is great, but I don't recommend it for everything and especially not until you really have a good understanding of JavaScript, so this solution only uses jQuery to register a function to be called when the page is ready for interaction:
// When the document is ready, run the following function:
$(function(){
// Get all the TD elements:
var allTheTDs = document.querySelectorAll("td.level");
// Loop through the array of all the TD elements
for(var i = 0; i < allTheTDs.length; ++i){
// Check to see if the current TD has an ID of 7 or less
if(allTheTDs[i].id <=7 ){
// Remove the current content of the TD
allTheTDs[i].innerHTML = "";
// Create a new img element
var img = document.createElement("img");
// Configure the new img element to have a src attribute value
// that is based on the id value
img.src = "../img/CL" + allTheTDs[i].id + ".png";
// Give the img an alt to match the src, just to show
// it works
img.alt = "../img/CL" + allTheTDs[i].id + ".png";
// Append the new image into the current TD
allTheTDs[i].appendChild(img);
}
}
});
Here's a working fiddle: https://jsfiddle.net/96hkhy4j/4/


You may do something like this
$(document).ready(function() {
var myStringArray = [1,2,3,4,5,6,7];
for (var i = 1; i <= myStringArray.length; i++) {
var findID = i;
var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
ReplaceCellContent(findID, replace);
}
function ReplaceCellContent(findID, replace) {
return $("tbody tr td.level:contains('" + findID + "')").html(replace);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sortable">
<thead>
<tr>
<th>Player Name</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Krack</td>
<td id="7" class="level">7</td>
</tr>
<tr>
<td>Lively</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Bamon Williams</td>
<td id="6" class="level">6</td>
</tr>
<tr>
<td>Sinister Char</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Senior BoomBox</td>
<td id="5" class="level">5</td>
</tr>
<tr>
<td>Blitzking</td>
<td id="4" class="level">4</td>
</tr>
<tr>
<td>Hadooooken</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Jumpman2392</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>ALEC*</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>Frokido</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>B. McOxbig</td>
<td id="2" class="level">2</td>
</tr>
<tr>
<td>[MES] Koko</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>PinkStrank</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>papa von</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Nuski</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>LunchBoxes</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>Grenade65</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>[MGS]TOAD</td>
<td id="1" class="level">1</td>
</tr>
<tr>
<td>NoahS</td>
<td id="1" class="level">1</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>


Just replace line 3 with this..
$(document).ready(function()
{
$("tbody td").each(function()
{
var findID =$(this).attr('id');
var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
function ReplaceCellContent(findID, replace)
{
return $("tbody tr td.level:contains('" + findID + "')").html(replace);
}
var myStringArray = [1,2,3,4,5,6,7];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
ReplaceCellContent(findID, replace);
}
});
});


Hi you just add jQuery and try this way
<script src="jquery-2.2.1.min.js"></script>
<script>
$('table tr td:nth-child(2)').each(function() {
var id =$(this).attr('id');
$(this).html('<img src="../img/CL'+id+'.png" alt="">')
});
</script>

Related

Grab every TD then format it to currency

i'm pretty new to JS and after searching through the web, docs, friends and another questions here on stackoverflow I've gotten until this point. Now I can't get pass it.
$(document).ready(function() {
var $table = $("table.valores");
if ($table.length > 0) {
var ValorTh = $("th.header:contains('Valor')");
var ValorColumnIndex = $(ValorTh).index();
var Valor_rows = $($table).find('tr');
$(Valor_rows).each(function() {
$(this).find('td').eq(ValorColumnIndex).toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>
I can't get the following to work and properly format the td's value :C
toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});

You need to actually set the content of the tds. Now, you don't change the content of the elements. Try this:
$(document).ready(function() {
var $table = $("table.valores");
if ($table.length > 0) {
var ValorTh = $("th.header:contains('Valor')");
var ValorColumnIndex = $(ValorTh).index();
var Valor_rows = $($table).find('tr');
$(Valor_rows).each(function() {
var $td = $(this).find('td').eq(ValorColumnIndex);
var formatted = Number($td.text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'});
$td.text(formatted); // <-- here, you need to set the value
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>

It's because toLocaleString is a prototype of Number and not string
$(document).ready(function() {
var $table = $("table.valores tbody");
$table.find("td").each(function(i,el){
try{
$(el).text(parseFloat($(el).text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'}));
}catch(e){
//not a number
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>

HTML Table : addition of value from one column(each row) and 2nd column and dispaly it on third column

(Table will be fetched from database so it will be having N number of rows)
I could get the result on console using 'td:nth-child(7)' but I want in on change of 'td:nth-child(5)' or 'td:nth-child(6)'
Here i am getting console value but cant get it in column text
http://jsfiddle.net/adwaitrao/s78y031x/11/
$(".btn").click(function() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>

You mean
function show() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
}
$(".btn").on("click",show);
$("[contenteditable]").on("input",show)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>

remove duplicate row data with jquery

<head>
<script src= "http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<table width="779" border="5" id="test">
<tr class="tablerow">
<td>ee</td>
<td>11</td>
<td>test</td>
<td>3</td>
<td>15974079
</tr>
<tr>
<td>ww1</td>
<td>hi</td>
<td>test2</td>
<td>d</td>
<td>15859779
</tr>
<tr class="tablerow">
<td>ww2</td>
<td>hi</td>
<td>test2</td>
<td>t </td>
<td>15974386</td>
</tr>
<tr>
<td>ww2</td>
<td>hi</td>
<td>test4</td>
<td>e</td>
<td>15974386</td>
</tr>
<tr>
<td>ww4</td>
<td>hi</td>
<td>test5</td>
<td>d</td>
<td>15974652</td>
</tr>
<tr>
<td>sssd</td>
<td>fgdg</td>
<td>test6</td>
<td>dzz</td>
<td>15974652</td>
</tr>
<tr>
<td>sssd</td>
<td>d</td>
<td>test7</td>
<td>d</td>
<td>15974652</td>
</tr>
</table>
<script>
var arr = $("#test tr");
$.each(arr, function(i, item) {
var currIndex = $("#test tr").eq(i);
var matchText = currIndex.children("td").eq(2).text();
$(this).nextAll().each(function(i, inItem) {
if(matchText===$(this).children("td").eq(2).text()) {
$(this).remove();
}
});
});
</script>
</body>maybe is duplicate question but i tried many links and couldn't get my answer.
I need to remove duplicate row base on third column, not first one
use eq instead first, but its not work probably,actually in very small table works but when the number or rows and columns get big its doesn't work
for example:
doesn't display forth row even not duplicate when i choose eq(4)or eq(2)
in row "ww4"
i checked this one
but its only work with first column
i tried this one too but that one is check all column in row not only base on one columns i need check only value of third row
<head>
<script src= "http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<table width="779" border="5" id="test">
<tr class="tablerow">
<td>ee
<td>11
<td>test
<td>
<td>15974079 </tr>
<tr>
<td>ww1
<td>hi
<td>test2
<td>
<td>15859779 </tr>
<tr class="tablerow">
<td>ww2
<td>hi
<td>test2
<td>
<td>15974386 </tr>
<tr>
<td>ww2
s<td>hi
<td>test4
<td>
<td>15974386 </tr>
<tr>
<td>ww4
<td>hi
<td>test5
<td>
<td>15974652 </tr>
<tr>
<td>sssd
<td>fgdg
<td>test6
<td>dzz
<td>15974652
</tr>
<tr>
<td>sssd
<td>
<td>test7
<td>
<td>15974652</tr>
</table>
<script>
var arr = $("#test tr");
$.each(arr, function(i, item) {
var currIndex = $("#test tr").eq(i);
var matchText = currIndex.children("td").eq(2).text();
$(this).nextAll().each(function(i, inItem) {
if(matchText===$(this).children("td").eq(2).text()) {
$(this).remove();
}
});
});
</script>
</body>

try this
var seen = {};
$('table tr').each(function() {
var txt = $(this).children("td:eq(2)").text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
http://jsfiddle.net/VbUxd/440/

add sum of the a table with multiple header

I have drupal view that generate one table split to multiple table thead and tbody, I need to sum the total of the columns and rows per tbody and not for all the table
I have this code, see code here
HTML
<table id="sum_table" width="300" border="1">
<thead>
<tr class="titlerow">
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
</table>
CSS
#sum_table {
white-space: nowrap;
}
#sum_table td {
padding: 5px 10px;
}
JavaScript in onLoad
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
How can I sum total after every category?
Thanks a lot

Here is a FIDDLE that does most of what you want.
I just saw your comment about the totals after every tbody...I'll have to work on it a bit more. Still doable.
JS
var totrow = 0, totcol=0; //setting totalsforrow and totalsforcolumns variables to zero
$('.numrow').each( function(){ //for each of the rows with class='numrow'
for(var n=1; n<5; n++) //do a loop four times for the right column totals
{
totrow = totrow + parseInt( $(this).children("td:eq("+ n +")").text() );
} //grab the values of each of the four tds and add them together
$( $(this).children('td:eq(5)') ).html(totrow); //put the summed value in the 'total' td
totrow = 0; // reset the value for the next "each .numrow"
});
for(var m = 1; m < 5; m++) //for loop for four column totals
{
$('.numrow').each( function(){ // for each of the rows with class .numrow
totcol = totcol + parseInt($(this).children("td:eq("+ m +")").text() );//add up values
console.log(totcol); // just a view of the totcol printed to the console log
});
$( "#sum_table tr:eq(11) td:eq(" + m + ")" ).html( 'Col total: ' + totcol );//put total at bottom of column
totcol = 0; //reset total to get read for the next loop
}
Edit: Here's the update FIDDLE. It's brute-force, inelegant, but it works.

jQuery problems with parent().remove()

I am trying to clone and remove a table with jQuery, without success.
Here is an example, the table I want to operate:
<table>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
<tr>
<td colspan="3">Dummy1</td>
<td colspan="3">Dummy2</td>
</tr>
<tr>
<td colspan="2"><input name="aperf_cursos[]" type="text" /></td>
<td colspan="2"><input name="aperf_entidades[]" type="text" /></td>
<td colspan="2"><img src="./images/add.gif" /><img src="./images/delete.gif" /></td>
</tr>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
</table>
Now, the javascript functions add() and remove():
function add(o){
var o = $(o);
var tr = o.parent().parent().parent();
tr.after(tr.clone());
tr.find('.adicionar').remove();
tr.find('.remover').show();
tr.next().find('input, select').val('');
tr.next().find('.remover').hide();
}
function remove(o){
var o = $(o);
o.parent().parent().parent().remove();
}
add(this) works perfectly, but the remove(this) is not working, it removes just my "delete.gif" image. What am I doing wrong please?

Look at the jsFiddle.
I used jQuery for what you need.
<table>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
<tr>
<td colspan="3">Dummy1</td>
<td colspan="3">Dummy2</td>
</tr>
<tr>
<td colspan="2"><input name="aperf_cursos[]" type="text" /></td>
<td colspan="2"><input name="aperf_entidades[]" type="text" /></td>
<td colspan="2">AddDelete</td>
</tr>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
</table>
$(function() {
$(document).on('click', '.adicionar', function(event){
var o = $(event.target);
var tr = o.closest('table');
tr.after(tr.clone());
tr.find('.adicionar').remove();
tr.find('.remover').show();
tr.next().find('input, select').val('');
tr.next().find('.remover').hide();
});
$(document).on('click', '.remover', function(event){
var o = $(event.target);
var table = $(o.closest('table'));
table.remove();
});
});

Instead of this parent.parent.parent madness (it's madness, yes it is) why don't you use
element.closest("tr")
to find the row it's in?
This approach will work consistently.

Categories

Resources