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/
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 have several tables in my page and none of them has an id attribute.
I retrieve with Javascript or jQuery a row of one of these tables. Then I want to do things to all the rows of that table but not to any row of any other table. Selecting such rows through jQuery would do, and also doing that with Javascript would be ok.
So I need to identify a table and the only thing I know about it is that this row belongs to it. Is it possible ?
Runnable example:
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<style>
.myYellow
{
background-color: yellow;
}
</style>
<script type="text/javascript">
function doStuff() {
var jqRow = jQuery("#r1t1"); if (jqRow.length !== 1) throw "ERROR";
var htmlRow = jqRow.get(0); // How do I restrict the jqSelectedRows below to only the table this row belongs to ?
var jqSelectedRows = jQuery("tr.myYellow"); // But I only want the yellow rows of the table containing htmlRow .
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
</script>
</head>
<body>
<table border="1">
<tr id="r1t1" ><td>r1 t1</td></tr>
<tr id="r2t1" class="myYellow"><td>r2 t1</td></tr>
<tr id="r3t1" class="myYellow"><td>r3 t1</td></tr>
<tr id="r4t1" ><td>r4 t1</td></tr>
</table>
<br><br>
<table border="2">
<tr id="r1t2" class="myYellow"><td>r1 t2</td></tr>
<tr id="r2t2" class="myYellow"><td>r2 t2</td></tr>
<tr id="r3t2" ><td>r3 t2</td></tr>
</table>
<br><br>
<input type="button" value="Do" onclick="doStuff()">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>;
no other table must be affected.
</body>
</html>
Use .siblings(). See comment in snippet.
Note: Changed button slightly which of course can easily be converted back to the original way by deleting the code around the doStuff() function and adding the onclick="doStuff();" back to the <input> button.
$(function() {
$('#do').on('click', doStuff);
function doStuff() {
var jqRow = $("#r1t1");
if (jqRow.length !== 1) throw "ERROR";
var jqSelectedRows = jqRow.siblings(); // How do I restrict the jqSelectedRows below to only the table this row belongs to? | Use .siblings() to collect all <tr>s within the table (excluding the referenced tr#r1t1).
jqSelectedRows.each(function(index) {
this.setAttribute("style", "background-color: blue");
});
}
});
.myYellow {
background-color: yellow;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>32721615</title>
</head>
<body>
<table border="1">
<tr id="r1t1">
<td>r1 t1</td>
</tr>
<tr id="r2t1" class="myYellow">
<td>r2 t1</td>
</tr>
<tr id="r3t1" class="myYellow">
<td>r3 t1</td>
</tr>
</table>
<br>
<br>
<table border="2">
<tr id="r1t2" class="myYellow">
<td>r1 t2</td>
</tr>
<tr id="r2t2" class="myYellow">
<td>r2 t2</td>
</tr>
<tr id="r3t2">
<td>r3 t2</td>
</tr>
</table>
<br>
<br>
<input id="do" type="button" value="Do">
<br>The button selects the first row of the first table ("r1 t1") and then it
<br>must turn blue all the <strong>yellow</strong> rows of <strong>that table only</strong>; no other table must be affected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
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);
});
});
In my jsp I am selecting some values from one Table1 and adding it to another table Table2 by using the Add button. This is my jsp:
<%#page contentType="text/html;charset=UTF-8" language="java"
pageEncoding="UTF-8"%>
<%#taglib prefix="s"uri="/struts-tags"%>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
$('#add').on("click", function(){
$('#one tbody input:checked').parent().parent()
.appendTo("#two tbody");
return false;
});
$('#remove').on("click", function(){
$('#two tbody input:checked').parent().parent()
.appendTo("#one tbody");
return false;
});
});
function GetCellValues() {
var oTable = document.getElementById('two');
var mycars = new Array();
var mycars1 = new Array();
var mycars2 = new Array();
//gets table
var rowLength = oTable.rows.length;
//gets rows of table
for (i = 0; i < rowLength; i++){
//loops through rows
var oCells = oTable.rows.item(i).cells;
//gets cells of current row
var cellLength = oCells.length;
for(var j = 0; j < cellLength; j++){
//loops through each cell in current row
//get your cell info here
var cellVal = oCells.item(j).innerHTML;
alert(cellVal);
if(j==3){
mycars[i] = cellVal;
}
if(j==1){
mycars1[i] = cellVal;
}
if(j==2){
mycars2[i] = cellVal;
}
}
}
window.location ="DynamicTable?mytable="+mycars;
}
</script>
</head>
<body>
<button onclick="GetCellValues()">Submit</button>
<table id="one" style="border:1px solid red;">
<caption>Table 1</caption>
<thead>
<tr>
<th ></th>
<th> Id</th>
<th>Name</th>
<th>Status</th>
<th>Type</th>
<th>RollUp Type</th>
<th>System</th>
</tr>
</thead>
<tbody>
<s:iterator value="formList1">
<tr>
<td><s:checkbox theme="simple" ></s:checkbox>
</td>
<td><s:property value="id"/></td>
<td><s:property value="named"/></td>
<td><s:property value="status"/></td>
<td><s:property value="type"/></td>
<td><s:property value="rollup"/></td>
<td><s:property value="unit"/></td>
</tr>
</s:iterator>
</tbody>
</table>
<table id="two" style="border:1px solid green;">
<caption>Table 2</caption>
<thead>
<tr>
<th ></th>
<th> Id</th>
<th>Name</th>
<th>Status</th>
<th>Type</th>
<th>RollUp Type</th>
<th>System</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><hr><br>
<button id="add">Add</button>
<button id="remove">Remove</button>
</body>
</html>
Here how do I retrieve the values that I added in Table 2 in my action when I click on Submit button in Struts2?
This is what I tried, I called the javascript GetCellValues() on click of Submit button, where I set each column in the array mycars,mycars1 and so on.
In my action class I have getters and setters for these arrays. But in my action I am not able to retrieve these values.
How to get the values of a table generated in the jsp in the action?
UPDATE:
I just corrected the line window.location ="DynamicTable?mytable="+mycars; now i'm getting the values in the action as a String separated by commas. I would like to know if there is any other method than what I have used?
yes you can use hidden input fields for passing values to action class.
you can set those fields in java script which will be called onclick() of submit button.
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