How can i get the position number of an element? - html

Is there any plugin in firefox or function in firebug or something else, that lets me se the position number of a specific element?
If i for example want to know the what position a specific TD element has compared to all the TD's in the document.
EXAMPLE:
<html>
<head>
<body>
<table>
<tr>
<td></td> (0)
<td></td> (1)
<td></td> (2)
<td></td> (3)
<td></td> (And so on...)
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> <------ WHAT IS THE POSITION NUMBER OF THIS TD?
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
The webdeveloper toolbar in firefox has a tool that lets you see the index number of all DIV's. This is what i need but for other elements, not just DIV.
PS. I was inspired by the correct answer and i made my own solution:
var dom = document.getElementsByTagName('td');
var x;
for(x = 0; x < dom.length; x++)
{
dom[x].innerHTML = dom[x].nodeName + '[' + x + '] ' + '(' + dom[x].innerHTML + ')';
dom[x].style.color = 'blue';
}


Well, the following will do as you need:
$('li').each(
function(i) {
$(this).text('list element ' + i);
});
function indexAmongSiblings(elem) {
if (!elem) {
return false;
}
var that = elem;
var parent = that.parentNode;
var siblings = parent.childNodes;
var elemSiblings = [];
for (var s = 0, numberOf = siblings.length; s < numberOf; s++) {
if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) {
elemSiblings.push(siblings[s]);
}
}
for (var e=0,l=elemSiblings.length; e<l; e++){
if (elemSiblings[e] == elem){
console.log('Element number: ' + e + ' among its siblings.');
}
}
}
var elements = document.getElementsByTagName('*');
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function(e) {
e.stopPropagation();
indexAmongSiblings(this);
};
}
JS Fiddle demo.
Edited the above in order to show how to assign the element's index, amongst its siblings, to a variable:
$('li').each(
function(i) {
$(this).text('list element ' + i);
});
function indexAmongSiblings(elem) {
if (!elem) {
return false;
}
var that = elem;
var parent = that.parentNode;
var siblings = parent.childNodes;
var elemSiblings = [];
for (var s = 0, numberOf = siblings.length; s < numberOf; s++) {
if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) {
elemSiblings.push(siblings[s]);
}
}
for (var e=0,l=elemSiblings.length; e<l; e++){
if (elemSiblings[e] == elem){
// the following returns the index-point amongst siblings
return e;
}
}
}
var elements = document.getElementsByTagName('*');
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function(e) {
e.stopPropagation();
var thisIndex = indexAmongSiblings(this);
// the thisIndex variable now holds the returned index-point
};
}
Edited in response to comments left on other answers, by OP:
I want the number/sequence position of a specific element(e.g ) compared to equal elements(e.g ) in the whole DOM.
Citation.
The following function will get, and return, the index position of the clicked element amongst other tags of the same type in the document (which is actually somewhat easier than the above):
function indexAmongSameTags(elem) {
if (!elem || !elem.tagName) {
return false;
}
var thisIs = elem.tagName.toLowerCase(),
sameAs = document.getElementsByTagName(thisIs);
for (var i=0,len=sameAs.length; i<len; i++){
if (sameAs[i] == elem){
console.log('You clicked ' + thisIs + ' of index position "' + i + '" among ' + len + ' other ' + thisIs + ' elements');
return i;
}
}
}
var elements = document.getElementsByTagName('*');
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function(e) {
e.stopPropagation();
var indexPosition = indexAmongSameTags(this);
console.log(indexPosition);
};
}
JS Fiddle demo.
References:
childNodes.
e.preventDefault().
e.stopPropagation().
getElementsByTagName().
parentNode.
push().


Dom-tree. Every element have number if you try to get it by their XPath.


EDIT
Sorry, I've misunderstood your question. Here is the answer then:
Open your firebug
Select your element with the inspect tool
Once you clicked, one the right side click the dom link
See the cell index there.
Like this:
With javascript you can get the numbers of tds.
var tds = document.getElementsByTagName('td'); // this will return every td in the document.
if (console && console.log)
console.log(tds.length);
else
alert(tds.length);
The example above will print the totoal number of td elements in your document. However, if you want a particular td, you should give that td an identifier. For instance assume your html file is like:
...
<td id="your_td"></td>
...
Now with javascript you can:
var td = document.getElementById('your_td'); // this will return the td
// if you want its position you can:
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
if (tds[i] === td)
alert(i);
}
This example will give your td's position.

