I have the following script working to add odd and even classes to alternating table rows which works fine.
function alternate(){
if(document.getElementsByTagName){
var table = document.getElementsByTagName("table");
var rows = document.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
However a problem arises when there is more than one table on a page. I need the counter to reset for each table on the page so the first row of each table always has the same class (i.e. odd). Currently the second table on the page will just carry on counting rows odd-even so it will start on a different class if the first table has an odd number of rows.
Can anyone help me change this code to achieve this?
Here you go:
function alternate() {
var i, j, tables, rows;
tables = document.getElementsByTagName( 'table' );
for ( i = 0; i < tables.length; i += 1 ) {
rows = tables[i].rows;
for ( j = 0; j < rows.length; j += 1 ) {
rows[j].className = j % 2 ? 'even' : 'odd';
}
}
}
Live demo: http://jsfiddle.net/simevidas/w6rvd/
Alternative solution:
(Substituting the for iteration statements with forEach invocations makes the code more terse. Doesn't work in IE8 though :/.)
function alternate() {
var tables = document.getElementsByTagName( 'table' );
[].forEach.call( tables, function ( table ) {
[].forEach.call( table.rows, function ( row, i ) {
row.className = i % 2 ? 'even' : 'odd';
});
});
}
Live demo: http://jsfiddle.net/simevidas/w6rvd/1/
You have to add a for for each table:
function alternate(){
if(document.getElementsByTagName){
var table = document.getElementsByTagName("table");
// each table
for(a = 0; a < table.length; a++){
var rows = table[a].getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
}
do this work, based on each table
function alternate(){
if(document.getElementsByTagName){
var table = document.getElementsByTagName("table");
var rows = document.getElementsByTagName("tr");
for(var a = 0; a < table.length; a++){
{
for(var i = 0; i < table[a].rows.length; i++){
//manipulate rows
if(i % 2 == 0){
table[a].rows[i].className = "even";
}else{
table[a].rows[i].className = "odd";
}
}
}
} }
}
Related
Using the following,
var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == "one") {
cells[i].style.backgroundColor = "red";
}
}
http://jsfiddle.net/jfriend00/Uubqg/
does anyone know how I can locate any word in a row and have it highlight a specific cell in the same row
take for instance if the word one is found anywhere, it highlights the first cell in that row?
To highlight the first cell, just go back to the parent rows and get the cells:
var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == "one") {
var row = cells[i].parentNode;
row.getElementsByTagName("td")[0].style.backgroundColor = "red";
}
}
sure, just look at the cell's parentNode, and then children[0] like this:
var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == "one") {
cells[i].parentNode.firstChild.children[0].style.backgroundColor = "red";
}
}
working fiddle:
http://jsfiddle.net/Uubqg/47/
In this function I will print the textbox within table dynamically.
function makeTable() {
row = new Array();
cell = new Array();
row_num = 20;
cell_num = 4;
tab = document.createElement('table');
tab.setAttribute('id', 'newtable');
tbo = document.createElement('tbody');
tbo.setAttribute('id', 'tabody');
for (c = 0; c < row_num; c++) {
row[c] = document.createElement('tr');
for (k = 0; k < cell_num; k++) {
cell[k] = document.createElement('td');
This is used for print the textbox within table.
if (k > 0) {
cont = document.createElement("input");
cont.setAttribute('type', 'text');
cont.setAttribute('value', '');
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
else {
cont = document.createTextNode("0" + (c + 1));
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
mytable.setAttribute("align", "top-left");
}
makeTable();
In this function I want to show the one " tr " at a time in alert
function GetCellValues()
{
var rows = document.getElementsByTagName('tr');
for(var c = 0 ; c < rows.length ; c++)
{
var row = rows[c];
var inputs = row.getElementsByTagName('input');
// Here I want some code to retrieve "tr" value in a single single alert message Here I want each row data in one alert message...
for(var k = 0 ; k < inputs.length ; k++)
{
// means here I want 20 alert message because here we have 20 rows...
alert(inputs[k].value);
//I want to show the one "tr" at a time in alert
}
}
}
window.onload = function()
{
makeTable();
};
</script>
</body>
</html>
function GetCellValues() {
var rows = document.getElementsByTagName('tr');
for (var c = 0 ; c < rows.length ; c++) {
var row = rows[c];
var inputs = row.getElementsByTagName('input');
// Here I want some code to retrieve "tr" value in a single alert message
var str = '';
for (var k = 0 ; k < inputs.length ; k++) {
str += inputs[k].value + ' ';
//I want to show the one "tr" at a time in alert
}
alert(str);
}
}
I don't understand exactly what you mean but maybe this can help.
function GetCellValues() {
var rows = document.getElementsByTagName('tr');
for (var c = 0; c < rows.length; c++) {
var row = rows[c];
var inputs = row.getElementsByTagName('input');
// Here I want some code to retrieve "tr" value in a single alert message
alert(rows[c].innerHTML);
}}
I am trying to create a grid like structure. I want to create a loop within a loop and append divs based on if it is a column or a row. Below is my attempt:
for (var row = 0; row < 8; row++) {
$('#board').append('<div class="row">'+ row +'</div>');
}
What I would like to replicate in plain Javascript (code is most likely incorrect, I just want to show an example of what I want):
var board = document.getElementById('board');
for (var row = 0; row < 8; row++) {
board.write('<div class="row">');
for(var col = 0; col < 8; col++) {
var row = document.getElementsByClassName('row');
row.write('<div class="piece">'+col+'</div>')
}
board.write('</div>');
}
It would be useful if I could somehow replicate the document.write() method in jQuery. .append() did not work correctly for me when I tried to include a forloop.
You just need to loop through rows and then cells to build a single html string and than append it only once:
var rows = [], cells = [];
for (var row = 0; row < 8; row++) {
cells = [];
for (var cell = 0; cell < 8; cell++) {
cells.push('<div class="piece">'+ row +'</div>');
}
rows.push('<div class="row">' + cells.join('') + '</div>');
}
$('#board').html(rows.join(''));
DEMO HERE
What I understand you want to end up with a structure like this:
<div id="board">
<div class="row">
<div class="piece"></div>
<div class="piece"></div>
<div class="piece"></div>
(...)
</div>
(...)
</div>
Let's assume you already have a board (<div id="board"></div>).
for( var row = 0; row < 8; row++ ) {
//Create a row
$row = $('<div class="row"></div>');
//Stuff 8 pieces in that row
for( var col = 0; col < 8; col++ ) {
$row.append( $('<div class="piece">' + col + '</div>') );
}
//Add the row to the board
$('#board').append( $row );
}
Edit: In your case you can even simplify it to:
//Stuff 8 rows in the board
for( var row = 0; row < 8; row++ ) {
$('#board').append( $('<div class="row"></div>') );
}
//Stuff 8 pieces in every of the 8 rows
//This can be done because the piece is the same for every row
for( var col = 0; col < 8; col++ ) {
$('.row').append( $('<div class="piece">' + col + '</div>') );
}
jsFiddle: http://jsfiddle.net/3jGnF/
Try the following - if you need to manipulate DOM more specifically, then use JQuery
var board = document.getElementById('board'),
html = '';
for (var row = 0; row < 8; row++) {
html += '<div class="row">';
for(var col = 0; col < 8; col++) {
html += '<div class="piece">'+col+'</div>';
}
html += '</div>';
}
board.innerHTML = html;
Or with JQuery:
var board = $('#board');
...
board.append($(html));
I need some help :). Im trying to build a Javascript that goes through a gridview on my page and for each row checks the hiddenvalue that is stored in a certain cell of that row. It should then check this against a filtervalue and if it doesnt match hide the row in question.
How can I do this?
While not the most elegant, this should get you started in the right direction:
<script type="text/javascript">
function HideEvenValueRows() {
var tGrid = document.getElementById('<%= GridView1.ClientID%>');
for (var i = 0; i < tGrid.rows.length; ++i) {
var inputs = tGrid.rows[i].getElementsByTagName("input");
for (var j = 0; j < inputs.length; ++j) {
if (inputs[j].type == "hidden") {
var k = inputs[j].value * 1;
if (k % 2 == 0) {
tGrid.rows[i].style.visibility = "collapse";
}
}
}
}
}
</script>
I am trying to hide a row which contains in one of the cells a specific span element. The following code is what I have so far - but there is no getElementsByTagName for a tr
What else can I do to get the row? Thanks !
<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>
container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');
for (var j = 0; j < items.length; j++) {
spans = items.getElementsByTagName('span');
for (var i=0; i<spans.length; i++) {
if (spans.id == 'xyz') {
items.display = 'none';
}
}
}
spans and items are arrays of nodes, so you forgot to get each one by array index, it should be like this,
<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>
container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');
for (var j = 0; j < items.length; j++) {
spans = items[j].getElementsByTagName('span');
for (var i=0; i<spans.length; i++) {
if (spans[i].id == 'xyz') {
items[j].style.display = 'none';
}
}
}
DEMO
UPDATE:
And don't forget to put style before display.
items[j].display = 'none'; // false
items[j].style.display = 'none'; // true
So let us debug a little:
container = document.getElementById('tableContainer');
console.log(container) //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection
for (var j = 0; j < items.length; j++) {
spans = items.getElementsByTagName('span'); //<-- error says items.getElementsByTagName is not a function
for (var i=0; i<spans.length; i++) {
if (spans.id == 'xyz') { //<--error here [not referencing index]
items.display = 'none'; //<--error here [not setting style and index]
}
}
}
Problem here is you are not indexing each tr, you are trying to run it on the whole html collection.
spans = items.getElementsByTagName('span');
should be
spans = items[j].getElementsByTagName('span');
You need to do the same thing in the spans loop so the final code would be
container = document.getElementById('tableContainer');
console.log(container) //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection
for (var j = 0; j < items.length; j++) {
spans = items[j].getElementsByTagName('span'); //<-- use index
items.getElementsByTagName is not a function
for (var i=0; i<spans.length; i++) {
console.log(spans[i].id)
if (spans[i].id == 'xyz') { //<-- use index
items[j].style.display = 'none'; //<-- use index and display
}
}
}
Running example: JSFiddle