Object property into table jQuery

Object property into table jQuery - javascript

I have the following table here
<table>
<thead>
<tr>
<th>Loan Type</th>
<th>Amount Borrowed</th>
<th>Current Payment</th>
<th>Current Term</th>
<th>Total Cost of Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
and I have a object which has the following properties Object {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306} (all copied from Chrome console)
How would I do something like this <td>object.balance</td> I just need the single value of a property. I've tried the following $(object.balance)appendTo('tr') but nothing seems to be working.

Use this for add balance to all td elements
$('td').html(object.balance);
To first td
$('td').first().html(object.balance);

Several ways to do this. Looks like you are using jQuery.
<table>
<thead>
<tr>
<th>Loan Type</th>
<th>Amount Borrowed</th>
<th>Current Payment</th>
<th>Current Term</th>
<th>Total Cost of Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td id="balancethingy">asdf</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var myObject = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306};
$('#balancethingy').text = myObject.balance ;
</script>

What this will do is select the 'td' item you specify in specfic_tr_number and set it's value to the object's value specified. Goodluck.
<table>
<thead>
<tr>
<th>Loan Type</th>
<th>Amount Borrowed</th>
<th>Current Payment</th>
<th>Current Term</th>
<th>Total Cost of Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var myObject = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306};
$('tbody tr').find('td:nth-child(specfic_tr_number)').html(myObject.balance);
</script>

You need to create dynically td also.I am creating td dynically acc to number of field in the object.I wrote the code in fsfiddle.Link is given below:-
var obj = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306}
for (var i in obj) {
var tdtag = document.createElement('td')
tdtag.innerHTML = obj[i]
var rowid = document.getElementById('rowId')
rowid.appendChild(tdtag)
}

Related

JQuery returning number of children more than what exist

So the problem I'm having is that my jQuery code is somehow detecting more children than there exist in for an element. I'll do my best to explain what I'm trying to do.
I have a table in the following format:
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>
What I'm doing is using JS to populate the td's with the relative information if it exists in the database. If it doesn't I'm removing the tr altogether so it doesn't show up at all on the page (rather than showing up with just heading and no information). The populating part is working seamlessly. However, removing the sections which have no data is not working for only the section 'duration header'.
The JS code I wrote to achieve this is:
jQuery("th").each(function(item){
var idAttribute = jQuery(this).attr("id");
var result = data[idAttribute];
if(result == undefined || result.length == 0) {
// Remove any element that has no data. Skip over the section headers.
if (idAttribute !== undefined)
jQuery(this).parent().remove();
return;
}
// Remove any duration information with a zero value.
if (isDurationAttr(idAttribute))
{
if (result === 0)
{
jQuery(this).parent().remove();
return;
}
}
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
var tree = jQuery(".durationHeader").map(function(){
return this.innerHTML;
}).get().join(", ");
console.log(tree);
});
While debugging this, I tried to print out the number of children in the last part and then the html that is in the durationHeader section.
the method
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
should essentially get rid of the durationHeader section. However, when I print out the html, its showing all the elements. For some very weird reason, this is not happening for the first tbody, which is also a class tableHeadings. When I printed out the children in durationHeader, it says that the element has 11 children. It should have only 1, which is the heading of that section.
Can someone please look into this and tell me what is going on? I've been stuck on this for 2 days now.

