I have a table in HTML:
<table id="cust">
<tr>
<th>UserName</th>
<th>Password</th>
</tr>
<script type="text/javascript">addRows();</script>
</table>
and I have function in JS that insert Rows to this table. for example:
function addRows() {
// Get a reference to the table
var table = document.getElementById("cust");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "ilan";
cell1.innerHTML = "11111";
}
but I want that every row that insert to the table, will be with onClick event like that:
<tr onclick="window.document.location='Accounts.html';">
how can I do that?
thank you !!
You can use this-
row.setAttribute("onclick","window.document.location='Accounts.html'");
function addRows() {
// Get a reference to the table
var table = document.getElementById("cust");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.setAttribute("onclick","window.document.location='Accounts.html'");
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "ilan";
cell1.innerHTML = "11111";
}
Since you are not using any jQuery constructs add a onlick handler to the row element
function addRows() {
// Get a reference to the table
var table = document.getElementById("cust");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.onclick = rowClick
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "ilan";
cell1.innerHTML = "11111";
}
function rowClick() {
window.document.location = 'Accounts.html';
}
If you want to have different target locations then
function addRows() {
// Get a reference to the table
var table = document.getElementById("cust");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.onclick=function(){
window.document.location='Accounts.html';
}
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "ilan";
cell1.innerHTML = "11111";
}
Related
I am creating an HTML table dynamically and each cell has an id. I want to send the cell.id to the onclick function, but I am not sure how to do it.
window.onload = function() {
myFunction();
}
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.id = 'a'
cell2.id = 'b'
cell1.innerHTML = "cell1";
cell2.innerHTML = "cell2";
cell1.onclick = xfunc(cell1.id);
cell2.onclick = xfunc(cell2.id);
}
function xfunc(id) {
console.log('click', id)
}
<table id="myTable"></table>
Using this code the function xfunc does not seem to be called.
On the other hand if I use
cell1.onclick=xfunc;
The function is called, but of course, I have no cell.id. What can I do?
You're actually invoking the function the way you have it now. There are a couple of ways to properly call the function onclick. The first using addEventListener and the second uses an anonymous function.
addEventListener:
window.onload = function() {
myFunction();
}
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.id = 'a'
cell2.id = 'b'
cell1.innerHTML = "cell1";
cell2.innerHTML = "cell2";
cell1.addEventListener('click', xfunc, false);
cell2.addEventListener('click', xfunc, false);
}
function xfunc(evt) {
console.log('click', evt.currentTarget.id)
}
<table id="myTable"></table>
Anonymous function:
window.onload = function() {
myFunction();
}
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.id = 'a'
cell2.id = 'b'
cell1.innerHTML = "cell1";
cell2.innerHTML = "cell2";
cell1.onclick = function(){xfunc(cell1.id)};
cell2.onclick = function(){xfunc(cell2.id)};
}
function xfunc(id) {
console.log('click', id)
}
<table id="myTable"></table>
I am Trying to create and add elements to a table.
function flaeche() {
let tableID = "testTable";
let x = document.createElement("TABLE");
x.setAttribute("id", tableID);
for (let argument of arguments) {
let radius = ((argument*argument)*Math.PI).toFixed(2);
addRow(argument,radius,tableID);
}
}
function addRow(value, result, tableID){
let table = document.getElementById(tableID);
let row = table.insertRow(0);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
cell1.innerHTML = value;
cell2.innerHTML = result;
}
If I try to run the code I get the following error:
TypeError: table is null at addRow line 30:5
which corresponds to
let table = document.getElementById(tableID);
I really have no idea why it says so since I am fairly new to JavaScript. I appreciate your help.
You are making a table element, but you aren't adding it to the page. You need to actually put the table somewhere in the DOM if you want to find it with document.getElementById() later. For example:
function flaeche() {
let tableID = "testTable";
let x = document.createElement("TABLE");
x.setAttribute("id", tableID);
// add table to the page somewhere
// for example in the div named container
let container = document.getElementById("container")
container.appendChild(x)
for (let argument of arguments) {
let radius = ((argument*argument)*Math.PI).toFixed(2);
addRow(argument,radius,tableID);
}
}
function addRow(value, result, tableID){
let table = document.getElementById(tableID);
let row = table.insertRow(0);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
cell1.innerHTML = value;
cell2.innerHTML = result;
}
flaeche(5, 6)
td {
border: 1px solid #ddd;
padding: 1em;
}
<div id="container"></div>
I am having a hard time in inserting table rows dynamically since I haven't really tried it before. What I'm supposed to do is to insert a new table row with a select box with options from the an arraylist.
So far, this is my code:
HTML
<TABLE id="dataTable">
<TR>
<TD> 1</TD>
<TD>
<select name="option">
<%for(int i = 0; i < jList.size(); i ++){%>
<option value="<%=jList.get(i).getName%>"><%=jList.get(i).getName%></option>
<%}%>
</select>
</TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
JAVASCRIPT
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount + 1;
var row = table.insertRow(rowCount);
//*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
//how do i put the options from the arraylist here?
cell2.appendChild(element2);
}
also, I would also like to know how to pass a variable from the javascript function to a java servlet because every time I pass the variable count in a hidden input type, the input does not contain the count. I hope you can help me with my dilemma.
Just after you create the "select" element You can simply loop through your"arraylist" and append the options :
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount + 1;
var row = table.insertRow(rowCount);
//*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
//Append the options from the arraylist to the "select" element
for (var i = 0; i < arraylist.length; i++) {
var option = document.createElement("option");
option.value = arraylist[i];
option.text = arraylist[i];
element2.appendChild(option);
}
cell2.appendChild(element2);
}
Take a look at this fiddle : https://jsfiddle.net/bafforosso/66h3uwtd/2/
I have two functions for adding and deleting rows in a table using Javascript:
function addRow() {
//document.getElementById("div_dea").style.display = "none";
document.getElementById("div_orderlist").style.display = "block";
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
var row = table.insertRow(rowcount);
row.id="row_"+rowcount;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
var sel = document.getElementById("select_product_name");
var optiontext = sel.options[sel.selectedIndex].text;
cell1.innerHTML = rowcount;
cell2.innerHTML = optiontext;
cell3.innerHTML = "abc";
}
Delete Row as follows:
function deleteRow(){
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
alert("first"+rowcount);
for(var i=1;i<rowcount;i++){
row = table.rows[i];
if(document.getElementById(row.id).style.backgroundColor =="red"){
table.deleteRow(row.rowIndex);
}
}
alert("second"+rowcount);
}
While addRow() I am adding serial numbers as: cell1.innerHTML = rowcount;
I need correct the serial numbers after deletion:
The rows get deleted But alert("second"+rowcount); not even working in deletion. How can correct the serial numbers of row after deletion.
Note: Use JavaScript only
Use this code
function updateRowCount(){
var table = document.getElementById("ordertable");
var rowcountAfterDelete = document.getElementById("ordertable").rows.length;
for(var i=1;i<rowcountAfterDelete;i++){
table.rows[i].cells[0].innerHTML=i;
}}
I am trying to dynamically parse JSON data and populate the data in rows in an html table.
I wrote the following test and don't really see any reason why it should not work.
EDIT:corrected the two syntax errors.
<tohead>
<script>
var zoho = "?({"Products":[{"model":"UN55F8000BFXZA","phone":"1234567890","price":"2999.99","manufacturer":"Samsung","purchaseDate":"2013-07-26"}]});"
$(document).ready(function(){
processRecord(zoho);
});
function addRow(inc) {
VAR table = document.getElementById("dataTable");
VAR rowCount = table.rows.length;
VAR row = table.insertRow(rowCount);
VAR cell1 = row.insertCell(0);
VAR element1 = document.createElement("div");
element1.id = 'manufacturer' + inc;
element1.class = "text";
cell1.appendChild(element1);
VAR cell2 = row.insertCell(1);
VAR element2 = document.createElement("div");
element2.id = 'purchaseDate' + inc;
element2.class = "text";
element2.align = "center";
cell2.appendChild(element2);
VAR cell3 = row.insertCell(2);
VAR element3 = document.createElement("div");
element3.id = 'endingDate' + inc;
element3.class = "text";
element3.align = "center";
cell3.appendChild(element3);
};
function processRecord(zoho_data){
for (var i=0; i<zoho_data.length; i++){
addRow(i);
var phonenumber = zoho_data.Products[i].phone;
var zmanufacturer = zoho_data.Products[i].manufacturer;
var zmodel = zoho_data.Products[i].model;
var zpurchaseDate = zoho_data.Products[i].purchaseDate;
document.getElementById('manufacturer' + i).appendChild(zmanufacturer);
document.getElementById('purchaseDate' + i).appendChild(zpurchaseDate);
document.getElementById('endingDate' + i).appendChild(d1);
}
};
</script>
</tohead>
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE id="dataTable" width="546">
</TABLE>
</BODY>
</HTML>
EDIT: In response to the comments I have reduced the complexity of the code above to narrow down the issue. The code below is the new code with just the createElement loop.
<HTML>
<HEAD>
<script>
$(document).ready(function(){
addRow();
});
function addRow() {
for (var i=0; i<4; i++)
{
VAR table = document.getElementById("dataTable");
VAR rowCount = table.rows.length;
VAR row = table.insertRow(rowCount);
VAR cell1 = row.insertCell(0);
VAR element1 = document.createElement("div");
element1.setAttribute('id', 'manufacturer' + i);
element1.setAttribute(class, 'text');
cell1.appendChild(element1);
VAR cell2 = row.insertCell(1);
VAR element2 = document.createElement("div");
element2.setAttribute('id', 'purchaseDate' + i);
element2.setAttribute(class, 'text');
element2.setAttribute(align, 'center');
cell2.appendChild(element2);
VAR cell3 = row.insertCell(2);
VAR element3 = document.createElement("div");
element3.setAttribute('id', 'endingDate' + i);
element3.setAttribute(class, 'text');
element3.setAttribute(align, 'center');
cell3.appendChild(element3);
}
};
</script>
</HEAD>
<BODY>
<TABLE id="dataTable" width="546" border="1">
<tr>
<td>boo</td>
</tr>
</TABLE>
</BODY>
</HTML>
Your zoho string is not an object, but a string, and as it starts with ?( it is not valid JSON. It is not even valid Javascript — just look at those errant quotation marks.
You need to fix your JSON so that it is valid JSON, and then you need to convert your JSON string into a Javascript object.
Then, you need to fix document.getElementById(dataTable) because no such variable dataTable exists in your program. Did you mean the string "dataTable"?
appendChild only works with actual DOM type one nodes. Since it looks like you're just appending string values, try using textContent =
See: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
If you want to append them as their own elements, you'll need to use: document.createElement so that appendChild will work (since it belongs to the Node object).
For the benefit of anyone who might see this and have a similar concern. The correct code is below. I am passing in the function data returned in JSON format parsing it, and writing it to dynamically created "div"s, inside dynamically created table rows.
function processData(zoho_data){
$.each(zoho_data.Products, function() {
var phonenumber = this.phone;
var zmanufacturer = this.manufacturer;
var zmodel = this.model;
var zpurchaseDate = this.purchaseDate;
var d1 = Date.parse(zpurchaseDate).add(4).year().toString('yyyy-MM-dd');
var table = document.getElementById("datatable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var element1 = document.createElement("div");
element1.setAttribute('class', 'text');
cell1.innerHTML = zmanufacturer + " " + zmodel;
cell1.appendChild(element1);
var cell2 = row.insertCell(-1);
var element2 = document.createElement("div");
element2.setAttribute('class', 'text');
element2.setAttribute('align', 'center');
cell2.innerHTML = zpurchaseDate;
cell2.appendChild(element2);
var cell3 = row.insertCell(-1);
var element3 = document.createElement("div");
element3.setAttribute('class', 'text');
element3.setAttribute('align', 'center');
cell3.innerHTML = d1;
cell3.appendChild(element3);
});
};