Develop Reference

JavaScript: How to to update the value html table cell when data in local storage is updated?

I've a separate javascript code which is fetching data from api and inserting in browsers localStorage.
API is fetching ETA data and saving in localStorage as id_ETA(e.g 12342_ETA) key.
When the values in local storage gets updated then my html table ETA column values should also get updated without refreshing the page.
Right now I need to refresh the entire page in order to view the updated ETA in the html.
HTML Table:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
<script>
var data = getPlanData();
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
for(var i=0;i<data.length;i++){
document.write("<tr>");
document.write("<td>"+data[i]['id']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
document.write("<td>"+data[i]['departure']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
if (localStorage.getItem(data[i]['id']+'_ETA'))
{
document.write("<td>"+localStorage.getItem(data[i]['id']+'_ETA')+"</td>");
}
else
{
document.write("<td>-</td>");
}
document.write("</tr>");
</script>
</tbody>
</table>
</div>
getPlanData():
function getPlanData() {
localData = localStorage.getItem('plan');
result = csvToJSON(localData);
return result;
}
Note: ETA is coming from separate API
Is there a way to update the ETA column when there is new ETA value in localStorage without refreshing the page?

Assuming getPlanData() does the writing to localStorage, you need to do two things
Don't use document.write, certainly not after load since it wipes the page
save to localStorage in getPlanData() AND
call this update with the data in the getPlanData function - this script can be copied to the head of the document inside script tags and called as update(data)
const update = data => {
const html = data.map(item => (
`<tr>
<td>${item.id}</td>
<td>${item.arrival}</td>
<td>${item.departure}</td>
<td>${item.arrival}</td>
<td>${localStorage.getItem(item.id+"_ETA") || "-"}</td>
</tr>`));
document.querySelector(".table tbody").innerHTML=html.join("")
}
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
If you post an example of your data, I am sure we can find a better way to get the ETA than localStorage.getItem(item.id+"_ETA")
UPDATE: You CAN do
var data = getPlanData();
update(data)

how to send a html table rows to controller action from jquery function

i am new to mvc so please help
please see the fiddle https://jsfiddle.net/shaswatatripathy/9d0oknyt/2/
here i have a table and I have to write a jquery function which will get all the rows which have status as modified and send data to controller action and access this data to create datatable in controller action
the table is dynamic -many rows can come up there so need a jquery function which will be invoked on a button click and get rows details with status modified
html
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>us</td>
<td>male</td>
<td>static</td>
</tr>
<tr>
<td>joana</td>
<td>washington</td>
<td>female</td>
<td>static</td>
</tr>
<tr>
<td>steve</td>
<td>belgium</td>
<td>male</td>
<td>modified</td>
</tr>
<tr>
<td>jimmy</td>
<td>angola</td>
<td>male</td>
<td>modified</td>
</tr>
<tr>
<td>lisa</td>
<td>india</td>
<td>female</td>
<td>modified</td>
</tr>
</tbody>
</table>
<br />
<input type="button" onclick="sendDetailsToControllerAction()" value="get details"/>
css
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
i can use jquery ajax method to send data to my controller action
server side
public actionResult GetDetails()
{
return view();
}
how to get details of every row with status modified and send it controller .
table header names and column names in my data table which i will create in action will be different .
i dont need that much help creating datatable out of data , but dont know how to send that data and get it

Using below function you will be able to get "modified" rows and save those row in array and then you can use $.ajax to call your Action in controller
<script type="text/javascript">
function sendDetailsToControllerAction() {
var tableData = document.getElementById('mytable');
var numberOfRows = tableData.rows.length;
for (var i = 1; i < numberOfRows; i += 1) {
var row = tableData.rows[i];
if (row.cells[3].innerText == 'modified') {
//Rows which have modified status
console.log(row)
}
}
}
</script>

BIRT how to get table name?

In my report design's layout I have a label, table and HTML button.
How do I get values from tables, labels, etc. using the HTML button's OnClick event?
The table and label can't be accessed easily using "elementname".getValue(); Am I missing something?
Thanks.

Alright, this solution can be modified to how your actual table structure looks like, and what actual information you need. You can do this many different ways, but this solution utilizes jQuery to get the label element and also the 'td' cells from a Table and Twitter Bootstrap for styling. You can see a jsFiddle here that I made to visualize this. If it doesn't fit your needs, I would suggest looking at the jQuery API to modify how exactly you should get the data you need.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<label id="label">This is my Table</label>
<table class="table table-striped">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
<button type="button" id="getInfo" class="btn btn-primary">Get Info</button>
<br/>
<p>Your Results Object once you hit Get Info button</p>
<div id="results"></div>
<!-- Get jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
This is the Javascript:
// This solution uses jQuery
// A $( document ).ready() block.
$( document ).ready(function() {
// declares an object literal named 'results' to save future results
// declares an array literal named 'tableData' to save table data
var results = {},
tableData = [];
// this executes once you click
// the HTML button with ID '#getInfo'
$('#getInfo').click(function() {
//loop through each 'td' cell which has information
$('td').each(function() {
var value = $(this).text();
tableData.push(value);
});
// assign the label to object 'results' with property label
results.label = $('#label').text();
results.tableData = tableData;
document.getElementById("results").innerHTML =
JSON.stringify(results);
});
});

How to delete all rows in a footable?

I have a footable that I need to clean. I mean, I need to delete all rows in the footable. Is there any footable function to do that? Or do I need to delete rows one by one?
I tried to reinitialize the table doing this:
$('.footable').footable();
I also have tried to iterate between the rows like this:
var footable = $('table').data('footable');
//This is the problem I don´t know how to get first row in the table.
var row = ??????.parents('tr:first');
var next=row.next();
for (var i=0; i<long-1; i++){
footable.removeRow(next);
next=row.next();
}
footable.removeRow(row);
And my corresponding html source code:
<table class="footable footable-loaded">
<thead>
<tr>
<th>Cantidad</th>
<th>Producto</th>
<th>Precio</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th id="total">19.5</th>
<th></th>
</tr>
</tfoot>
</table>

You can delete by removeRows() function:
function removeRows(){
$(".footable>tbody>tr").each(function(index, elem){
$(elem).remove();
});
}
DEMO

Try this one
footable.rows.load([])

How do I use data returned from PHP to build out an HTML table?

I have a php file that is reaching out and touching a mongo db and building a bunch of table tags. When I replace the script tag code below with the php code it works fine and builds out the table.
When I try to get the php results from the called page I manage to get the table text into the data variable ... if I alert it I see all the table tags and data that is generated from my .php page ... but I'm not sure how to embed that code inline in the HTML right after the th tags ... if I do a document.write(data) inside the script it seems to overwrite the whole page with just the data that was generated from the .php page ... it doesn't append it after the th row. Thank you in advance for any advice.
<table class="table table-striped table-hover">
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
alert(data);
});
</script>
</table>
And this is returned by the php script
<tr><td>BACODA</td><td>Kristi Smith</td><td>211.444.2222</td>

I think the script tag belong outside of the table.
And using the tbody thead will help you to differentiate the static (heading) and dynamic (from ajax) content.
<table>
<thead>
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody id="to_fill">
</tbody>
</table>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
$("#to_fill").html(data_from_ajax);
});
</script>

Try this
<table class="table table-striped table-hover">
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
<tbody id="tablebody"></tbody>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
$('#tablebody').html(data);
alert(data);
});
</script>
</table>

You need to add the html content to a container using javascript.
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr id="myRow"></tr>
</table>
<script>
$.get('build-agency-table.php', function(data) {
$("#myRow").html(data); //Add the html content into "myRow"
});
</script>