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
Related
I have a web page that is auto-generated by a CRM (Netsuite) and I do not control the html generated in a fair amount of the page. I would like to remove a handful of closing and opening tags, so that objects are rendered in the same row vs. in rows above and below each other.
</tr></tbody></table></td>
</tr>
<tr valign="top">
<td width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>
The problem I have is that doing the following breaks the forms on the page, causing all of the buttons to fail:
<script type="text/javascript">
$(document).ready(function()
{
var bodyHtml = document.getElementById('content_area').outerHTML;
bodyHtml = bodyHtml.replace('</tr></tbody></table></td>\n</tr>\n<tr
valign="top">\n<td width="100%"><table border="0" cellpadding="0"
cellspacing="0" width="100%"><tbody><tr>','<!-- worked -->');
document.getElementById('content_area').outerHTML = bodyHtml;
});
</script>
Is there another way to remove html tags via javascript that doesn't mal-form the rest of the dom?
The following code will take the example from your comment, and append the content 2 td right after the content 1 td
let contentOne = document.querySelector("table:nth-of-type(1) tr td");
let contentTwo = document.querySelector("table:nth-of-type(2) tr td");
contentOne.insertAdjacentElement('afterend', contentTwo);
tr td {
border: 1px solid black
}
<table>
<tr>
<td>content 1</td>
</tr>
</table>
<table>
<tr>
<td>content 2</td>
</tr>
</table>
Couple of points to note, you may want to change the selectors. Make use of IDs if you can.
Secondly, you may want to clear up the empty table / rows when your done.
I am looking for the elements inside the tbody of table without using the tbody Id or class. from below code i am looking for the values inside td for those who has tr classname tag.
<table id="tableId">
<thead>
</thead>
<tbody>
<tr>
value
</tr>
<tr class="className">
<td>
value
</td>
</tr>
<tr>
value
</tr>
<tr class="className">
<td>
value
</td>
</tr>
</tbody>
</table>
var tableId = document.getElementById('tableId');
var tBody = tableId.getElementsByTagName('tbody')[0];
var tableRow = tBody.getElementsByTagName('tr');
for (var t = 0; t < tableRow.length; t++){
console.log(tableRow[t].innerHTML)
}
Is it possible to add "col width" tag according to number of td tags, within Table tag. if there are 2 td's,then it should add 2 "col width". & if there are 3 then, 3 "col width". and so on.
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
</head>
<body>
<p>This example shows a colgroup that has three columns of different widths:
</p>
<table border="1">
<tr>
<th>Heading</th>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
<table border="1">
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
</body>
</html>
Please can anyone help me,to add "col group" tag according to number of td.
Expected Output:-
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
</head>
<body>
<p>This example shows a colgroup that has three columns of different widths:
</p>
<table border="1">
<colgroup>
<col width="50%"></col>
<col width="20%"></col>
<col width="30%"></col>
</colgroup>
<tr>
<th>Heading</th>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
<table border="1">
<colgroup>
<col width="50%"></col>
<col width="50%"></col>
</colgroup>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
</body>
</html>
you need to first loop through the tables and get the td count for each table. and then create a colgroup based on the count of td's
something like this
var output = '';
$('table').each(function() {
var colCount = 0;
$(this).find('tr:nth-child(1) td').each(function() { // Get the count of table columns
if ($(this).attr('colspan')) { // if there is a <td colspan>
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
console.log($(this));
});
var colgroupList = '';
for (i = 0; i < colCount; i++) { // Add a <colgroup></colgroup> for each <td>
colgroupList += '<col width="50%"></col>';
console.log(colgroupList);
}
console.log('<colgroup>' + colgroupList + '</colgroup>');
$(this).find("tbody").prepend('<colgroup>' + colgroupList + '</colgroup>');
output += $(this).html();
});
here's a working JSFIDDLE for the same.
In jQuery you can count the number of tds in the table by:
var count = $('#tableId td').length();
You can add atrributes to a table by doing:
$('#tableId').attr('name', 'value');
jQuery('table').each(function(){
var t = jQuery(this);
var count = t.children('tr').eq(0).find('td').length;
var colgroup = jQuery('<colgroup/>', { 'span': count });
for(var i = 1; i <= count; i++){
colgroup.append('<col/>',{ 'width' : (100/count)+'%' };
}
t.prepend(colgroup);
});
Untested but should be a good starting point
Yes, you can use jQuery to make things easy.
Here is an example (I used the id "table1" in the table):
$(document).ready(function () {
var size = $("#table1 tr:first > td").length;
var tg = '<colgroup span="' + size + '">';
for(x=0; x<size; x++) {
tg += '<col></col>';
}
tg += '</colgroup>';
$(tg).insertBefore('#table1 > tbody > tr:first');
});
Hope it helps.
Web application using jQuery, I want to add pagination. It works well on Firefox & Chrome. But on IE 8 it can't calculate the number of rows.
this.init = function () {
var rows = document.getElementById(tableName).rows;
var records = (rows.length);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
rows returning 0 in IE 8 but all other browser giving correct row count.
I am appending the html table to DIV
Following is the html created of my table
<TABLE style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" class="pad white" border=0 cellSpacing=1 cellPadding=1 width="100%">
<TBODY>
<TR>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>#</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Date</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Customer</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="30%">
<DIV align=center><STRONG>Description</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Status</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Amount</STRONG></DIV></TD></TR></TBODY></TABLE>
<DIV class=border-middle>
<TABLE id=**tblIncomeListData** class=pad border=0 cellSpacing=0 cellPadding=0 width="100%">
<TR class=even jQuery172016229059503345766="72">
<TD style="DISPLAY: none" vAlign=top width=0% align=middle>30</TD>
<TD vAlign=top width="10%" align=middle>00001</TD>
<TD vAlign=top width="10%" align=middle>May 28, 2013</TD>
<TD vAlign=top width="20%" align=middle>test1</TD>
<TD vAlign=top width="30%" align=middle>Other Income </TD>
<TD vAlign=top width="10%" align=middle>Paid</TD>
<TD style="TEXT-ALIGN: right" vAlign=top width="20%">OMR444.00</TD></TR></TABLE></DIV>
That's odd, I thought IE8 supported the rows property. (Edit: It does: http://jsbin.com/ocufuf/1 Still, I'll leave this in place for now...)
Unless you have a table nested within that table (and it doesn't look like you do), you can replace it with getElementsByTagName:
var rows = document.getElementById(tableName).getElementsByTagName('tr');
Or of course, with jQuery (since you say you're using it, although it's not apparent from your code samples):
var rows = $("#" + tableName + " tr");
Note that if you do that, you'll have to change your table name, as **tblIncomeListData** is a valid id for HTML, but not for CSS.
If you were doing nested tables, you could still get the count easily with jQuery:
var rows = $("#" + tableName).children('thead, tbody, tfoot').children('tr');
document.getElementById(table).getElementsByTagName("tr").length
Since you are using Jquery, use the following code for getting the number of rows.
var rows = $('#tableId tr').length;
Also note that after getElementById, you have used tableName variable.
Don't know if you are storing the id of the table in that variable but ideally the ID of the table element has to be passed if you are using getElementById or #tableId.
Hope this would help.
<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