I need to break table headings well as table rows after 4 . Here I'm generating table dynamically from JSON string through jQuery. The table can contain maximum 16 columns, so I need to break it in 4 rows. The output should look like,
<table border=1>
<thead>
<tr>
<th>COLUMN1</th>
<th>COLUMN2</th>
<th>COLUMN3</th>
<th>COLUMN4</th>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>val4</td>
</tr>
</thead>
<tbody>
<tr>
<th>COLUMN5</th>
<th>COLUMN6</th>
<th>COLUMN7</th>
<th>COLUMN8</th>
</tr>
<tr>
<td>val5</td>
<td>val6</td>
<td>val7</td>
<td>val8</td>
</tr>
</tbody>
</table>
I'm using below code to generate HTML Table from JSON,
var txnJson = JSON.parse('<%=jsonObj1%>');
var tableName;
var colspan = 0;
var colHeader = [];
var rowValue = [];
for (var key in txnJson) {
tableName = key;
console.log(key);
for (var secondKey in txnJson[key]) {
console.log(secondKey + ' : ' + txnJson[key][secondKey]);
for (var thirdkey in txnJson[key][secondKey]) {
colHeader.push(thirdkey);
rowValue.push(txnJson[key][secondKey][thirdkey]);
colspan = colspan +1;
console.log(thirdkey + ' : ' + txnJson[key][secondKey][thirdkey]);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < colHeader.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.setAttribute("class", "RptHeader");
th.innerHTML = colHeader[i];
tr.appendChild(th);
}
tr = table.insertRow(-1);
for (var j = 0; j < rowValue.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = rowValue[j];
}
$('#Div<%=i%>').append(table);
I have tried using $('').html($('#Test1 td:gt(4)')).appendTo('#Test1'); but it only breaks single row. I need to iterate it after every four td.
How can I do it?
I'm able to achieve the same using below code,
`var inp = document.createElement("input");
inp.setAttribute("type","hidden");
inp.setAttribute("id","colCnt<%=i%>");
inp.setAttribute("value",colLength);
$(function () {
var colCnt = $("#colCnt<%=i%>").val();
var thLen = 3;
var tdLen = 4;
$('<tr>').html($('#Tab<%=i%> th:gt('+thLen+')')).appendTo('#Tab<%=i%>');
$('<tr>').html($('#Tab<%=i%> td:gt('+tdLen+')')).appendTo('#Tab<%=i%>');
for (var k = 0; k < colCnt; k++) {
thLen = thLen + 4;
tdLen = tdLen + 4;
$('<tr>').html($('#Tab<%=i%> th:gt('+(thLen)+')')).appendTo('#Tab<%=i%>');
$('<tr>').html($('#Tab<%=i%> td:gt('+(tdLen)+')')).appendTo('#Tab<%=i%>');
}
});
Hope, this might help someone.
Hello I am trying to loop through a table I have in html and want to add next to the cell depending on the value of the cell. For example the following table I have:
<div>
<h1>My Table</h1>
<table id = "table" class = "searchable sortable">
<tr class = "header">
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td> Up</td>
<td>Down</td>
<td> Up </td>
</tr>
<tr>
<td>Up</td>
<td>Up</td>
<td>Down</td>
</tr>
</table>
<div>
if the value of the cell is equal to up I would like to add a image in the cell of an up arrow,
if down add a image of a down arrow.
You can do it by
var table = document.getElementById('table');
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
var image = document.createElement("img");
if(table.rows[r].cells[c].innerHTML === "Up"){
image.src = "/your_image_path_for_up";
} else {
image.src = "/your_image_path_for_down";
}
var newCell = row.insertCell(c+1);
newCell.appendChild(image);
}
}
This will append a new cell with an image to the right of your cell with "Up" or "Down".
Below is the script, which will find all of the cells, loop through them and add appropriate image
<script>
var cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
var cellContent = cell.textContent.toLowerCase().trim();
var img = document.createElement('img')
if (cellContent === 'up') {
img.src = 'src_to_up_arrow_image';
} else if (cellContent === 'down') {
img.src = 'src_to_down_arrow_image';
};
cell.appendChild(img);
}
</script>
How can I adapt this code to make the rows which have been created by the function selectable. I will then use this in as a part of a form to manipulate the data in the specified row.
function staffData() {
if (firstTimeS) {
firstTimeS = false;
// Select the Table
var tbl = document.getElementById('staffInnerTable');
var th = document.getElementById('tableHead_S');
var headerText = ["ID", "Staff Name", "Role"];
// Set number of rows
var rows = 10;
// Set number of columns
var columns = headerText.length;
// create table header
for (var h = 0; h < columns; h++) {
var td = document.createElement("td");
td.innerText = headerText[h];
th.appendChild(td);
}
// create table data
for (var r = 0; r < rows; r++) {
var cellText = ["UNDEFINED", "UNDEFINED", "UNDEFINED"];
// generate ID
x = getRandomNumber(1000, 1);
cellText[0] = x;
// generate Status
x = generateName();
cellText[1] = x;
// generate Role
x = getRole();
cellText[2] = x;
var tr = document.getElementById("s_row" + r);
for (var c = 0; c < columns; c++)
{
var td = document.createElement("td");
td.innerText = cellText[c];
tr.appendChild(td);
}
}
}
}
EDIT - HTML. Tr already defined in html. Would it be possible to somehow put an onclick on the table rows?
<table style="width: 100%; color:white;" id="staffInnerTable">
<tr id="tableHead_S">
</tr>
<tr id="s_row0"></tr>
<tr id="s_row1"></tr>
<tr id="s_row2"></tr>
<tr id="s_row3"></tr>
<tr id="s_row4"></tr>
<tr id="s_row5"></tr>
<tr id="s_row6"></tr>
<tr id="s_row7"></tr>
<tr id="s_row8"></tr>
<tr id="s_row9"></tr>
</table>
If you do this:
var tr = document.getElementById("s_row" + r);
tr.onclick = function(event) {
alert('Clicked: ' + event.target.parentNode.id)
}
...you'll see that a click is detected that tells you which row was clicked on. Hopefully that's enough to get you started on whatever you wanted to do.
Simple html table with NxM values.
The aim is to merge equal cells in column with jQuery.
Note, that in one row there are no duplicates.
I got how to hide the equal cells, but is there any way to combine a cell with data with an empty cell in one?
html:
<table border="1" id="testTable">
<tr>
<td>First</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
<td>S</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
<td>H</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
<td>E</td>
</tr>
</table>
js:
var seenArray = {};
$('#testTable td').each(function()
{
var index = $(this).index();
var txt = $(this).text();
if (seenArray[index] === txt)
{
$(this).text(''); //I think here should be "marging"
}
else
{
seenArray[index] = txt;
}
});
jsFiddle
P.S. One more thing, the data originally is retrieved in json array, then I do .parseJSON() first and put data in table using:
for (var i = 0; i < obj.length; i++)
{
tr = $('<tr/>');
tr.append("<td>" + obj[i]['columnA'] + "</td>");
tr.append("<td>" + obj[i]['columnB'] + "</td>");
tr.append("<td>" + obj[i]['columnC'] + "</td>");
$('#testTable').append(tr);
}
UPD
alFReD NSH made a good solution for 2 cells. Here is his solution.
But, if there will be more than 2 equal cells.
If I get what you mean here, this my edited version: http://jsfiddle.net/djhU7/4/
So instead of $(this).text('') I did this:
$($this.parent().prev().children()[index]).attr('rowspan', 2);
$this.hide();
What I did, was the I set the rowspan of first cell to 2. This attribute "will indicates for how many rows the cell extends." which will make the above cell twice bigger, and I hid the cell with the duplicate information so the extra cell will go away. Note that removing the cell will ruin the index check for the next cell. This was a just a quick and dirty solution but rowspan attribute has to be used somewhere to achieve it.
Here's another version, that sets rowspan on the time when inserting the cells into the table, beside the fact that it works with 3 duplicate cells and more, it's also faster, because it avoids re-rendering of the table(though it can be optimized more, but I don't think at this moment you wanna care about it, premature optimization is the root of all evil!): http://jsfiddle.net/g7uY9/1/
for (var i = 0; i < obj.length; i++) {
tr = $('<tr/>');
addColumn(tr, 'columnA', i);
addColumn(tr, 'columnB', i);
addColumn(tr, 'columnC', i);
$('#testTable').append(tr);
}
function addColumn(tr, column, i) {
var row = obj[i],
prevRow = obj[i - 1],
td = $('<td>' + row[column] + '</td>');
if (prevRow && row[column] === prevRow[column]) {
td.hide();
} else {
var rowspan = 1;
for (var j = i; j < obj.length - 1; j++) {
if (obj[j][column] === obj[j + 1][column]) {
rowspan++;
} else {
break;
}
}
td.attr('rowspan', rowspan);
}
tr.append(td);
}
Please find the improved answer for your query with row expand/collapse. Here is my fiddle:
function MergeGridCells()
{
var dimension_cells = new Array();
var dimension_col = null;
var i = 1;
// First, scan first row of headers for the "Dimensions" column.
$("#mytable").find('th').each(function () {
if ($(this).text() == 'Id') {
dimension_col = i;
}
i++;
});
// first_instance holds the first instance of identical td
var first_instance = null;
var rowspan=1;
// iterate through rows
$("#mytable").find('tr.parent-grid-row').each(function () {
// find the td of the correct column (determined by the dimension_col set above)
var dimension_td = $(this).find('td.parent-grid-column:nth-child(' + dimension_col + ')');
if (first_instance == null) {
// must be the first row
first_instance = dimension_td;
} else if (dimension_td.text() == first_instance.text()) {
// the current td is identical to the previous
// remove the current td
dimension_td.remove();
++rowspan;
// increment the rowspan attribute of the first instance
first_instance.attr('rowspan', rowspan);
} else {
// this cell is different from the last
first_instance = dimension_td;
rowspan=1;
}
});
}
Jquery Cell Merging
Here's a runnable version of carla's answer:
function SummerizeTable(table) {
$(table).each(function() {
$(table).find('td').each(function() {
var $this = $(this);
var col = $this.index();
var html = $this.html();
var row = $(this).parent()[0].rowIndex;
var span = 1;
var cell_above = $($this.parent().prev().children()[col]);
// look for cells one above another with the same text
while (cell_above.html() === html) { // if the text is the same
span += 1; // increase the span
cell_above_old = cell_above; // store this cell
cell_above = $(cell_above.parent().prev().children()[col]); // and go to the next cell above
}
// if there are at least two columns with the same value,
// set a new span to the first and hide the other
if (span > 1) {
// console.log(span);
$(cell_above_old).attr('rowspan', span);
$this.hide();
}
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="SummerizeTable('#table1')">Summerize</button>
<table id="table1" border="1" cellspacing="0" >
<thead>
<tr>
<th>State</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>VT</td>
<td>Burlington</td>
<td>Elm</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Main</td>
</tr>
<tr>
<td>NY</td>
<td>Manhattan</td>
<td>Oak</td>
</tr>
<tr>
<td>NY</td>
<td>Albany</td>
<td>State</td>
</tr>
</tbody>
</table>
I really liked Farid first solution, but I needed to select the range of lines and which columns it would be applied, so I made a few modifications (including the possiblity of more than 2 cells merge). http://jsfiddle.net/djhU7/72/
function Merge_cells($id_table,$lin_ini,$lin_fim,$array_col=array()){
$colunas="";
for($k=0;$k<count($array_col);$k++) $colunas=$colunas . " col =='$array_col[$k]' ||";
if(count($array_col)>0) $colunas="(".substr($colunas,0,-3).") &&";
echo "<script>
$('#$id_table td').each(function()
{
var \$this = $(this);
var col = \$this.index();
var txt = \$this.text();
var row = $(this).parent()[0].rowIndex;
//define the interval of lines and columns it will look at
if((col==0 || col==1 || col==2) row>=firstRow && row<=lastRow){
span=1;
cell_above = $(\$this.parent().prev().children()[col]);
//look for cells one above another with the same text
while(cell_above.text()=== txt){ //if the text is the same
span+=1; //increase the span
cell_above_old = cell_above; //store this cell
cell_above = $(cell_above.parent().prev().children()[col]); //and go to the next cell above
}
//if there are at least two columns with the same value, set a new span to the first and hide the other
if(span>1) {
console.log(span);
$(cell_above_old).attr('rowspan',span);
\$this.hide();
}
}
});
</script>";
}
I extended carla's solution.
With two functions, we can merge horizontally or vertically
and exclude or include cells to merge.
try the working sample. https://jsfiddle.net/bn3u63pe
/*
* merge horizontally
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByCol(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative to go to the end of cols
) {
/*
console.log('autoMergeByCol tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('rowspan')) {continue;}
var cellNext = $($(theCell).parent().children()[colIndex + span]);
while(cellNext != undefined
&& $(theCell).text() == $(cellNext).text()
&& colIndex + span <= colEnd ) {
span++;
cellNext.hide();
cellNext = $($(cellNext).parent().children()[colIndex + span]);
}
if(span > 1) $(theCell).attr('colspan', span);
}
}
}
/*
* merge vertically
* ex) autoMergeByCol('theTable', 2, 0, 0);
*/
function autoMergeByRow(tableId
, rowStartIndex // zero or positive
, colStart // zero or positive
, colEnd // equals to colStart or greater than colStart or negative
) {
/*
console.log('autoMergeByRow tableId=' + tableId
+ ', rowStartIndex=' + rowStartIndex
+ ', colStart=' + colStart
+ ', colEnd=' + colEnd
);
*/
var trArr = $('#' + tableId).find('tr'); // rows array
for(var rowIndex = rowStartIndex ; rowIndex < trArr.length ; rowIndex++) {
var tdArr = $(trArr[rowIndex]).find('td'); // cols array of the row
if(colEnd < 0) colEnd = tdArr.length - 1; // if colEnd is negative, process at the end of the cols;
for(var colIndex = colStart ; colIndex < tdArr.length && colIndex <= colEnd ; colIndex++) {
var span = 1;
var theCell = $(tdArr)[colIndex];
if($(theCell).attr('colspan')) {continue;}
var cellBelow = $($(theCell).parent().next().children()[colIndex]);
while(cellBelow != undefined
&& $(theCell).text() == $(cellBelow).text()) {
span++;
cellBelow.hide();
cellBelow = $($(cellBelow).parent().next().children()[colIndex]);
}
if(span > 1) $(theCell).attr('rowspan', span);
}
}
}
$(document).ready(function () {
SummerizeTable($('#example'));
})
function SummerizeTable(table) {
$(table).each(function () {
$(table).find('td').each(function () {
var $this = $(this);
var col = $this.index();
var html = $this.html();
var row = $(this).parent()[0].rowIndex;
var span = 1;
var cell_above = $($this.parent().prev().children()[col]);
while (cell_above.html() === html) {
span += 1;
cell_above_old = cell_above;
cell_above = $(cell_above.parent().prev().children()[col]);
}
if (span > 1) {
$(cell_above_old).attr('rowspan', span);
$this.hide();
}
});
});
}
See Working Example here.
I have the following HTML structure:
<table id="j_idt28:innerContent" class="innerContent">
<tbody>
<tr>
<tr>
<tr>
<tr>
.......
<tr>
<tr>
</tbody>
</table>
The tags are being populated with a parsed XML response.
I usually have 20 or so tr tags.
I want that after the 4th, 8th, 12, etc tag to create a and insert the 4 tags into it.
Here is my jquery so far:
var i = 1;
var j = 2;
var margin = 0;
var max = $('.innerContent tr').length;
for(i = 1; i<=max; i++)
{
var child1 = i - 3;
var child2 = i - 2;
var child3 = i - 1;
var hotel1 = $('.innerContent tr:nth-child('+child1+')');
var hotel2 = $('.innerContent tr:nth-child('+child2+')');
var hotel3 = $('.innerContent tr:nth-child('+child3+')');
var hotel4 = $('.innerContent tr:nth-child('+i+')');
if(i%4 == 0)
{
$('.innerContent tbody').prepend('<div class="line_wrapper"></div>');
$('.line_wrapper').append(hotel1,hotel2,hotel3,hotel4);
}
}
for(j =2; j<=max ;j++)
{
var hotel = $('.innerContent tr:nth-child('+j+')');
margin = margin + 280;
hotel.css('margin-left',margin+'px');
//$('.line_wrapper').append(hotel);
}
This just does not quite work as I would have expected. I want to add the divs in order for me to use bootstrap fluid layout.
You can do it using each:
$('#mytable tr').each(function (i) {
i%4?$(this).prev('div').append(this):$(this).wrap('<div/>');
});