Related

Printing an array of arrays from value input in html table

I am trying to print a 2-d array that i get from an http request to the variable value using this code
<table style="width:100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
<script>
var x ="", i;
var y ="", j;
for (i=0; i<value.length; i++) {
x ="<tr>" +
for (j=0; j<3; j++){
y = "<td>" + {{ value[i][j] }} + "</td>";
}
+ "</tr>";
}
</script>
</table>
Any ideas why it isn't working? :P

Tag <script> not displayed in any way, you need to use JavaScript methods for DOM manipulation
const values = [
["name1", "age1", "school1"],
["name2", "age2", "school2"],
];
const tbody = document.querySelector("tbody");
for (let i = 0; i < values.length; i++) {
const tr = document.createElement("tr");
const fields = values[i];
for (let j = 0; j < fields.length; j++) {
const field = fields[j];
const td = document.createElement("td");
td.textContent = field;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
<table style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>School</th>
</tr>
</thead>
<tbody></tbody>
</table>

You are trying to concatenate string with a for loop. You cannot do that. Also, declare i and j variables inside the for loop so they are automatically removed when the loop is done. You do not need the y variable because you can create a long string as x and then use it as innerHTML somewhere. Lastly, the value array was incorrectly used. {} is used to create an object. For example var b = {}; When you want to actually use the object, you refer to it by its name, but you said you have an array already.
<script>
var x ="";
for (var i=0; i<value.length; i++) {
x +="<tr>";
for (var j=0; j<value[i].length; j++){
x += "<td>" + value[i][j] + "</td>";
}
x += "</tr>";
}
//use your output x variable here
</script>

Workaround for <thead> and <tfoot> being printed on every page in webkit

WebKit prints <thead> and <tfoot> only on the first page. According to W3 <thead> and <tfoot>:
When long tables are printed, the table head and foot information may be repeated on each page that contains table data
We are using Rotativa which is based on WebKit for rendering PDF and having issues with thead and tfoot not being rended on every page.
Is there any workaround or toggle to solve this?

BEGIN HACK
Finally, I used following JS script to split my table into multiple pages:
<script>
function splitTable(table, maxHeight, firstPageMaxHeight) {
var header = table.children("thead");
if (!header.length)
return;
var headerHeight = header.outerHeight();
var header = header.detach();
var splitIndices = [0];
var rows = table.children("tbody").children();
maxHeight -= headerHeight;
var currHeight = 0;
var firstPage = true;
rows.each(function (i, row) {
currHeight += $(rows[i]).outerHeight();
if (firstPage) {
currHeight += (maxHeight - firstPageMaxHeight);
firstPage = false;
}
if (currHeight > maxHeight) {
splitIndices.push(i);
currHeight = $(rows[i]).outerHeight();
}
});
splitIndices.push(undefined);
table = table.replaceWith('<div id="_split_table_wrapper"></div>');
table.empty();
for (var i = 0; i < splitIndices.length - 1; i++) {
var newTable = table.clone();
header.clone().appendTo(newTable);
$('<tbody />').appendTo(newTable);
rows.slice(splitIndices[i], splitIndices[i + 1]).appendTo(newTable.children('tbody'));
newTable.appendTo("#_split_table_wrapper");
if (splitIndices[i + 1] !== undefined) {
$('<div style="page-break-after: always; margin:0; padding:0; border: none;"></div>').appendTo("#_split_table_wrapper");
}
}
}
$(document).ready(function () {
splitTable($(".po-report"), 2100, 600);
});
</script>
END HACK

How to keep header row fixed while scrolling on a sortable table

I have seen many ways to make the header fixed on a standard table, but usually this involves cloning the table (to match the variable widths). This of course would not work for me as the header is clickable, allowing people to sort the contents of certain rows.
So, is there a way to essentially 'freeze' the header row while still retaining the functionality of the sort?
Here is the basic table code (all css kept in 'stylesheet' for cleanliness & likewise with js)
var stIsIE = /*#cc_on!#*/false;
sorttable = {
init: function() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
if (_timer) clearInterval(_timer);
if (!document.createElement || !document.getElementsByTagName) return;
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
forEach(document.getElementsByTagName('table'), function(table) {
if (table.className.search(/\bsortable\b/) != -1) {
sorttable.makeSortable(table);
}
});
},
makeSortable: function(table) {
if (table.getElementsByTagName('thead').length == 0) {
// table doesn't have a tHead. Since it should have, create one and
// put the first table row in it.
the = document.createElement('thead');
the.appendChild(table.rows[0]);
table.insertBefore(the,table.firstChild);
}
// Safari doesn't support table.tHead, sigh
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
if (table.tHead.rows.length != 1) return; // can't cope with two header rows
// Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
// "total" rows, for example). This is B&R, since what you're supposed
// to do is put them in a tfoot. So, if there are sortbottom rows,
// for backwards compatibility, move them to tfoot (creating it if needed).
sortbottomrows = [];
for (var i=0; i<table.rows.length; i++) {
if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
sortbottomrows[sortbottomrows.length] = table.rows[i];
}
}
if (sortbottomrows) {
if (table.tFoot == null) {
// table doesn't have a tfoot. Create one.
tfo = document.createElement('tfoot');
table.appendChild(tfo);
}
for (var i=0; i<sortbottomrows.length; i++) {
tfo.appendChild(sortbottomrows[i]);
}
delete sortbottomrows;
}
// work through each column and calculate its type
headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) {
// manually override the type with a sorttable_type attribute
if (!headrow[i].className.match(/\bsorttable_nosort\b/)) { // skip this col
mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
if (mtch) { override = mtch[1]; }
if (mtch && typeof sorttable["sort_"+override] == 'function') {
headrow[i].sorttable_sortfunction = sorttable["sort_"+override];
} else {
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);
}
// make it clickable to sort
headrow[i].sorttable_columnindex = i;
headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i],"click", sorttable.innerSortFunction = function(e) {
if (this.className.search(/\bsorttable_sorted\b/) != -1) {
// if we're already sorted by this column, just
// reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted',
'sorttable_sorted_reverse');
this.removeChild(document.getElementById('sorttable_sortfwdind'));
sortrevind = document.createElement('span');
sortrevind.id = "sorttable_sortrevind";
sortrevind.innerHTML = stIsIE ? '&nbsp<font face="webdings">5</font>' : ' ▴';
this.appendChild(sortrevind);
return;
}
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
// if we're already sorted by this column in reverse, just
// re-reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted_reverse',
'sorttable_sorted');
this.removeChild(document.getElementById('sorttable_sortrevind'));
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
return;
}
// remove sorttable_sorted classes
theadrow = this.parentNode;
forEach(theadrow.childNodes, function(cell) {
if (cell.nodeType == 1) { // an element
cell.className = cell.className.replace('sorttable_sorted_reverse','');
cell.className = cell.className.replace('sorttable_sorted','');
}
});
sortfwdind = document.getElementById('sorttable_sortfwdind');
if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
sortrevind = document.getElementById('sorttable_sortrevind');
if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
this.className += ' sorttable_sorted';
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
// build an array to sort. This is a Schwartzian transform thing,
// i.e., we "decorate" each row with the actual sort key,
// sort based on the sort keys, and then put the rows back in order
// which is a lot faster because you only do getInnerText once per row
row_array = [];
col = this.sorttable_columnindex;
rows = this.sorttable_tbody.rows;
for (var j=0; j<rows.length; j++) {
row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
}
/* If you want a stable sort, uncomment the following line */
//sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
/* and comment out this one */
row_array.sort(this.sorttable_sortfunction);
tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) {
tb.appendChild(row_array[j][1]);
}
delete row_array;
});
}
}
},
guessType: function(table, column) {
// guess the type of a column based on its first non-blank row
sortfn = sorttable.sort_alpha;
for (var i=0; i<table.tBodies[0].rows.length; i++) {
text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
if (text != '') {
if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
return sorttable.sort_numeric;
}
// check for a date: dd/mm/yyyy or dd/mm/yy
// can have / or . or - as separator
// can be mm/dd as well
possdate = text.match(sorttable.DATE_RE)
if (possdate) {
// looks like a date
first = parseInt(possdate[1]);
second = parseInt(possdate[2]);
if (first > 12) {
// definitely dd/mm
return sorttable.sort_ddmm;
} else if (second > 12) {
return sorttable.sort_mmdd;
} else {
// looks like a date, but we can't tell which, so assume
// that it's dd/mm (English imperialism!) and keep looking
sortfn = sorttable.sort_ddmm;
}
}
}
}
return sortfn;
},
getInnerText: function(node) {
// gets the text we want to use for sorting for a cell.
// strips leading and trailing whitespace.
// this is *not* a generic getInnerText function; it's special to sorttable.
// for example, you can override the cell text with a customkey attribute.
// it also gets .value for <input> fields.
if (!node) return "";
hasInputs = (typeof node.getElementsByTagName == 'function') &&
node.getElementsByTagName('input').length;
if (node.getAttribute("sorttable_customkey") != null) {
return node.getAttribute("sorttable_customkey");
}
else if (typeof node.textContent != 'undefined' && !hasInputs) {
return node.textContent.replace(/^\s+|\s+$/g, '');
}
else if (typeof node.innerText != 'undefined' && !hasInputs) {
return node.innerText.replace(/^\s+|\s+$/g, '');
}
else if (typeof node.text != 'undefined' && !hasInputs) {
return node.text.replace(/^\s+|\s+$/g, '');
}
else {
switch (node.nodeType) {
case 3:
if (node.nodeName.toLowerCase() == 'input') {
return node.value.replace(/^\s+|\s+$/g, '');
}
case 4:
return node.nodeValue.replace(/^\s+|\s+$/g, '');
break;
case 1:
case 11:
var innerText = '';
for (var i = 0; i < node.childNodes.length; i++) {
innerText += sorttable.getInnerText(node.childNodes[i]);
}
return innerText.replace(/^\s+|\s+$/g, '');
break;
default:
return '';
}
}
},
reverse: function(tbody) {
// reverse the rows in a tbody
newrows = [];
for (var i=0; i<tbody.rows.length; i++) {
newrows[newrows.length] = tbody.rows[i];
}
for (var i=newrows.length-1; i>=0; i--) {
tbody.appendChild(newrows[i]);
}
delete newrows;
},
/* sort functions
each sort function takes two parameters, a and b
you are comparing a[0] and b[0] */
sort_numeric: function(a,b) {
aa = parseFloat(a[0].replace(/[^0-9.-]/g,''));
if (isNaN(aa)) aa = 0;
bb = parseFloat(b[0].replace(/[^0-9.-]/g,''));
if (isNaN(bb)) bb = 0;
return aa-bb;
},
sort_alpha: function(a,b) {
if (a[0].toLowerCase()==b[0].toLowerCase()) return 0;
if (a[0].toLowerCase()<b[0].toLowerCase()) return -1;
return 1;
},
sort_ddmm: function(a,b) {
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
},
sort_mmdd: function(a,b) {
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
},
shaker_sort: function(list, comp_func) {
// A stable sort function to allow multi-level sorting of data
// see: http://en.wikipedia.org/wiki/Cocktail_sort
// thanks to Joseph Nahmias
var b = 0;
var t = list.length - 1;
var swap = true;
while(swap) {
swap = false;
for(var i = b; i < t; ++i) {
if ( comp_func(list[i], list[i+1]) > 0 ) {
var q = list[i]; list[i] = list[i+1]; list[i+1] = q;
swap = true;
}
} // for
t--;
if (!swap) break;
for(var i = t; i > b; --i) {
if ( comp_func(list[i], list[i-1]) < 0 ) {
var q = list[i]; list[i] = list[i-1]; list[i-1] = q;
swap = true;
}
} // for
b++;
} // while(swap)
}
}
/* ******************************************************************
Supporting functions: bundled here to avoid depending on a library
****************************************************************** */
// Dean Edwards/Matthias Miller/John Resig
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", sorttable.init, false);
}
/* for Internet Explorer */
/*#cc_on #*/
/*#if (#_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
sorttable.init(); // call the onload handler
}
};
/*#end #*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
sorttable.init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = sorttable.init;
// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
function dean_addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
}
};
// a counter used to create unique IDs
dean_addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
}
// Dean's forEach: http://dean.edwards.name/base/forEach.js
/*
forEach, version 1.0
Copyright 2006, Dean Edwards
License: http://www.opensource.org/licenses/mit-license.php
*/
// array-like enumeration
if (!Array.forEach) { // mozilla already supports this
Array.forEach = function(array, block, context) {
for (var i = 0; i < array.length; i++) {
block.call(context, array[i], i, array);
}
};
}
// generic enumeration
Function.prototype.forEach = function(object, block, context) {
for (var key in object) {
if (typeof this.prototype[key] == "undefined") {
block.call(context, object[key], key, object);
}
}
};
// character enumeration
String.forEach = function(string, block, context) {
Array.forEach(string.split(""), function(chr, index) {
block.call(context, chr, index, string);
});
};
// globally resolve forEach enumeration
var forEach = function(object, block, context) {
if (object) {
var resolve = Object; // default
if (object instanceof Function) {
// functions have a "length" property
resolve = Function;
} else if (object.forEach instanceof Function) {
// the object implements a custom forEach method so use that
object.forEach(block, context);
return;
} else if (typeof object == "string") {
// the object is a string
resolve = String;
} else if (typeof object.length == "number") {
// the object is array-like
resolve = Array;
}
resolve.forEach(object, block, context);
}
};
div#main { margin-left:1%; margin-right:1%; }
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {content: " \25B4\25BE"}
table.sortable tbody tr:nth-child(2n) td {background: #ffcccc;}
table.sortable tbody tr:nth-child(2n+1) td {background: #ccfffff;}
.sm { font-size:small; }
.text { text-align:center; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RuneScape Quest Checklist</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
<script type="text/javascript" src="sorttable.js"></script>
</head>
<body>
<div id="main">
<table class="sortable" border="0" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th class="sorttable_nosort" title="Unsortable" style="width: 55px;"><strong>Done</strong></th>
<th title="Click to sort"><strong>Quest Name</strong></th>
<th title="Click to sort"><strong>Difficulty</strong></th>
<th title="Click to sort"><strong>Length</strong></th>
<th class="sorttable_nosort" title="Unsortable"><strong>Skill Req.</strong></th>
<th class="sorttable_nosort" title="Unsortable"><strong>Quest Req.</strong></th>
<th title="Click to sort"><strong>QP</strong></th>
<th class="sorttable_nosort" title="Unsortable"><strong>Rewards</strong></th>
<th title="Click to sort"><strong>Free/Members</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="sm text"><input name="done[1]" value="1" type="checkbox"></td>
<td class="sm text">Quest Name</td>
<td class="sm text"><div style="display: none;">1</div>Novice (to Grandmaster)</td>
<td class="sm text"><div style="display: none;">1</div>Short (to Very Long)</td>
<td class="sm text">Various Skills</td>
<td class="sm text">Various Quests</td>
<td class="sm text">1 (to 3)</td>
<td class="sm">
<ul>
<li>Reward 1</li>
<li>Reward 2</li>
<li>etc...</li>
</ul>
</td>
<td class="sm text">Membership req (or not)</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

try like this example
this link also helpful to you. fixed header of table
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width: 100%;
}
td + td {
border-left: 1px solid #eee;
}
td,
th {
border-bottom: 1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>

I have a nice/working solution with jQuery.
Assume your table's class is "fixed_header" then add following code:
CSS:
.fixed_header{position:relative; border-collapse: collapse;}
JavaScript:
var originalHeader;
var floatingHeader;
$(document).ready(function () {
var tableObj=$('.fixed_header'); //or other CSS selector as `#tableId`
var tableBaseTop = tableObj.offset().top;
originalHeader = $('.fixed_header tr:first-child'); //change CSS selector here also
floatingHeader = originalHeader.clone();
floatingHeader
.css('position', 'absolute')
.css('top', 0);
setFloatingHeaderSize();
tableObj.prepend(floatingHeader);
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > tableBaseTop && windowTop < tableBaseTop + tableObj.height() - 100)
floatingHeader.css('top', windowTop - tableBaseTop);
else floatingHeader.css('top', 0); //floating-header is just on Original-one
});
$(window).resize(setFloatingHeaderSize);
});
function setFloatingHeaderSize() {
var originalThs = originalHeader.find('th');
var floatingThs = floatingHeader.find('th');
for (var i = 0; i < originalThs.length; i++) {
floatingThs.eq(i)
.css('width', originalThs.eq(i).width())
.css('height', originalThs.eq(i).height());
}
}
Best part of it, you don't need to change anything in you HTML, it'll directly work on any TABLE, just replace class-name(OR any other css-selector to that table) of table in which header should be fixed.
Concept: It creates a clone header(first row) and display above original one. We set the listener-function for window-scroll event AND when table-scrolled to TOP-of-Window then original one goes-up and clone one remains at top, coz we set it's margin-top to scrolled height. See at this line: if (windowTop > tableBaseTop && windowTop < tableBaseTop + tableObj.height() - 100).
Trick For Your Case: For your clickable feature on clone header, I would rather suggest you to apply your event listener on cloned-header, after cloning header(after following line): tableObj.prepend(floatingHeader);. Coz, cloned-header will be one top always, when user will click on any column-head, the event will we actually captured by cloned-header.
If your events are automatically set by any script(means not in your control), then either try putting(running) that script after above(my-js) OR apply click-event-listener on cloned-header's column for original-one, so that if anybody click then original's click event will also fire.
Code-ex:
function simulateClickOnOriginal() {
var originalThs = originalHeader.find('th');
var floatingThs = floatingHeader.find('th');
for (var i = 0; i < floatingThs.length; i++) {
floatingThs.eq(i).click(function(){
originalThs.eq(i).trigger( "click" );
});
}
}

