Add row into existing table - javascript

May I know how do I insert items into my table body? My code doesn't seems to work.
var tableRef = document.getElementById("myList").getElementsByTagName("tbody");
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell = tableRef.insertCell(0);
var myTextTwo = "hello world";
var newText = document.createTextNode(myTextTwo);
newCell.appendChild(newText);
<table id="myList">
<thead>
<tr>
<td>Product ID</td>
<td>Product Name</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
</tbody>
</table>

getElementsByTagName returns an array. You need to append [0] to select the first element in the array.
You are also trying to use insertCell on tableRef, when you should be using it on newRow:
var tableRef = document.getElementById("myList").getElementsByTagName("tbody")[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell = newRow.insertCell(0);
var myTextTwo = "hello world";
var newText = document.createTextNode(myTextTwo);
newCell.appendChild(newText);
<table id="myList">
<thead>
<tr>
<td>Product ID</td>
<td>Product Name</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
</tbody>
</table>

To make it work, you need to:
1) Put [0] after .getElementsByTagName() like below, as this method returns an array of elements, unlike .getElementById(), which returns the first instance:
var tableRef = document.getElementById("myList").getElementsByTagName("tbody")[0];
2) Use the .insertCell() in the row you want the cell to be, in our case newRow, not on the table's tbody:
var newCell = newRow.insertCell(0);
Your correct JavaScript code should be:
var tableRef = document.getElementById("myList").getElementsByTagName("tbody")[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell = newRow.insertCell(0);
var myTextTwo = "hello world";
var newText = document.createTextNode(myTextTwo);
newCell.appendChild(newText);
You can also check out the following snippet:
var tableRef = document.getElementById("myList").getElementsByTagName("tbody")[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell = newRow.insertCell(0);
var myTextTwo = "hello world";
var newText = document.createTextNode(myTextTwo);
newCell.appendChild(newText);
#myList {
border: 1px solid black;
}
#empty {
border-bottom: 1px solid black;
}
<table id = "myList">
<thead>
<tr>
<td>Product ID</td>
<td>Product Name</td>
<td>Quantity</td>
</tr>
<!--- This row is for adding a border-bottom line -->
<tr>
<td id = "empty" colspan ="3"></td>
</tr>
</thead>
<tbody>
</tbody>
</table>

Related

javascript Insert a new row in a table with 2 headers

