<script type="text/javascript" language="javascript">
function addNewRow()
{
var table = document.getElementById("table1");
var tr = table.insertRow();
var td = tr.insertCell();
td.innerHTML= "a";
td = tr.insertCell();
td.innerHTML= "b";
td = tr.insertCell();
td.innerHTML= "c";
td = tr.insertCell();
td.innerHTML= "d";
td = tr.insertCell();
td.innerHTML= "e";
}
</script>
<body>
<table id="table1" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr id="row1">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<input type="button" onClick="addNewRow()" value="Add New"/>
</body>
This example is for dynamically insert new row and cells in the table.
But its behavior is different in all browsers.
Internet Explorer = It add row in the last and new added cells are starts from first.
Chrome/Safari = It add new row in the first and new added cells are starts from end.
Mozilla Firefox = It is not working.
I want new added row in the last and new added cells starts from first like (Internet Explorer) in all browsers.
If you have any solution for same behavior please tell me.
try to use:
var tr = table.insertRow(-1);
like its said here:
https://developer.mozilla.org/en/DOM/table.insertRow
Related
I have an array in javascript that contains names:
var names = ['JOHN', 'MIKE', 'SAM'];
I want to make an HTML table where each element in the array has its own row. Every time we insert an element in an array a new row with that name should be appended
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Grade</th>
<th>Roll</th>
</tr>
<tr>
<td>JOHN</td>
<td></td>
<td></td>
</tr>
<tr>
<td>MIKE</td>
<td></td>
<td></td>
</tr>
<tr>
<td>SAM</td>
<td></td>
<td></td>
</tr>
</table>
<script>
var names = ['JOHN', 'MIKE', 'SAM'];
</script>
</body>
</html>
You could use the following to generate dynamic rows in a table..
Assign an id to the table and get the table element like,
const table = document.getElementById('table');
Then do forEach() on the array to iterate and generate dynamic rows accordingly like,
const tr = document.createElement('tr');
As there are three columns (based on th values) , so you can generate td's for the respective columns like,
const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');
Then to include the name comes from array, you can do it like,
const name = document.createTextNode(item);
Then you can append the name to first td like,
td1.appendChild(name);
Then you can append each element one by one accordingly.
Working Snippet:
const names = ['JOHN', 'MIKE', 'SAM', 'Another Name', 'Yet Another Name'];
const table = document.getElementById('table');
names.forEach((item,index) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');
const name = document.createTextNode(item);
td1.appendChild(name);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
})
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%" id="table">
<tr>
<th>Name</th>
<th>Grade</th>
<th>Roll</th>
</tr>
</table>
</body>
</html>
I have a small question: I want to get a one table value row by row my selected cell value. I use for loop for select each row.For loop is correct but I cannot see anything in alert.
My table is
<div style="overflow-x:auto;">
<table id="abctable" class="display nowrap" cellspacing="0" border="0">
<thead>
<th width="15%">Registered Agents</th>
</thead>
<c:forEach items="${Agentsdetail}" var="Agent">
<tr>
<td><input type="text" id="a" value="${Agent.vatNumber}"></td>
</tr>
</c:forEach>
</table>
</div>
I want to select this table cell value of each row to alert. I use this jQuery code:
<script>
$(document).ready(function () {
var table = document.getElementById("abctable");
var rowCount = table.rows.length;
for (i = 1; i <= rowCount; i++) {
alert($('#userstable tr:eq(1) td:eq(0)').val());
}
});
</script>
The row count is successful and when run a program, it returns nothing in the alert. Please help me
As MartinWebb said, the table id is "usertable" not "abctable"
But also the value you are looking for is on the input, not the table cell (td), so your selector is incomplete.
$(document).ready(function() {
var table = document.getElementById("userstable");
var rowCount = table.rows.length;
for (i = 1; i <= rowCount; i++) {
alert($('#userstable tr:eq(1) td:eq(0) input').val());
}
});
I built an table using JavaScript. However when I try to call jQuery on that table it doesnt work. I am trying to make jQuery highlight the columns of the table when I hoover with it.
Here is my code
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
// Insert a row in the table at row index 0
var newRow = tableRef.insertRow(tableRef.rows.length);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell
var newText = document.createTextNode('New row')
// Append a text node to the cell
newCell.appendChild(newText);
//Apend new cell to same row
var newCell = newRow.insertCell(1);
var newText = document.createTextNode('Nea')
newCell.appendChild(newText);
//highlight column
$('td').on('mouseenter', function() {
var i = $(this).parent().children().index(this);
$('col').removeClass('hovered');
$('col:nth-child(' + (i + 1) + ')').addClass('hovered');
});
$('td').on('mouseleave', function() {
$('col').removeClass('hovered');
});
table {
border-collapse: collapse;
}
table tr:hover {
background-color: grey;
}
col.hovered {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>My Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaa</td>
<td>aaaaa</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>My footer</td>
</tr>
</tfoot>
</table>
Here is JsFiddle
http://jsfiddle.net/4sR2G/764/
I managed to get the effect using
<colgroup>
<col></col>
<col></col>
<col></col>
</colgroup>
From one of the examples you gave.
I have a scenario where there is a table of 4 rows, in the 4th row is a textbox. When an "onchange" event of the textbox is triggered, I want to extract the data in the cells of the same specific row into another table. and ofcourse my table is consisted of more than one row.
<div class="ProductsTable">
<table class="tablestyle">
<tr>
<th>Item</th>
<th>Price</th>
<th>Preview</th>
<th class="auto-style4">Quantity</th>
<th class="auto-style15">Selected Items</th>
</tr>
<tr id="row1">
<td class="auto-style1" id="item_name">Sofa</td>
<td class="auto-style2" id="item_price">$280.00</td>
<td class="auto-style3">
<img class="itemimage" src="images\sofa1.jpg" />
</td>
<td class="auto-style4">
<input class="quantitybox" id="item_quantity" type="text" onchange="get_quantity();" />
</td>
<td rowspan="10">
<table class="InvoiceTable" id="invoice">
<tr>
<th class="auto-style7">Item</th>
<th class="auto-style2">Price</th>
<th class="auto-style4">Quantity</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my javascript is:
function get_quantity() {
var table = document.getElementById("invoice");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2)
cell1.innerHTML = document.getElementById("item_name").innerHTML;
cell2.innerHTML = document.getElementById("item_price").innerHTML;
cell3.innerHTML = document.getElementById("item_quantity").value;
}
How can I create a loop to check through all my table when an "onchange" event is triggered. As I actually have 10 rows in my table.
Preferably without using jquery.
If I understand you correctly you are looking for a function to copy the content of the changed row, that is the data in each column, into the invoice table.
I expect the rows to be created dynamicaly with some sort of iteration. When iterating I expect a unique number is availabe why this can be used as a general selector.
Here is a function to do this:
function get_quantity(rowNumber) {
var table = document.getElementById("invoice" + rowNumber);
var row = table.insertRow(1);
var columns = document.getElementById("row" + rowNumber).childNodes;
var dataColumnIndex = 0;
for (var i = 0; i < columns.length; i++) {
if (columns[i].className == "data") {
var cell = row.insertCell(dataColumnIndex);
cell.innerHTML = columns[i].innerHTML;
dataColumnIndex++;
}
}
var inputQuantity = document.getElementById("item_quantity" + rowNumber).value
row.insertCell(dataColumnIndex).innerHTML = inputQuantity;
}
You select what columns to copy by marking the them with class data.
I gets the invoice table by expecting it to have the id invoice + number. Fx. invoice1. Same goes with each row and the input field.
Here is a plunker with a full example.
Edit
There should only be a single invoice table where all products are added to.
By selecting the same table for row insertion in the function this is fixed.
This updated plunker has the change
How to create a Html table using DOM model using Javascript?
for ex:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblMCNRoles">
</table>
I have above table and i want to render above table like below by using DOM modal creation.
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblMCNRoles">
<tr>
<td bordercolor="green" align="center" valign="top" style="border-style:dotted" >
<table width="99%" border="0" cellspacing="0" cellpadding="0"
class="portlet-table-body intable5">
<tr><td align="center" valign="middle" class="grid6"></td></tr>
</table>
</td>
</tr>
</table>
I suggest you use the DOM Table methods since neither appendChild nor innerHTML are good for safe cross browser manipulation.
The DOM has insertRow and insertCell which works better.
Here is IE's documentation and here is an example from Mozillas Developer Network
<table id="table0">
<tr>
<td>Row 0 Cell 0</td>
<td>Row 0 Cell 1</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i<2; i++) {
cell = row.insertCell(-1);
text = 'Row ' + row.rowIndex + ' Cell ' + i;
cell.appendChild(document.createTextNode(text));
}
</script>
var table = document.getElementById("tblMCNRoles");
var tr = document.createElement("tr");
var td = document.createElement("td");
//set attributes via setAttribute()
//add subtable via createElement and appendCHild
tr.appendChild(td);
table.appendChild(tr);
Or you can use innerHTML, but then you have to generate the HTML first