Select all but one column of HTML table

I'm using the following to select a table element in my application for users to drag/drop a table into Excel:
$('#footer').on("click", "#exportSel", function () {
var el = document.getElementById(curTable);
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
if (sel.removeAllRanges) {
sel.removeAllRanges();
} else if (sel.empty) {
sel.empty();
}
}
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
});
...and everything is working fine. Except one of my tables has images in a column, and I would like remove this column (or td's in that column) from the selection.
I added the "Picture" td's to a "nosel" class, and was able to put all td's in the table not in that class into a variable:
cells = $("#" + curTable + " tr td:not(.nosel)");
I then omitted the code to remove or empty the current selection, and tried adding each cell to the selection:
range.selectNode(cells[i]);
sel.addRange(range);
... but only the first td is being selected.
So two questions:
Is this even possible?
Is there a better method to use than addRange? I tried extend but that did not work.
As requested, here is an example of my table:
<table class="sortable" id="resultsTable" border="1">
<thead id="resultsHeader">
<th>OID</th>
<th>Image</th>
<th>Address</th>
<th>Parcel ID</th>
</thead>
<tbody id="resultsBody" data-ssimplename="results">
<tr>
<td>1</td>
<td align="center" class="nosel"><img style="width: 125px;" src="http://www.vanderburghassessor.org/assessor_images/12/180/34/213/020/12-180-34-213-020-S.jpg"></td>
<td align="center">5830 N KERTH AVE</td>
<td align="center">82-06-04-034-213.020-020</td>
</tr>
</tbody>
</table>

You can use the .not() function from jQuery.
$('myElements').not('myExcludedElements');
UPDATE:
JSFiddle would not load up for me for some reason so here it is in CodePen instead.
Example

I have decided to go about this another way.
Instead of removing the Image column from the selection, I am going to convert the images to the URL string when they make the selection:
`
for (i = 0; i < imgs.length; i++) {
var urlT = $(imgs[i]).attr('src');
$(imgs[i]).hide();
$(imgs[i]).parent().text(urlT);
}
`
This way the URL still exists to the image if in fact someone wants it.
The only issue is trying to restore the image once the selection is cleared. I tried adding an .on() function but it doesn't want to work correctly:
`
$('body').on('click', function () {
if ($("#" + curTable + " img:hidden").length > 0) {
var imgs = $('#' + curTable + " img:hidden");
for (i = 0; i < imgs.length; i++) {
$(imgs[i]).parent().text() = '';
imgs[i].show();
}
}
});
`
I can deal with it not restoring, but obviously I would prefer if it did.

How to make HTML table "Excel-like" editable for multiple cells, i.e. simultaneous copy-paste features?

I need my HTML table to be editable so that user inserted data could be sent to the server. However due to the table's size (50 rows) it would not be convenient for users to insert data points one-by one if I introduce contenteditable attribute as following:
<table>
<tr><td><div contenteditable>editable</div></td><td><div contenteditable>editable</div></td></tr>
//...........
</table>
How can I make my table be editable similar to excel spreadsheet, if possible without using dojo etc?
I have done this in Java using ExcelAdapter class. Is there any way I could do it in HTML?

You can add a listener to the input event of each cell, and if the cell contains multiple data items split them across the next cells.
function init()
{
var tables = document.getElementsByClassName("editabletable");
var i;
for (i = 0; i < tables.length; i++)
{
makeTableEditable(tables[i]);
}
}
function makeTableEditable(table)
{
var rows = table.rows;
var r;
for (r = 0; r < rows.length; r++)
{
var cols = rows[r].cells;
var c;
for (c = 0; c < cols.length; c++)
{
var cell = cols[c];
var listener = makeEditListener(table, r, c);
cell.addEventListener("input", listener, false);
}
}
}
function makeEditListener(table, row, col)
{
return function(event)
{
var cell = getCellElement(table, row, col);
var text = cell.innerHTML.replace(/<br>$/, '');
var items = split(text);
if (items.length === 1)
{
// Text is a single element, so do nothing.
// Without this each keypress resets the focus.
return;
}
var i;
var r = row;
var c = col;
for (i = 0; i < items.length && r < table.rows.length; i++)
{
cell = getCellElement(table, r, c);
cell.innerHTML = items[i]; // doesn't escape HTML
c++;
if (c === table.rows[r].cells.length)
{
r++;
c = 0;
}
}
cell.focus();
};
}
function getCellElement(table, row, col)
{
// assume each cell contains a div with the text
return table.rows[row].cells[col].firstChild;
}
function split(str)
{
// use comma and whitespace as delimiters
return str.split(/,|\s|<br>/);
}
window.onload = init;
Demo: http://jsfiddle.net/yRnkF/

you can achieve this easily by adding handsontable
change any div to a excel table
var $container = $("#divid");
$container.handsontable({
data: getData(),
rowHeaders: true,
colHeaders: true,
contextMenu: true //forces dom to use custom right click functionality like add row delete row add column etc
});
jsFiddle : http://jsfiddle.net/jwtskyLa/

Pure javascript. Just mark a table with 'editabletable' class.
index.html:
<table class="editabletable" border="1">
<tr> <td>a</td> <td>b</td> <td>c</td> </tr>
<tr> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>g</td> <td>h</td> <td>i</td> </tr>
</table>
<script src="index.js"></script>
index.js:
function makeeditable(table) {
for (let i = 0; i < table.rows.length; i++) {
for (let j = 0; j < table.rows[i].cells.length; j++) {
// with contenteditable in each cell, it is possible to navigate through them with tab key
table.rows[i].cells[j].setAttribute("contenteditable", "true");
}
}
}
function addpastelistener(table) {
table.addEventListener('paste', (event) => {
event.preventDefault();
let paste = (event.clipboardData || window.clipboardData).getData('text');
let col = event.target;
while (col && col.tagName != 'TD') col = col.parentElement;
let row = col;
while (row && row.tagName != 'TR') row = row.parentElement;
let tab = row;
while (tab && tab.tagName != 'TBODY' && tab.tagName != 'TABLE') tab = tab.parentElement;
let rows = paste.replace(/(\r\n)|\r|\n/g, '\n').split("\n");
for (let i = 0, r = row.rowIndex; i < rows.length && r < table.rows.length; i++) {
let cells = rows[i].split("\t");
for (let j = 0, c = col.cellIndex; j < cells.length && c < table.rows[r].cells.length; j++) {
table.rows[r].cells[c].innerHTML = cells[j].trim();
c++;
}
r++;
}
});
}
function init() {
const editabletables = document.getElementsByClassName('editabletable');
for (let i = 0; i < editabletables.length; i++) {
makeeditable(editabletables[i]);
addpastelistener(editabletables[i]);
}
}
init();