I have a table that looks like this :
<button onclick="addRow()">Add a Row</button>
<table id="mytable">
<tr>
<th colspan="3">My header</th>
<tr>
<tr>
<th>header</th>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
And I am trying to create a javascript function to add new rows to the table that would match the last row.
<script>
function addRow() {
var table = document.getElementById("mytable");
var rows = table.getElementsByTagName("tr").length;
var row = table.insertRow(rows);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "header";
cell2.innerHTML = "cell1";
cell3.innerHTML = "cell2";
}
</script>
After spending a good amount of time on google trying to figure it out. I must say I could not find what I am looking for. Any help would be much appreciated.
Your problem is that insertCell() only creates <td> tags, so you need to use document.createElement to create the <th> tag for your first cell.
<button onclick="addRow()">Add a Row</button>
<table id="mytable">
<tr>
<th colspan="3">My header</th>
<tr>
<tr>
<th>header</th>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
<script>
function addRow() {
var table = document.getElementById("mytable");
var rows = table.getElementsByTagName("tr").length;
var row = table.insertRow(rows);
var cell1 = document.createElement("TH");
row.appendChild(cell1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "header";
cell2.innerHTML = "cell1";
cell3.innerHTML = "cell2";
}
</script>

Select the highlighted row of dynamically created table,onclick event

I have created a web page generating dynamic table depending on the data length. Now i want to fetch the value of selected tr of table and append it into another table.
function setItemForSale(itemForSale, type,xml)
{
var itemForSaleTable = document.getElementById("custorder1");
var itemForSaleTableHead = document.getElementById("head1");
var itemForSaleTableBody = document.createElement("tbody");
itemForSaleTableBody.appendChild(itemForSaleTableHead);
$('#custorder1 tr').has('td').remove();
for(var i=0; i< itemForSale.length; i++)
{
var row = document.createElement("tr");
itemForSaleTable.insertRow(-1);
var obj = itemForSale[i];
var vitemno = obj["itemNo"];
var vname = obj["name"];
var valias = obj["alias"];
var vbrand = obj["brand"];
var vdescription = obj["description"];
var cell = document.createElement("td");
var cellText = document.createTextNode(vitemno);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vname);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(valias);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vbrand);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vdescription);
cell.appendChild(cellText);
row.appendChild(cell);
itemForSaleTableBody.appendChild(row);
}
itemForSaleTable.appendChild(itemForSaleTableBody);
itemForSaleTable.setAttribute("border", "2");
}
//code for creating table skeleton
<table class="CSSTableGenerator" id="custorder1" >
<thead>
<tr id="head1">
<th>
Item No
</th>
<th>
Name
</th>
<th>
Alias
</th>
<th>
Brand
</th>
<th>
Description
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
//I want to pick the individual cells data so that i can use it to fetch data. How to pick any cell data in selected row, I don't know how to do it! Help me Please
You can bind click handler on tr then use .appendTo() to move the selected row to another table.
$('#custorder1').on('click', 'tr', function(){
$(this).appendTo('#anotherTableId')
});
$('#custorder1').on('click', 'tr', function() {
$(this).appendTo('#anotherTableId')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="CSSTableGenerator" id="custorder1">
<thead>
<tr>
<th>
Item No
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
Another table
<table class="CSSTableGenerator" id="anotherTableId">
</table>

using jquery on javascript built table

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.

How to overwrite the values of the first column in every rows in a HTML tbody table with JavaScript and with jQuery?

Here is a table example:
<table id="tableId">
<thead>
<tr>
<th>line number</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>value 1</td>
</tr>
<tr>
<td>3</td>
<td>value 2</td>
</tr>
<tr>
<td>1</td>
<td>value 3</td>
</tr>
</tbody>
</table>
<input type="button" value="relineing" onclick="reLineNumbering('tableId')"/>
I want only the "line number"s to be in sequence like this:
<table id="tableId">
<thead>
<tr>
<th>line number</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>value 1</td>
</tr>
<tr>
<td>2</td>
<td>value 2</td>
</tr>
<tr>
<td>3</td>
<td>value 3</td>
</tr>
</tbody>
</table>
<input type="button" value="relineing" onclick="reLineNumbering('tableId')"/>
I've tried both of the snippets below:
function reLineNumbering(tableId) {
$('#'+tableId+' tbody').each(function (i) {
this.rows[i].cells[0].text('i');
});
}
function reLineNumbering(tableId) {
var rowCount = $('#'+tableId+' tbody tr').length;
for (var i=0; i<rowCount; i++) {
$('#'+tableId+' tbody').rows[i].cells[0].text(i);
}
}
Could someone help me?
This will change the first column to a sequential number starting from 1:
function reLineNumbering(tableId){
$('#' + tableId + ' > tbody > tr').each(function(i, val){
$('td:first', this).text(i+1);
});
}
Fiddle
Plain Javascript - Fiddle:
function reLineNumbering(tableId){
var table = document.getElementById(tableId);
var total = table.rows.length;
for(var i=0; i<total; i++){
if(i > 0){
table.rows[i].cells[0].innerHTML = i;
}
}
}
Or by creating the text node instead of setting innerHTML. In this simple scenario the use of innerHTML isn't a problem, but usually you will want to work with DOM elements and set the text node instead of setting the HTML:
function reLineNumbering(tableId){
var table = document.getElementById(tableId);
var total = table.rows.length, text, cell;
for(var i=0; i<total; i++){
if(i > 0){
text = document.createTextNode(i);
cell = table.rows[i].cells[0];
cell.removeChild(cell.firstChild);
cell.appendChild(text);
}
}
}
Try
$('#tableId > tbody > tr').find('td:first').text(function(idx, text){
return idx + 1
})
Demo: Fiddle
this is the correct answer:
function reLineNumbering(tableId) {
var myTable=document.getElementById(tableId);
var rowCount = myTable.rows.length;
for (var i = 1; i < rowCount; i++) {
myTable.rows[i].cells[0].innerHTML = i;
}
}
For a VanillaJS version of the same thing:
(function(t)
{
for(var i=1;i<t.rows.length;i++)
{
t.rows[i].cells[0].innerHTML += ' Vanilla';
}
}(document.getElementById('tableId')));
Which I added to the fiddle of Arun
I post it here, because it's not an awful lot longer than the jQ version of the same code, but it is faster.
You can change it to:
var t = document.getElemebtById('tableId');
for(var i=1;i<t.rows.length;i++)
{
t.rows[i].cells[0].innerHTML = 1 + i;//number tbl
}
If you don't feel comfortable using the IIFE.
PS: the loop could be simplified to:
for(var i=1;i<t.rows.length;)//do nothing here
{
t.rows[i].cells[0].innerHTML = i++;//increment i here
}

Hide Dynamically Added Columns/Fields

I have some dynamically created rows/columns. What I'd like to do is set a section of it (txtOffsetID) to be hidden. I tried this: txtOffsetID.setAttribute('type', 'hidden'); but it didn't work. I want to hide that entire column and any new columns added. I need it to work in IE. Thanks.
Sample code:
function addNewOffsetItem()
{
var iX = document.getElementById("txtOffsetIndex").value;
iX ++;
document.getElementById("txtOffsetIndex").value = iX;
var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0];
var tr = document.createElement("TR");
tbl.appendChild(tr);
//This section should be hidden.
//txtOffsetID1
var tdID = document.createElement("TD");
tr.appendChild(tdID);
var p = document.createElement("P");
tdID.appendChild(p);
var txtOffsetID = document.createElement("input");
p.appendChild(txtOffsetID);
txtOffsetID.id = "txtOffsetID" + iX;
txtOffsetID.setAttribute('name','txtOffsetID' + iX);
**document.getElementById("colOffsetID").style.display="none";**
//This section should be visible.
//txtOffsetComments1
var tdComments = document.createElement("TD");
tr.appendChild(tdComments);
var p = document.createElement("P");
tdComments.appendChild(p);
var txtOffsetComments = document.createElement("textarea");
p.appendChild(txtOffsetComments);
txtOffsetComments.id = "txtOffsetComments" + iX;
txtOffsetComments.setAttribute('name','txtOffsetComments' + iX);
}
<table width="99%" border="1" cellpadding="1" cellspacing="1" id="tblOffsetDetail">
<colgroup>
<col id="colOffsetID">
<col id="colOffsetComments">
</colgroup>
<tbody>
<tr>
<td><input type="text" id="txtOffsetID" name="txtOffsetID"></td>
<td><p><textarea name="txtOffsetComments" cols="15" rows="3" id="txtOffsetComments"></textarea></p></td>
</tr>
</tbody>
</table>
created "tr" element can be hidden like this
tr.setAttribute('style', 'display: none;');
but in case you want to hide full column than you need to use colgroup table element
example
<table>
<colgroup>
<col id="colOne">
<col id="colTwo">
<col id="colThre">
</colgroup>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</tbody>
you can hide colTwo like this
document.getElementById('colTwo').style.display = 'none';
I hope this helps

Categories