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);
});
});
Related
I have a table set up with the following headers. I have code set up to send ajax request to retrieve JSON data and brings up a dialog with a table when users clicks a button, and then I filter this data so it gives me a the filtered data back (e,g. Kevin). All the above is working good. Now I want to insert this data (Kevin) into the corresponding cell header (e.g. Name) and other data as well (Number->xxx-xxx-xxxx;address->xxx...etc). I want to do this so I make sure the data is inserted into the correct fields. I need to empty the row after user closes the dialog.
Javascript:
executeAPI("GetUserInfo.php", "name", callback); // this returns Kevin
function exeCtCoreAPIcallback(result){
//need to append the result to the corresponding cell header here.
}
HTML:
<table id="data-table">
<thead>
<tr id="data-row" class="data-header">
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
Is there a way to reference the name of the <th> and insert below?
This is my solution:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var myCellIndex=new Array();
$(document).ready(function()
{
//Initialize the name and index mapping
var th=$("#data-row > th");
for (var i=0;i<th.length;i++)
{
myCellIndex[th[i].innerHTML]=th[i].cellIndex;
}
});
function updateContent(fieldName,content)
{
var cellIndex=myCellIndex[fieldName];
var bodyRow=$("tbody>tr")[0]; // Because you have 1 row in tbody only.
if (bodyRow.cells.length<=cellIndex) //If the cell not found
{
for (var i=bodyRow.cells.length;i<=cellIndex;i++) //Add all necessary cells.
cell=bodyRow.insertCell(i);
}
else
cell=bodyRow.cells[cellIndex]; //Get a appropiate cell
cell.innerHTML=content; //Set the cell content.
}
function go()
{
var cell;
updateContent("Name","Kevin");
updateContent("Number","xxx-xxx-xxxx");
updateContent("Status","bla bla");
updateContent("Address","xxx...");
}
</script>
</head>
<body>
<table id="data-table">
<thead>
<tr id="data-row" class="data-header">
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<input type="button" value="Go" onclick="go()">
</body>
</html>
I am using datatables to display table data. this table has an action column to remove record. I am trying the achieve the delete action by adding the event listener to the specific class. When i am trying to get the elements by the class name it is returning only first page elements of the datatable event though we have 5 pages. Can you help me in this regard.
var lastName = document.querySelectorAll('.lastname');
console.log(lastName);
i need the solution in plain javascript.
<table id="example" class="display nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td><button class="btn btn-primary lastname" name="delete"></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable(
);
var lastName = document.querySelectorAll('.lastname');
console.log(lastName);// i am expecting this should return all elements with class **lastname**.
});
</script>
I have only included one row. assume we have 50 rows.
you can include the element like div
try this.
var lastName = document.querySelectorAll('div.lastname');
console.log(lastName);
you can read this Documentation for better information.
so I have this code that displays all the objects that fit a variable in a JSON file using Jput.
<script>
$(document).ready(function(){
$("#tbody").jPut({
ajax_url:"valid_data.json",
prepend:true,
name:"tbody_template",
});
});
</script>
<table jput="t_template">
<tbody jput="tbody_template">
<tr>
<td>{{First Name}}</td>
<td>{{Middle Name}}</td>
<td>{{Last Name}}</td>
<td>{{Nationality}}</td>
<td>{{Birthplace}}</td>
<td>{{Age}}</td>
</tr>
</tbody>
</table>
<table>
<tbody id="tbody">
</tbody>
</table>
<script src="jquery-1.12.3.min.js"></script>
<script src="jput.min.js"></script>
Code works fine, (can be seen in action at http://fooda.website/test2.html) but i need a button that when clicked picks a random array and displays only that arrays result.
Javascript knowledge is minimal so not sure how to go about it. Had some previous code that was linked to a CSV file before I was advised to convert to JSON, but i'm lost as to how to implement it in this.
Not certain about options of .jPut(), though one option would be to set all tr elements style to display:none, then select random tr from table and set that tr to display:block.
According to linked documentation, done option is called when JSON is returned.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://fooda.website/jput.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var tr, button = $("button");
$("#tbody").jPut({
ajax_url: "http://fooda.website/valid_data.json",
prepend: true,
name: "tbody_template",
done: function(e) {
tr = $("table #tbody tr").hide();
button.removeAttr("disabled")
}
});
button.click(function() {
tr.hide();
var rand = Math.floor(Math.random() * tr.length);
tr.eq(rand).show()
});
});
</script>
<button disabled>click</button>
<table jput="t_template" style="display: none;">
<tbody jput="tbody_template" style="display: none;">
<tr>
<td>{{First Name}}</td>
<td>{{Middle Name}}</td>
<td>{{Last Name}}</td>
<td>{{Nationality}}</td>
<td>{{Birthplace}}</td>
<td>{{Age}}</td>
</tr>
</tbody>
</table>
<table>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/NURw4djMh9Jp23v3bINP?p=preview
How can I enable data editing inside a table cell with javascript on multiple row.
I have written a code that gets the cell data and replace it with a text box that has previous data on it and saves the data in to the cell after you finished editing. But I want to make it possible with multiple table rows. Btw. the table will be Php generated.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>EDIT USER</title>
<script>
function edit() {
var a = document.getElementById("fname").innerHTML;
var b = document.getElementById("lname").innerHTML;
document.getElementById("fname").innerHTML='<input id="fnamefld" type="text" value="'+a+'"'+' />';
document.getElementById("lname").innerHTML='<input id="lnamefld" type="text" value="'+b+'"'+' />';
document.getElementById("edit_btn").disabled=true;
document.getElementById("done_btn").disabled=false;
}
function done() {
document.getElementById("done_btn").disabled=true;
document.getElementById("edit_btn").disabled=false;
var a = document.getElementById("fnamefld").value
var b = document.getElementById("lnamefld").value
document.getElementById("fname").innerHTML=a;
document.getElementById("lname").innerHTML=b;
}
</script>
</head>
<body>
<table border="0">
<th>First Name</th>
<th>Last Name</th>
<th>Edit?/Done?</th>
<tr>
<td id="fname">User fname</td>
<td id="lname">User lname</td>
<td>
<button id="edit_btn" onclick="edit()">Edit!</button>
<button id="done_btn" onclick="done()">Done!</button>
</td>
</tr>
</table>
<script> document.getElementById("done_btn").disabled=true;</script>
</body>
</html>
I have used this plugin in the past and found it incredibly useful
http://vitalets.github.io/x-editable/
In Firefox it works, in my Internet Explorer 6 or 7 it doesn't:
<html>
<head>
<script type="text/javascript">
function newLine() {
var tdmod = document.createElement('td');
tdmod.appendChild(document.createTextNode("dynamic"));
var tr = document.createElement('tr');
tr.appendChild(tdmod);
var tt = document.getElementById("t1");
tt.appendChild(tr);
}
</script>
</head>
<body>
newLine
<table id="t1" border="1">
<tr>
<td>
static
</td>
</tr>
</table>
</body>
The user clicks on the link "newLine" and new rows should be added to the table.
How to make this work also in IE?
Edit: Thanks to the accepted answer I changed it like this and now it works:
<table border="1">
<tbody id="t1">
<tr>
<td>
static
</td>
</tr>
</tbody>
</table>
(untested) you might try appending the row to a tbody element, either the one that is usually created automatically or one you define yourself.
Always put
<tbody>
in table for IE