Read cell Contents Dynamic JS/Jquery table - javascript

I am using JS/Jquery to dynamically add rows to by Table. Here is a template that I found online:
<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
From what I gather, in order to ensure that the actual cell content values get passed on Post I need to assign them to hidden fields.
How do I read the actual contents of the cells.
I tried:
$("#submitForm").click(function(){
alert("submit Clicked");
$('#tblCustomers tfoot td').each(function() {
var cellText = $(this).html();
});
});
however, All I got was this as return value:
Can you let me know what I need to do to get actual value of cell.
I need to make a dynamic table/item list and i would like to send the list of items back to server for processing. Sort of like a purchase list etc..
BTW: the backend is Django 2.0
Thanks for your help.
Tanmay

Related

How to show message "No results found" for table research?

I'm doing a simply project on intellij with spring boot and i did a table with an input for the searches. What I want is to show a message whene the search fails and no results are found. How can I do it?
This is my table:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" class="table table-striped">
<thead class = "thead-dark">
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> show </td>
<td> add prescription </td>
</tr>
</tbody>
</table>
</div>
And this is the script I use for the research:
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () { //here #input textbox id
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function () { //here #table table body id
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
The question is, how can you do that in the templating engine you use. It's not really a Spring question, or HTML or JavaScript for that matter.
You should be able to check if allPatients is empty and then render something. If you use thymeleaf and want to do it server side:
<tr th:if="${#lists.isEmpty(allPatients)}">
<td>no patients found...</td>
</tr>
<tr th:each="patient : ${allPatients}">
...
If you want to do it in the JavaScript logic, you posted, which looks like it uses jQuery, do something like this:
after filtering the rows, check if the result is empty
if so, add another row to render the empty message, e.g.:
$('#mytable').append('<tr id="empty-message"><td>no patients found...</td></tr>');
if the result is not empty, remove #empty-message
Alternativley, you can always add the row, but use show() and hide() insteaf of append and remove.

How to take the Dynamic-table cell value in JavaScript

This is a table of one of my jsp page. I want to take the selected value of the column empId for a javascript method.
<table class="table table-bordered">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Casual Leave Balance</th>
<th>Annual Leave Balance</th>
<th>Sick Leave Balance</th>
</tr>
</thead>
<tbody>
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td><dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev></td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
</tbody>
</table>
my javascript code segment
function selectempId(emp){
alert(emp);
}
But It (onclick) doesn't work. There are only methods to get selected values of dynamic dropdowns. Please tell me how to do this.
Thank you.
<dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev>
You don't need ()
You can pass value to javascript. But I don't know the dev tag in html. I think it is div.
<td><div class="correct" name="empId" onclick="selectempId(${leavebalances.empId})"> ${leavebalances.empId}</div></td>
Or you can pass to td's onclick action.
<td onclick="selectempId(${leavebalances.empId})">${leavebalances.empId}</td>
Here, my problem was being unable to pass td's values to javascript function, because there were no unique id's assigned for required td tags (dynamic table). So I gave dynamic ids.
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td id ="${leavebalances.empId}" class="correct" name="empId" onclick="selectEmpId(this.id)">${leavebalances.empId}</td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
/////////////////////javascript function///////////////////////////////
function selectEmpId(val) {
alert(val);
}

How to get the count of checked rows of a table on a button click using jQuery?

I'm working with Asp .net MVC3 following is my table,
<table id="myIndiaTable">
<thead>
<tr>
<th>Select All<input type="checkbox" class="chkhead" onchange="Getchecked()"/></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>1</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>2</td>
<td>yyytd>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>3</td>
<td>zzz</td>
</tr>
</tbody>
</table>
<div class="btn">
<input type="button" name = "Submit" value ="Submit" onclick ="GetValues()"/>
</div>
When I click the submit button I have to get the count of selected rows count as an alert. How can I get this using jQuery?
USe :checked for getting the checked checkboxes,
$( ".chkdata:checked" ).length;
pure javascript
thi line ckbox = document.getElementsByClassName("chkdata"); will get all the element with class name chkdata return an array of element and then we loop through those element to check how many element are checked .if it is checked then we increment the counter otherwise continue to loop
ckbox = document.getElementsByClassName("chkdata");
count=0;
for(var i=0;i<ckbox.length;i++){
element = ckbox[i];
if(element.checked){
count++;
}
}
alert("Number : " + count);
You can get all the checked checkboxes with class chkdata inside the table myIndiaTable
function GetValues(){
alert($('#myIndiaTable .chkdata:checked').length)
}
to get only the checked checkboxs in the table use
$('#myIndiaTable').find("input[type='checkbox']:checked").length

Total Value in HTML Form Table from Select Menu

I have a simple HTML Form with one column having a select menu with 2 options: Moderate or High. I need to find all rows where the cell = "Moderate" and count the total of another cell in the same row, and repeat this for all rows where the cell = "High". Here's a JS Fiddle showing a sample completed table:
http://jsfiddle.net/8hn2H/
In this example the result for Total Moderate would be 1.6 and the result for Total High would be 8.7 (it's totalling the value in the Average Hours/Week column). The number of rows will not be fixed in advance - there could be 1 or more.
Here's the actual html for the form:
<div class="span8"><br>
<table id="activities" class="table table-bordered table-striped">
<thead>
<tr>
<th>Activity</th>
<th>Risk</th>
<th>Hours/Week</th>
<th>Weeks/Year</th>
<th>Average Hours/Week</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="Activity" id="Activity" type="text" value=""/></td>
<td><div class="controls">
<select id="Risk">
<option></option>
<option>Moderate</option>
<option>High</option>
</select>
</div></td>
<td><input class="span1" id="A1" type="text" value=""/></td>
<td><input class="span1" id="B1" type="text" value=""/></td>
<td><input class="span1" id="C1" type="text" value=""/></td>
<td><button class="btn">Delete Activity</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total Moderate</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total High</td>
<td></td>
</tr>
</tbody>
</table>
</div>
var moderateTotal = 0;
var highTotal = 0;
$("#activities").find("tr").each(function() {
var tr = $(this);
var level = tr.find("td:nth-child(2)").html();
var value = tr.find("td:nth-child(5)").html();
switch(level)
{
case "Moderate":
moderateTotal += value*1;
break;
case "High":
highTotal += value*1;
break;
}
});
$("#activities tr:last td:last").prev().html("High Total: " + highTotal);
$("#activities tr:last").prev().find("td:last").prev().html("Moderate Total: " + moderateTotal);
I use jQuery's .find() and .each() function to iterate over each row. I use find again to find the level and value (2nd and 5th columns) and a switch statement to add the value to the totals. I need to do value*1 to convert the string to an integer so it will add. Default behavior here is concatenate.
The last two lines set the value of the table cells. It'd be a lot easier if you could just give those a specific ID so you can just do $("moderateTotal").html() but since that wasn't given I used some jQuery selectors to do it.
Demo
There are a number of ways to attack this, but I'd strongly recommend that you consider jQuery DataTables. It has built in functionality for summing fields, sorting, filtering, etc and is MUCH easier than having to home-brew something. Plus, it looks far better than just a bare table with full Themeroller support.
Here's a simple example with a footer callback to do sums: http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html
Because all of the data in the table is fully available to you via API, it's easy to do math on it. You --could-- simply filter the table based on the the moderate or high flag and show only that data, allowing the user to modify that view on the fly.
And, if your data ever gets really long, it has paging and ajax loading options to improve the speed on the user's level.

Copy cell value from table to textbox

I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});​
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});​
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.

Categories