Navigate html table with JavaScript - javascript

Below is a snippet of the HTML. I'm trying to color the background of the tag that contains "Bananas".
<frame src="blah" name="navigation">
<table id="menu">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
Apples
</td>
<td>
<input class="button">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
Bananas
</td>
<td>
<input class="button">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
Carrots
</td>
<td>
<input class="button">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</frame>
This is my JavaScript:
var t = navigation.document.getElementById("menu");
var trs = t.getElementsByTagName("tr");
var tds = null;
for (var i=0; i<trs.length; i++)
{
tds = trs[i].getElementsByTagName("td");
for (var n=0; n<trs.length;n++) {
if(tds[n].innerHTML == "Bananas") {
tds[n].bgcolor="#FF0000";
}
}
}
To be honest it's stumbling even on the 2nd line so I'm clearly doing something wrong. Can anyone suggest an efficient way to do this please?

This should do the job:
var table = document.getElementById('menu');
var tds = table.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
if (td.innerHTML.trim() === 'Bananas') {
td.style.backgroundColor = 'red';
}
}

This is a jquery-based solution:
//See: http://stackoverflow.com/questions/8779728/getting-element-within-frame-using-jquery
$("td", window.parent.frames[0].document).filter(function() {
return this.innerText.indexOf("Bananas") + 1;
}).css("background-color", "yellow");
This is a plain Javascript solution:
var items = window.frames[0].document.getElementsByTagName("td");
for (var item in items) {
if ((items[item].innerText) && (items[item].innerText.indexOf("Bananas") + 1)) {
items[item].style["background-color"] = "yellow";
}
}
However, it is nice to make things customizable, reusable. In our case, we could do a function. jquery version:
function jQueryBanana(context, test, operation) {
context.filter(function() {
test(this);
}).operation($(this));
}
Usage:
jQueryBanana($("td", window.parent.frames[0].document), function(record) {
return record.innerText + (record.innerText.indexOf("Bananas") + 1);
}, function(record) {
record.css("background-color", "yellow");
});
Plain Javascript function
function vanillaBanana(items, test, operation) {
for (var item in items) {
if (test(items[item])) operation[items[item]];
}
}
Usage:
vanillaBanana(window.frames[0].document.getElementsByTagName("td"), function(record) {
return record.innerText && (record.innerText.indexOf("Bananas") + 1);
}, function(record) {
record.style["background-color"] = "yellow";
});
This way of making your code more generic wll help you a lot in the long run.

You should use tds[n].innerText instead of tds[n].innerHTML
Difference between innerText and innerHTML in javascript

Related

Toggle elements from classes with JS

