With a system that I use you can create custom fields. These fields all have the same html and css. Now I would like to get the value td where the th is week.
Now I use:
var week = $(this).find('td.bug-custom-field:last').text();
Which works but then I have to make sure it always is the last field. Is there a better way of doing this?
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
Var 1:
var week=0;
$('table tr td').each(function(){
if($(this).prev().text()=='Week'){
week=parseInt($(this).text(), 10);
}
});
console.log(week);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
Var 2:
var week = $('table').find('td.bug-custom-field:last').text();
console.log(week);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
You already have most of the details you need. Once you have the th the most robust solution is to go up to the row and then use find to find the td. The alternative is a simple .next() but is more likely to break if the layout changes.
var th = $("th.bug-custom-field.category:contains('Week')")
var row = $(th).closest("tr");
var week = $(row).find('td.bug-custom-field:last').text();
var weekTH = $("th.bug-custom-field.category:contains('Week')")
var weekTR = $(weekTH).closest("tr");
var weekTD = $(weekTR).find('td.bug-custom-field:last');
var week = $(weekTD).text();
console.log(week);
th { text-align:left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
Related
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>
How can I count td in each row, It should say row 1 have two td and row 3 have one td.
I need to count td per row(tr)
$(function() {
$('.Create-New-Order').click(function() {
var total = $('#mytbl td').length;
alert('tr count = ' + total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
You need to loop over each row and then get the number of cells with $(this).find('td').length:
$('.Create-New-Order').click(function() {
var total = $('#mytbl tr').each(function() {
console.log($(this).find('td').length)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
This is easy first get all rows the loop throw each and count the td.
See below
$(function() {
$('.Create-New-Order').click(function() {
var trs=document.querySelectorAll("#mytbl tr")
trs.forEach(function(tr){
console.log(tr.querySelectorAll("td").length)
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
I searching a solution for give the running sun to a editable html table, like a spreadsheet:
Hi here is a basic example of what you want using :
The HTML content editable property.
A css class to append a focusout event to the table cell.
A simple loop to sum all values when one value changes.
$('#tbodyTest >tr').on('focusout', 'td.editable', (e) => {
let target = $(e.target),
parent_row = $(e.target).closest('tr'),
previous_row = parent_row.prev();
setTimeout(() => {
if (!isNaN(target.text())) {
$('#tbodyTest').children('tr').each((i,e)=>{
$(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
}else{
target.text("0");
parent_row.find('td').last().text("0");
$('#tbodyTest').children('tr').each((i,e)=>{
$(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
}
})
})
.editable {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test" border=1>
<thead>
<th>date</th>
<th>desc</th>
<th>cost</th>
<th>running sum</th>
</thead>
<tbody id="tbodyTest">
<tr>
<td>01-01-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'>1000</td>
<td>1000</td>
</tr>
<tr>
<td>01-02-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
<tr>
<td>01-03-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
<tr>
<td>01-04-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
</tbody>
</table>
Keep in mind that this is a basic example and you will probably add more stuff according to your needs since your ask is simple as well.
Hope it helps
Anyone still looking to this.
$('tr').each(function(index, el) {
if (index == 0) {
$(this).find('.running-balance').text($(this).find('.amount').text());
} else {
var prevRow = $(this).prev();
var prevBalance = Number(prevRow.find('.running-balance').text());
var currentAmount = Number($(this).find('.amount').text());
var newBalance = prevBalance + currentAmount;
$(this).find('.running-balance').text(newBalance.toFixed(2));
}
});
td,
th {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Description</th>
<th>Amount</th>
<th>Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td class="amount">100</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>b</td>
<td class="amount">150</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>c</td>
<td class="amount">125</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>d</td>
<td class="amount">205</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>e</td>
<td class="amount">50</td>
<td class="running-balance"></td>
</tr>
</tbody>
</table>
I have the following HTML. How can I fetch the contents of the TD which is under tr class="status_visible" in JavaScript?. I have highlighted the td that I am interested in the code below. There could be multiple status_visible rows. I am only interested in the first row.
There is no id, so I can't use getElementById(). (I also can't use jQuery)
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td> <!-- get this value -->
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>
Use document.querySelector() with this selector:
'tr.status_visible td:nth-child(n)'
… where n is the column of the td you're interested in (1-based).
For example, this will grab the text content of the first td of the tr having class "status_visible":
document.querySelector('tr.status_visible td:nth-child(1)').textContent
Snippet:
console.log(document.querySelector('tr.status_visible td:nth-child(1)').textContent);
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td>
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>
You could loop through all the td's and show the text content using .textContent like :
var tds = document.querySelectorAll('tr.status_visible td');
for (var i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
var tds = document.querySelectorAll('tr.status_visible td');
for (var i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td>
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>
I have an HTML TABLE:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?
Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle
You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>
In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle