using jquery on javascript built table - javascript

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.

Related

Add row into existing table

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>

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>

Auto-number table rows?

I have the following HTML table:
<table border="1">
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>
I would like each row in this table have a number automatically assigned to each item.
How could he do?
The following CSS enumerates table rows (demo):
table {
counter-reset: rowNumber;
}
table tr::before {
display: table-cell;
counter-increment: rowNumber;
content: counter(rowNumber) ".";
padding-right: 0.3em;
text-align: right;
}
<table cellpadding="0">
<tr><td>blue</td></tr>
<tr><td>red</td></tr>
<tr><td>yellow</td></tr>
<tr><td>green</td></tr>
<tr><td>purple</td></tr>
<tr><td>orange</td></tr>
<tr><td>maroon</td></tr>
<tr><td>mauve</td></tr>
<tr><td>lavender</td></tr>
<tr><td>pink</td></tr>
<tr><td>brown</td></tr>
</table>
If the CSS cannot be used, try the following JavaScript code (demo):
var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';
for (var i = 0, len = rows.length; i < len; i++) {
rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}
<table border="1">
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>
And if you would use headers as well the following is the thing you need:
http://jsfiddle.net/davidThomas/7RyGX/
table {
counter-reset: rowNumber;
}
table tr:not(:first-child) {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
note the: ":not(:first-child)" in there.
Here is a modification of David Thomas' CSS solution that works with or without a header row in the table. It increments the counter on the first td cell of each row (thereby skipping the row with only th cells):
table
{
counter-reset: rowNumber;
}
table tr > td:first-child
{
counter-increment: rowNumber;
}
table tr td:first-child::before
{
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
You can see the behavior in this jsfiddle.
Here's a javascript solution that will add a cell at the beginning of each row , this cell will be used for numbering, if there is a th cell this gets a colspan=2 attribute.
var addNumeration = function(cl){
var table = document.querySelector('table.' + cl)
var trs = table.querySelectorAll('tr')
var counter = 1
Array.prototype.forEach.call(trs, function(x,i){
var firstChild = x.children[0]
if (firstChild.tagName === 'TD') {
var cell = document.createElement('td')
cell.textContent = counter ++
x.insertBefore(cell,firstChild)
} else {
firstChild.setAttribute('colspan',2)
}
})
}
addNumeration("test")
<table class="test" border="1">
<tr>
<th>hi!</th>
</tr>
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>

Dynamically insert new rows in the table

<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

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