I would like to show more information when someone click on show more buttons. The complication is that there are several buttons and informations to toggle with same className.
What am I doing wrong??
var element = document.querySelectorAll("btn");
for (var i = 0; i < button_length ; i++) {
element[i].addEventListener("click", function() {
alert("Button Clicked " + i);
element[i].classList.toggle("extrainfo");
};
}
td{border:solid 1px black;}
.btn, #btn_id{color:blue; text-decoration:underline; cursor:pointer;}
.extrainfo{
display:none
}
<table>
<tbody>
<tr class="info_group">
<td>Title 1</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 1</td>
</tr>
</tbody>
<tbody>
<tr class="info_group">
<td>Title 2</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 2</td>
</tr>
</tbody>
<tbody>
<tr class="info_group">
<td>Title 3</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 3</td>
</tr>
</tbody>
</table>
to work you javaScript
var element = document.querySelectorAll("btn"); // need to be (".btn")
// you want it to be i < element.length; ? or there's a variable called button_length?
for (var i = 0; i < button_length ; i++) {
element[i].addEventListener("click", function() {
alert("Button Clicked " + i);
element[i].classList.toggle("extrainfo");
}; // missing a Parenthesis need to be this }); not this };
}
I'm still not sure about the functionality, but see the code below if that's what you're looking for.
var element = document.querySelectorAll(".btn");
var extraInfo = document.querySelectorAll(".extrainfo");
for (let i = 0; i < element.length; i++) {
element[i].addEventListener("click" , function() {
extraInfo[i].classList.toggle("extrainfo");
});
}
hereJSFiddle you can play around with the code

In the below code I want to get the index value of rs using its Id and want to get its position

<table>
<tr>
<td id="1">Adi</td>
<td id="2">Aman</td>
</tr>
</table>
In the above code, I want to know the position of Aman using its id
You can try something like this:
html:
<table id="myTable">
<tr>
<td id="1">Adi</td>
<td id="2">Aman</td>
</tr>
</table>
js:
function getIdFromTable(searchValue)
{
var t = document.getElementById("myTable");
var trs = t.getElementsByTagName("tr");
var tds = null;
for (var i=0; i<trs.length; i++)
{
tds = trs[i].getElementsByTagName("td");
for (var n=0; n<tds.length;n++)
{
if (tds[n].innerText === searchValue) {
return tds[n].id;
}
}
}
}
getIdFromTable('Aman'); // will return 2
Easiest way to find position by id would be using prevAll().length. Something like this:
function findPositionById(id){
return $('#mytable').find('#'+id).prevAll().length
}
console.log('Adi Position', findPositionById(1));
console.log('Aman Position', findPositionById(2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="mytable">
<tr>
<td id="1">Adi</td>
<td id="2">Aman</td>
</tr>
</table>

Javascript: Delete a specific table cell when it is clicked

I was working on a university project. They told us to make 2 arrays. The first will have 3 cells with 3 images, and the second will be empty with 1 row.
I need to remove the image from the cell clicked each time in the first table and copy it to the second table!
My problem is that deleteCell() function will only delete the first element each time. I don't know how to delete the CLICKED cells from my table row!
My JS:
var table1 = document.getElementById("myTable");
var table2 = document.getElementById("myTable2");
function DL1() {
var row = document.getElementById("myRow1");
row.deleteCell();
}
function CR2() {
var row = document.getElementById("myRow2");
}
My HTML:
<table id="myTable" class="auto-style1">
<tr id="myRow1">
<td onclick="DL1()"><img src="../../2.jpg" /></td>
<td onclick="DL1()"><img src="../../1.gif" /></td>
<td onclick="DL1()"><img src="../../3.png" /></td>
</tr>
</table>
<table id="my2Table">
<tr id="myRow2"></tr>
</table>
var table1=document.getElementById("myTable");
var table2=document.getElementById("myTable2");
function DL1(elem){
var row = document.getElementById("myRow1");
for(i=0;i<row.children.length;i++) {
if(row.children[i]==elem) {
row.deleteCell(i);
row2=document.getElementById("myRow2");
row2.appendChild(elem);
}
}
}
<td onclick="DL1(this)"><img src="http://placehold.it/100x100"/></td>
<td onclick="DL1(this)"><img src="http://placehold.it/150x100"/></td>
<td onclick="DL1(this)"><img src="http://placehold.it/200x100"/></td>
Demo: https://jsfiddle.net/Lt2cyw0g/2/
So, you need to get index of clicked element (pass it to the function, and check index, and use it in deleteCell() function), then add element to the second table row...
Just pass clicked element to the function:
var table1 = document.getElementById("myTable");
var table2 = document.getElementById("myTable2");
function DL1(td) {
td.parentNode.removeChild(td);
}
function CR2() {
var row = document.getElementById("myRow2");
}
<table id="myTable" class="auto-style1">
<tr id="myRow1">
<td onclick="DL1(this)">
<img src="../../2.jpg" />
</td>
<td onclick="DL1(this)">
<img src="../../1.gif" />
</td>
<td onclick="DL1(this)">
<img src="../../3.png" />
</td>
</tr>
</table>
<table id="my2Table">
<tr id="myRow2"></tr>
</table>
Hope it helps, no need ID:
var a = document.querySelectorAll("table tr");
for(var b in a){
var c = a[b];
if(typeof c == "object"){
c.onclick = function (){
this.offsetParent.deleteRow(this.rowIndex);
}
}
}
<table >
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td>1b</td><td>2b</td><td>b</td></tr>
</table>
<table>
<tr><td>a</td><td>aa</td><td>aa</td></tr>
<tr><td>b</td><td>bb</td><td>bb</td></tr>
<tr><td>c</td><td>cc</td><td>cc</td></tr>
</table>

Make entire column disappear

How can I make the left column in a table disappear using plain JS?
This is my approach:
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>
<script>
var tab, td;
window.onload = function() {
tab = document.getElementById("tab");
td = tab.getElementsByTagName("td");
}
function inv() {
for (i = 0; i < td.length; i++) {
td[i].style.display = "none";
i++;
}
}
function vis() {
for (i = 0; i < td.length; i++) {
td[i].style.display = "block";
i++;
}
}
</script>
It works, but I have to use "ugly" loops.
Maybe there is a more efficient way by just saying column[0].display = "none".
Here is the fiddle.
Take advantage of CSS hierarchy and nth-child selectors.
Use selector tr td:nth-child(1) to select all the first column td elements.
JSfiddle
var tab;
// Use DOMContentLoaded instead of load event
document.addEventListener('DOMContentLoaded', function() {
tab = document.getElementById('tab');
});
function inv() {
tab.classList.add('hide');
}
function vis() {
tab.classList.remove('hide');
}
.hide tr td:nth-child(1) {
display: none;
}
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>
Demo using toggle with single button.
function toggle() {
document.getElementById('tab').classList.toggle('hide');
}
.hide tr td:nth-child(1) {
display: none;
}
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="toggle()">Toggle</button>
By the use of some empty css classes and jQuery, you are able to achieve that in a one-liner:
<table id="tab" border="1">
<tr>
<td class="col1">abc</td>
<td class="col2">def</td>
</tr>
<tr>
<td class="col1">ghi</td>
<td class="col2">jkl</td>
</tr>
<tr >
<td class="col1">mno</td>
<td class="col2">pqr</td>
</tr>
</table>
now you can just do:
jQuery(".col1").hide();
(mind the selector with a dot before the class name)
The most efficient solution would be to inject and remove a stylesheet and let the browser do the work.
Fiddle: https://jsfiddle.net/4L4h7ea1/2/
var tab, td;
var hideFirstColumnCss = document.createElement('style');
hideFirstColumnCss.setAttribute('id', 'hideCssStyle');
hideFirstColumnCss.innerHTML = '#tab td:first-child { display: none; }';
window.onload = function () {
tab = document.getElementById("tab");
td = tab.getElementsByTagName("td");
}
function inv() {
document.head.appendChild(hideFirstColumnCss);
}
function vis() {
var style = document.getElementById('hideCssStyle');
style.parentNode.removeChild(style);
}
Use the row tags to get to your cells to hide/show them. That way you can specify an index for the row as all cells are direct children of their row.
var tab, td;
window.onload = function () {
tab = document.getElementById("tab");
tr = tab.getElementsByTagName("tr");
}
function inv() {
for (i = 0; i < td.length; i++) {
tr[i].children[0].style.display = "none";
}
}
function vis() {
for (i = 0; i < td.length; i++) {
tr[i].children[0].style.display = "block";
}
}

Show hidden rows in table with dropdown

I have something that seems fairly simple but I'm stumped. I want a dropdown within a table that affects how many table rows are shown. By default, only 2 rows are shown. By selecting 4 in the dropdown, 4 rows should be shown. I am only seeing one of the hidden rows show up, and I've tried to wrap the 2 rows in a hidden div as well, no luck. Ideas?
<table border="1">
<tr>
<td class="noBG" colspan="3">
<select id="displayText" onchange="javascript:toggle();">
<option>2</option>
<option>4</option>
</select>Items
</td>
</tr>
<thead>
<tr>
<th>Dates</th>
<th>Time</th>
<th>Person</th>
</tr>
</thead>
<tr>
<td>12/3</td>
<td>12:45</td>
<td>John Doe</td>
</tr>
<tr>
<td>12/4</td>
<td>12:45</td>
<td>James Doe</td>
</tr>
<tr id="toggleText" style="display: none">
<td>12/4</td>
<td>12:45</td>
<td>Janey Doe</td>
</tr>
<tr id="toggleText" style="display: none">
<td>12/4</td>
<td>12:45</td>
<td>Janey Doe</td>
</tr>
</table>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
​
Using display: block; doesn't work as the table rows will then displayed not in the right way. But you can toggle the visibility by adding and removing a class, which is defined with display: none;. So you must not switch display: none/block;, but the class.
This works (incl. jQuery): http://jsfiddle.net/Yuvvc/1/
You can use following code for JS function:
function toggle() {
$.each($('tr[name=toggleText]'), function() {
$(this).toggleClass("hiddenRow", $(this).attr('class') != "hiddenRow");
});
}
With the second parameter (bool) for .toggleClass you can add and remove the class.
EDIT
Here a non-jQuery version:
function toggle() {
var rows = document.getElementsByName("toggleText");
for(var i=0; i<rows.length; i++)
{
rows[i].className = (rows[i].className == "hiddenRow") ? "" : "hiddenRow";
}
}
Change all <tr id="toggleText" to <tr name="toggleText", and then change the toggle function to the following:
function toggle() {
var ele = document.getElementsByName("toggleText");
for (var i = 0; i < ele.length; i++) {
if (ele[i].style.display == "block") {
ele[i].style.display = "none";
}
else {
ele[i].style.display = "block";
}
}
}
You can toggle the hidden rows by giving each row an id like this:
<table class="table">
#foreach (var item in Model)
{
<tr>
<td onclick="toggle1(#item.ID)" colspan="3">
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
<tr class="hidden" id="bluh_#item.ID">
<td>
#Html.DisplayFor(modelItem => item.Code)
</td>
<td>
#Html.DisplayFor(modelItem => item.Position)
</td>
</tr>
}
then use JavaScript to Hide and Show the Children Rows
<script>
function toggle1(something) {
$("#bluh_"+something).toggleClass('hidden');
}
</script>

Categories