Look closely your first tbody has 14 tr elements while the second tbody has 11. The code is working fine. Tell me if that's not what you were looking for.
Edit: I think I know what you're not understanding: jQuery('.tableHeadings') contains two elements, the two elements with class name .tableHeadings. So when you apply each you're not looping through each child of the table portion, you're looping through each table portion (here there are two). Therefore accessing children will get you the tr elements instead of the child of the first tr: th.
jQuery('.tableHeadings').each(function() {
console.log(jQuery(this).children().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>

Get the contents of a td without an "id" attribute

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>

How to limit table search to specific rows that contain specific text in a column

I am searching in my table with a function:
//search field for table
$("#search_field").keyup(function() {
var value = this.value;
$("#menu_table").find("tr").each(function(index) {
if (index === 0) return;
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});});
Fourth coulmn of data is Type i.e. Chicken, Kebabs etc.
I want to search only in those rows whose 4th column contains ('Chicken'). It should not search in rows whose Type is 'Kebabs'. The code above is searching in all rows.

You can filter the rows and apply your code only to the filtered row like in:
$('#menu_table tr:gt(0)').filter(function(idx, ele) {
return $(ele).find('td:eq(3)').text() == 'Chicken';
}).each(function(index, ele) {
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});
Another way to filter is based on :nth-child() Selector:
$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});
$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
var id = $(this).find("td:first").text();
var typ = $(this).find("td:eq(3)").text();
console.log('ID:' + id + ' Type: ' + typ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<thead>
<tr>
<th class="centerText" data-field="item_id">ID</th>
<th class="centerText" data-field="name">Name</th>
<th class="centerText" data-field="price">Price</th>
<th class="centerText" data-field="type">Type</th>
<th class="centerText" data-field="image">Image</th>
<th class="centerText" data-field="description">Description</th>
<th class="centerText" data-field="cooking">Instructions</th>
<th class="centerText" data-field="ingredients">Ingredients</th>
<th class="centerText" data-field="warnings">Warnings</th>
<th class="centerText" data-field="Storage">Storage</th>
<th class="centerText" data-field="Size">Size</th>
<th class="centerText" data-field="edit">Edit</th>
<th class="centerText" data-field="delete">Delete</th>
</tr>
</thead>
<tbody style="text-align:center;" id="menu_table_data">
<tr>
<td>1</td>
<td>name</td>
<td>price</td>
<td>type</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>2</td>
<td>name</td>
<td>price</td>
<td>type</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>3</td>
<td>name</td>
<td>price</td>
<td>not Chicken</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>4</td>
<td>name</td>
<td>price</td>
<td>Chicken</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
</tbody>
</table>

Use jQuery :contains(text) selector.
$("#menu_table").find("tr:contains('Chicken')").each(function(index) {
if($(this).children('td').eq(3).text() == "Chicken"){
/* Do something */
}
});
Working example: https://jsfiddle.net/kvvnjmup/4/
$('#menu_table').find('tr:contains("Chicken")').each(function(){
if($(this).children('td').eq(3).text() == "Chicken"){
alert($(this).prop('id'));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<tbody><tr id="1">
<td></td>
<td></td>
<td></td>
<td>Chicken</td>
<td></td>
</tr>
<tr id="2">
<td></td>
<td></td>
<td></td>
<td>Chicken</td>
<td></td>
</tr>
<tr id="3">
<td></td>
<td></td>
<td></td>
<td>pasta</td>
<td></td>
</tr>
<tr id="4">
<td></td>
<td></td>
<td>Chicken</td>
<td>pasta</td>
<td></td>
</tr>
</tbody>
</table>

Convert <td> elements into array with Javascript

My goal is to create one array and later on insert some data using .unshift method.
I want an array to contain td elements only and be created using JavaScript instead of jQuery. Is it possible?
Here's my table :
<table id="scorestable">
<tr>
<th>Type</th>
<th>Score</th>
<th>Score</th>
<th>Type</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
.....

simply use:
var elements = document.getElementById("scorestable").getElementsByTagName('td');
then you will have: elements[0] , elements[1] and etc..

<table id="scorestable">
<tr>
<th>Type</th>
<th>Score</th>
<th>Score</th>
<th>Type</th>
</tr>
<tr>
<td>33</td>
<td></td>
<td>6</td>
<td></td>
</tr>
</table>
<script>
window.onload = function(e) {
var arrayResult = [];
var tdList = Array.prototype.slice.call(document.getElementById("scorestable").getElementsByTagName('td'));
tdList.forEach(function logArrayElements(element, index, array) {
if (element.innerText && element.innerText != "undefined") {
arrayResult.unshift(element.innerText);
}
});
console.log(arrayResult);
}
</script>

javascript: NaN when getting average

So I followed this fiddle: http://jsfiddle.net/4h6w64d8/2/
but unfortunately when I tried the code the average is NaN.
In the fiddle even though a column has no value it will still calculate and display the average. However when I tried it, it will only display NaN.
This is my html:
<table id="scorecard_student" class="table table-striped table-bordered">
<thead>
<tr>
<th>Code </th>
<th>PO 1</th>
<th>PO 2</th>
<th>PO 3</th>
<th>PO 4</th>
<th>PO 5</th>
<th>PO 6</th>
<th>PO 7</th>
<th>PO 8</th>
<th>PO 9</th>
</tr>
</thead>
<tbody>
<tr>
<td width="7%">ICT117</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td></td>
<td>2.0</td>
<td></td>
<td></td>
<td>1.5</td>
</tr>
<tr>
<td width="7%">ICT118</td>
<td></td>
<td></td>
<td>2.0</td>
<td>2.0</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td>1.5</td>
</tr>
<tr>
<td width="7%">ICT110</td>
<td>3.0</td>
<td>2.0</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="7%">ICT111</td>
<td></td>
<td></td>
<td></td>
<td>2.0</td>
<td>2.0</td>
<td>2.0</td>
<td>1.5</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#FFF380">
<td>
<center>Average</center>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
My js:
<script type="text/javascript">
var table = document.getElementById('scorecard_student'),
rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'),
footer = table.getElementsByTagName('tfoot')[0];
for (var i = 1; i <= <? php echo $po_count; ?> ; i++) {
var sum = numOfValues = 0;
for (var j = 0, l = rows.length; j < l; j++) {
try {
sum += parseFloat(
rows[j].getElementsByTagName('td')[i]
.innerHTML
);
numOfValues++;
} catch (e) {}
}
var avg = sum / numOfValues;
footer.getElementsByTagName('td')[i]
.innerHTML = Math.round(avg * 100) / 100;
}
</script>
Update, I think I got it now.
if (rows[j].getElementsByTagName('td')[i].innerHTML != '') {
sum += parseFloat(
rows[j].getElementsByTagName('td')[i]
.innerHTML
) || 0;
numOfValues++;
}

In some cases you get blank text, you need to skip it:
sum += parseFloat(
rows[j].getElementsByTagName('td')[i]
.innerHTML
) || 0; //<--

Develop Reference

JavaScript is the programming language of the Web.

Object property into table jQuery - javascript

Use this for add balance to all td elements $('td').html(object.balance); To first td $('td').first().html(object.balance);

Related

JQuery returning number of children more than what exist

Get the contents of a td without an "id" attribute

How to limit table search to specific rows that contain specific text in a column

Convert <td> elements into array with Javascript

javascript: NaN when getting average

Categories

Resources