How to check if multiple rows of cells are filled - javascript

I need to check all other cells in a table row to have a cell (there's a cell for each row, not one single cell) display either "entry missing" or "complete" automatically. Currently, I'm only able to make it work properly for the first row since I can only have it check the cells in the first row.
I've tried having the code iterate through the table, checking values of cells in the row with if statements and then either with the (this) function or using a ('#tdID') format.
I haven't been able to check any cell values in rows below the first when I don't use (this), but as far as I can tell, (this) only refers to the #DataEntryStatus id since it starts the function in the first line. Basically, I need something that works like (this) but with #Tool, #CutRef, and more td IDs.
$('#table_id #DataEntryStatus').each(function(){
if($('#Tool').text() =="")$(this).text("Entry missing");
else if($('#CutRef').text() =="")$(this).text("Entry missing");
else($(this).text("Complete"));
if($(this).text().toLowerCase() =="entry missing")$(this).css('background-color','#fcc');
if($(this).text().toLowerCase() =="complete")$(this).css('background-color','#af0');
});
And here is the table where the ids come from
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
<th style="vertical-align:bottom;">Cut Ref</th>
<th style="vertical-align:bottom;">Date</th>
<th style="vertical-align:bottom;">Coupon</th>
<th style="vertical-align:bottom;">Row</th>
<th style="vertical-align:bottom;">Axial</th>
<th style="vertical-align:bottom;">Ox Pocket</th>
<th style="vertical-align:bottom;">SM Pocket</th>
<th style="vertical-align:bottom;">Tray #</th>
<th style="vertical-align:bottom;">Angle</th>
<th style="vertical-align:bottom;">Probe</th>
</tr>
<tbody id="myTable">
{% for item in items %}
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus"><div>{{ item.DataEntryStatus }}</div></td>
<td id="Tool"><div>{{ item.Tool }}</div></td>
<td id="CutRef"><div>{{ item.CutRef }}</div></td>
<td id="CutDate"><div>{{ item.CutDate }}</div></td>
<td id="Coupon"><div>{{ item.Coupon }}</div></td>
<td id="Row"><div>{{ item.Row }}</div></td>
<td id="Axial"><div>{{ item.Axial }}</div></td>
<td id="OxPocket"><div>{{ item.OxPocket }}</div></td>
<td id="SmPocket"><div>{{ item.SmPocket }}</div></td>
<td id="TrayNum"><div>{{ item.TrayNum }}</div></td>
<td id="Angle"><div>{{ item.Angle }}</div></td>
<td id="Probe"><div>{{ item.Probe }}</div></td>
</tr>
{% endfor %}
</tbody>
</table>
I want it to check each row individually and identify which rows are filled with values and which aren't, but currently it only checks the cells of the first row and prints the same output for every status cell in later rows.

You can iterate each tr in the table directly and then every cell. Reference for the :gt pseudo selector
// Check each row in table
$('#table_id tbody tr').each(function() {
$row = $(this)
$status = $row.find('#DataEntryStatus');
// Iterate every cell, but skip the first two in each row
// (action and status cell). Be sure to update this value if you change
// the table structure
$row.find('td:gt(1) div').each(function() {
$status.text("Complete").css('background-color', '#af0');
if ($(this).text() == "") {
$status.text("Entry missing").css('background-color', '#fcc');
// The row is invalid, break from the each()
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
<th style="vertical-align:bottom;">Cut Ref</th>
<!-- Simplified for convenience -->
</tr>
<tbody id="myTable">
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus">
<div>DataEntryStatus</div>
</td>
<td id="Tool">
<div></div>
</td>
<td id="CutRef">
<div>CutRef 1</div>
</td>
<!-- Simplified for convenience -->
</tr>
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus">
<div>DataEntryStatus 2</div>
</td>
<td id="Tool">
<div>Tool 2</div>
</td>
<td id="CutRef">
<div>CutRef 2</div>
</td>
<!-- Simplified for convenience -->
</tr>
</tbody>
</table>

You can try this, Here I am getting each row, Then getting each cell/column of that row, Then checking for empty....
You can replace with any value in if instead of empty...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='myTable' border>
<tr>
<td>
Row1 Col1
</td>
<td>
Row1 Col2
</td>
</tr>
<tr>
<td>
Row2 Col1
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Row3 Col2
</td>
</tr>
</table>
<script>
$("#myTable tr").each(function(rowNum,row){
for(var i = 0; i < row.children.length; i++) {
if(row.children[i].innerHTML == ""){
row.children[i].innerHTML = "Entry Missing"; //Set text of current cell as 'Entry Missing'
}
}
});
</script>

Related

Unable to insert inner tr in a row

I'm trying to make a live NBA scores website using HTML, CSS, and JS.
I'm having trouble adding a inner tr under the game scores.
Here's what my table currently looks like:
Here's my current code JS and HTML:
(My current JS is building up the table and using innerHTML to modify the table under the tableData id)
else{
data += `<tr>
<td class = "left">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
}
<table>
<thead>
<tr>
<th style="width:40%; text-align:right;">Home</th>
<th style="width:10%;" colspan="2">Scores</th>
<th style="width:40%; text-align: left">Away</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
Here's what I want it to look like (although centered better) and the code I used to build the example:
<table>
<thead>
<tr>
<th width= 40% text-align= right;>Home</th>
<th width= 20%; colspan= "2">Scores</th>
<th width= 40%; text-align= left;>Away</th>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td rowspan="2">Celtics<img src=${item.team1Img}></td>
<td>50</td>
<td>65</td>
<td rowspan="2"><img src=${item.team2Img}>Washington Wizards</td>
</tr>
<tr>
<td colspan="2">3QR</td>
</tr>
</tbody>
</table>
Basically, I'd like the "4QR" to be directly under the scores and still on the same row as the team names.
Thanks in advance!
In your javascript template literal, you forgot to put the rowspan="2" and it's caused everything to shift over.
data += `<tr>
<td class = "left" rowspan="2">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right" rowspan="2"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
You'll notice your table as constructed is missing 2 cells. Once you "add" those two cells in with the "rowspan", it will all fit back into place.

table content editable event

Is there an event on table row content editable to get the value once the user press enter or the focus on edited cell has been loose. I'm just wondering if the user can modify on cell as much as he want and when he is done there is something like a button that apply the changes and do the one time update query on the table.
Currently I have table like this:
<table class="sortable" border="1" id="myTable" >
<thead>
<tr>
<th>ID No</th>
<th>Sec ID</th>
<th>Employee</th>
<th>Dept</th>
<th>Code</th>
<th>Train</th>
<th>Cert</th>
<th>Prog</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach (var item in details)
{
<tr>
<td>#item.ID</td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.secID</td>
<td>#item.name </td>
<td>#item.dept </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.Code </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.train </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.cert </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.prog </td>
<td>#item.date </td>
</tr>
}
</tbody>
</table>
I just want to collect the edited rows and store it on variable or list and pass it to my update query via ajax.
Any suggestions/comments TIA.
You could just use this on change event handler:
document.getElementById("myTable").addEventListener("change", function(event) {
//do whatever
})

How to select the previous sibling of last cell which is not null from table, using JQuery

I have a table with following rows and cells:
<table id='table1'>
<tr id='row1'>
<th>index</th>
<th>Product</th>
<th>Description</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='product'>Apples</td>
<td name='description'>fruits</td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='product'>Bananas</td>
<td name='description'>fruits</td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='product'>Carrots</td>
<td name='description'>vegetables</td>
</tr>
<tr id='row5' name='row'>
<td name='index'>4</td>
<td name='product'></td>
<td name='description'></td>
</tr>
</table>
I would like to select the index of the tr which is in this case is the last td and does not have any data under Product Column. I have tried following JQuery function but they do not work:
Sibling method
var lastrow=$('td[name=product]:not(:empty):last ~ [name=index]').html();
and also
previous method
var lastrow=$('td[name=product]:not(:empty):last').prev().html();
But I cannot get the index number of last tr which has no data in its Product heading. In other words I am unable to get the td with name=index in the tr which does not have any data in td with name=product. Does anyone know what am I doing wrong or how can I achieve what I am looking for?
Find the not empty cell and select the previous cell from it:
var lastCellBeforeCellWithNoData = $('td[name=product]:not(:empty):last').prev('[name=index]');
console.log(lastCellBeforeCellWithNoData.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
<tr id='row1'>
<th>index</th>
<th>Product</th>
<th>Description</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='product'>Apples</td>
<td name='description'>fruits</td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='product'>Bananas</td>
<td name='description'>fruits</td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='product'>Carrots</td>
<td name='description'>vegetables</td>
</tr>
<tr id='row5' name='row'>
<td name='index'>4</td>
<td name='product'></td>
<td name='description'></td>
</tr>
</table>
If you want to get the tr index use this
var trIndex = $('td[name=product]:empty').parent().index();
Else if you want to the select the name="index" use this one
var nameIndex = $('td[name=product]:empty').prev();
var trIndex = $('td[name=product]:empty').parent().index();
var nameIndex = $('td[name=product]:empty').prev().text();
console.log('Tr Index->'+trIndex, ', name="index"->'+nameIndex);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
<tr id='row1'>
<th>index</th>
<th>Product</th>
<th>Description</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='product'>Apples</td>
<td name='description'>fruits</td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='product'>Bananas</td>
<td name='description'>fruits</td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='product'>Carrots</td>
<td name='description'>vegetables</td>
</tr>
<tr id='row5' name='row'>
<td name='index'>4</td>
<td name='product'></td>
<td name='description'></td>
</tr>
</table>
After spending some time understanding your question, I think that you are trying to accomplish the following: Returning the last cell's index where the "Product" column is not empty (note please try not to describe it as NULL as it is a very specific term for db storage). And also, I would think that it would be better that if you can do it using other language such as PHP to compare whether the retrieved value is NULL (as NULL is different from empty space "", try to look at the previous discussion here)
However to perform what you would like to achieve I have written a short code as follows.
var tr = $('#table1 tr');
var index = 0;
for(i = tr.length - 1; i > 0; i--) {
if($(tr[i]).find('td:eq(1)').html() != "") {
index = i;
break;
}
}
console.log(index);
Basically what it does is that it will find the table's tr and compare line by line to check the 2nd column td:eq(1) to see whether the raw HTML value is empty (sorry but I would like to emphsize again it is not a very good comparison method) and return the value.
I have not optimize the code based on the performance but I think it should be suffice in achieving what you would like to do.
Hope this helps.
Regards.

Calculating sum of td classes using js or jQuery

I have a dropdown select menu with various options (i.e. 5, 10, 15, 20...) that represents # of computers. The default select menu value is 5. I am using some js to multiply the dropdown selection by an amount (i.e. 10) and populates a table td with a class of .price-1. So, for example if the user leaves the default selection of 5, the calculated value of .price-1 is 50.
This is working fine. 
However, I then need to sum .price-1 with a few other <td> classes (i.e. .price-2, .price-3, .price-4...) to get a grand total in $ values that shows in #result.
How can I use js or jQuery to sum these td classes to get the grand total?
Below is my html of my table I need to sum.
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"> </td>
</tr>
</tbody>
</table>
Get all td elements either using attribute value contains selector or by second td element of tr using :nth-child(). Now iterate over them using each() method and get sum using the text inside.
var sum = 0;
$('td[class*="price-"]').each(function() {
sum += Number($(this).text()) || 0;
});
$('#result').text(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
With Array#reduce method as #rayon suggested.
$('#result').text([].reduce.call($('td[class*="price-"]'), function(sum, ele) {
return sum + (Number($(ele).text()) || 0);
}, 0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
jQuery Object has a direct attribute referring to the number of the matched elements.
var sum = $('td[class*="price-"]').length;
$('#result').text(sum);

Adding few rows on single click and deleting the added rows on double click

Introduction:
I am new to JQuery and have a requirement wherein I need to implement a scenario of adding few rows on single click and deleting the added rows on double click.
Complete Scenario:
I have two tables in a page i.e. top parent table and below child table.
There are rows in parent table which needs to be clicked or double clicked.
Scenarios:
1)First Requirement is that on each single click on any of the rows of parent table, 5 rows should be added in the child table below i.e if there are 5 single clicks on row number 3 then total 25 rows should be added in the child table.
2)Second Requirement is that on each double click on any of the rows of parent table, all corresponding rows which were added on single click on the parent table's row should be deleted i.e. if row number 3 is double clicked all the 25 rows that were added corresponding to row number 3, in child table should be deleted.
Would need help in resolving the same.
HTML Code:
<div style="overflow: scroll; width: 1455px;height:175px;" class="tree">
<table class="boldtable" id="packagelisttable" style="width: 100%">
<caption>
<b style="font-size: 20px">Package List</b>
</caption>
<tr class="tableHeaderRow">
<th class="columnHeader">Distributable Name</th>
<th class="columnHeader">Version</th>
<th class="columnHeader">Modality</th>
<th class="columnHeader">Machine Name</th>
<th class="columnHeader">Machine Type</th>
<th class="columnHeader">Machine Version</th>
<th class="columnHeader">Machine Version2</th>
<th class="columnHeader">Last Registered By </th>
<th class="columnHeader">Last Registered On </th>
</tr>
<tr class="lightData">
<td class="columnHeader">Installer1</td>
<td class="columnHeader">1</td>
<td class="columnHeader">CT1</td>
<td class="columnHeader">ABCD</td>
<td class="columnHeader">Dell</td>
<td class="columnHeader">1</td>
<td class="columnHeader">1</td>
<td class="columnHeader">User </td>
<td class="columnHeader">11-10-2014 </td>
</tr>
<tr class="darkData">
<td class="columnHeader">Installer2</td>
<td class="columnHeader">1</td>
<td class="columnHeader">CT1</td>
<td class="columnHeader">PQRS</td>
<td class="columnHeader">Dell</td>
<td class="columnHeader">1</td>
<td class="columnHeader">1</td>
<td class="columnHeader">User </td>
<td class="columnHeader">14-10-2014 </td>
</tr>
</table>
</div>
</div>
$( "#buttonid" ).click(function() {
//your code
});
$( "#buttonid" ).dblclick(function() {
//your code
});

Categories