Hiding a table row for a cell containing a span - javascript

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

Related

Can't get JSON string's element

I'm totally new to javascript and I'm trying to display an array of object which is stored in local storage using javascript and html and display each element of the JSON string in td tag of a table
In studentList.js file, first of all, I create a Student object:
function Student(id, name, birthDay, gender, falcuty, point ) {
this.id = id
this.name = name
this.birthDay = birthDay
this.gender = gender
this.falcuty = falcuty
this.point = point
}
var table = document.getElementById("table-stud")
And an array of 'Student' object:
var collection = [];
collection.push(new Student("01","A","20/11/1998","M","IT","8.0"),
new Student("02","B","2/1/1998","F","IT","8.0"),
new Student("03","C","9/9/1997","F","CK","8.8"))
Save student in local storage:
function saveStudent(collection) {
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = JSON.stringify(collection[i])
console.log(studentObjectSerialiseData)
window.localStorage.setItem("student"+i, studentObjectSerialiseData)
}
}
Display students:
function getStudents() {
console.log(Student.length)
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for(var j = 0; j < Student.length; j++) {
var td = document.createElement("td")
td.innerText = temp[j]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
saveStudent(collection);
getStudents();
In HTML file, I called studentList.js file and added id to the 'table' tag, the localStorage worked perfectly but when I want to display, this happened:
id Name birthDay Gender Falcuty Point
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
Please help me solve this problem!
The problem is mostly on the parts you're trying to loop over the keys of Student. Utilize Object.keys for achieving it instead:
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Object.keys(temp).length; j++) {
var td = document.createElement("td")
console.log(temp)
td.innerText = temp[Object.keys(temp)[j]]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
For a working example, see this snippet: https://jsbin.com/koqikiquzu/1/edit?html,js,output (Tried to embed through SO's own playground, but using localStorage is a bit tricky here).
temp in getStudents() is an object so you need to loop over that too.
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Student.length; j++) {
for(var i in temp) {
var td = document.createElement("td")
td.innerText = temp[i]
tr.appendChild(td)
}
}
table.appendChild(tr)
}
}
You can get the result by using for in loop inside j for loop and appends to tr tag if j and i are equal.
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i);
var temp = JSON.parse(studentObjectSerialiseData);
var tr = document.createElement("tr");
for (var j = 0; j < Student.length; j++) {
for (x in temp) {
if (j == i) {
var td = document.createElement("td");
td.innerText = (temp)[x];
tr.appendChild(td);
}
}
}
table.appendChild(tr)
}
}
Access Student in a for in loop to get the keys.
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
console.log(temp);
for(var j in Student) {
console.log(temp[j]) ;
}
}

How to get all tablecell values from a dynamic table using javascript or jquery

I have dynamic table, it contains 5 textbox controls, i am trying to retrieve label text of all controls. How can i do this.
THanks.
What i had tried:
var table = document.getElementById("ControlTable_");
if (table != null) {
var trlength = table.rows.length;
for (var i = 0; i < trlength; i++) {
var tclenght = table.cells.length;
for (var j = 0; j < tclenght; j++) {
var check = table.rows[i].cells[j].innerText;
}
}
}
Here i am getting innertext undefined
You can have a 2d representation of your table by using something like the following function:
const mapTo = (element, selector, callback) => Array.from(
element.querySelectorAll(selector),
callback
);
const extractText = td => td.textContent;
const tableAsJson = mapTo(
document,
'#ControlTable_ tr',
(row) => mapTo(row, 'td', extractText),
);
console.log('table', tableAsJson);
<table id="ControlTable_">
<tr>
<td>hello</td>
<td>World</td>
</tr>
<table>
if your td elements also contain something like
<label for="something">
Label
</label>
<input />
then something like this may help
const extractText = td => td.querySelector('label').textContent;
Just a note,
please make sure you attach relevant part of your dom structure while asking similar questions in future :)
Here is what I've tried:
var table = document.getElementById("ControlTable_");
if (table != null) {
var trlength = table.rows.length;
for (var i = 0; i < trlength; i++) {
// use this instead of table.cells, because each cell must be specified by a row
// i.e: table.rows[i].cells
var td = table.rows[i].getElementsByTagName('td');
for (var j = 0; j < td.length; j++) {
var check = table.rows[i].cells[j].innerText;
console.log(check);
}
}
}
You need to find and get value from the label in the table cell.
var table_rows = $('#ControlTable_ tr');
for (var i = 0; i < table_rows.length; i++) {
var row = table_rows[i];
var columns = $(row).find('td');
for (var j = 0; j < columns.length; j++) {
var label = $(columns[j]).find('label');
if (label.length > 0) {
var check = label[0].innerText;
console.log(check);
}
}
}
Check below link for working example.
https://jsfiddle.net/rgehlot99/d5zntL6c/2/
(Values can be found in console)

How to delete td without any id

Hello i want to remove "Have you served in the military ?" and "No" if Answer is "No" but when it will "Yes" than it should show.
Whatever i have tried but it's not working
<script type="text/javascript">
(function(){
for(i = 0; (a = document.getElementsByTagName("td")[i]); i++){
if(document.getElementsByTagName("span")[i].innerHTML.indexOf('Have you served in the military') > -1){
document.getElementsByTagName("td")[i].style.display = "none";
}
}
})();
</script>
You could use child of the element or just do a find replace or even hide and show.
You can get all td elements like you already did and than get the span elements inside them:
var tds = document.getElementsByTagName('TD');
for (var i = 0, l = tds.length; i != l; ++i) {
var spans = tds[i].getElementsByTagName('SPAN');
for (var j = 0, l2 = spans.length; j != l2; ++j) {
var span = spans[j];
if ((span.textContent = span.innerText).indexOf('Have you served in the military') != -1) {
span.style.display = 'none';
break;
}
}
}
EDIT: OP wants to only delete the span if there is a td with the content "No" (also delete the td element)
var tds = document.getElementsByTagName('TD');
var tdsLength = tds.length;
var answerNoFound = false;
for (var i = 0; i != tdsLength; ++i) {
var td = tds[i];
if ((td.textContent = td.innerText) == 'No') {
td.style.display = 'none';
answerNoFound = true;
break;
}
}
if (answerNoFound)
for (var i = 0; i != tdsLength; ++i) {
var spanFound = false;
var spans = tds[i].getElementsByTagName('SPAN');
for (var j = 0, l = spans.length; j != l; ++j) {
var span = spans[j];
if ((span.textContent = span.innerText).indexOf('Have you served in the military') != -1) {
span.style.display = 'none';
spanFound = true;
break;
}
}
if (spanFound)
break;
}
It looks like you have an application form and document probably has more spans, some outside the td elements, so you don't get correct selection of spans versus td.
So when you are comparing span content, it is most likely not the span that is inside your looped td.
<script type="text/javascript">
(function(){
for(i = 0; (a = document.getElementsByTagName("td")[i]); i++){
if(a.getElementsByTagName("span")[0].innerHTML.indexOf('Have you served in the military') > -1){
a.style.display = "none";
}
}
})();
</script>
I changed the if statement to select span inside your looped td, that should do it.

find cell content highlight different cell in same row

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/

Remove images only from DIV not whole site

I only want to remove images from a content div, not the whole site. I have tried the following:
var elements = document.getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
That removes every image.
var elements = document.getElementsById('content').document.getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
That did nothing.
Can someone tell me what I am doing wrong?
var elements = document.getElementsById('content').document.getElementsByTagName('img');
should be
var elements = document.getElementsById('content').getElementsByTagName('img');
var elements = document.getElementsById('content').getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
if using jQuery
$('#content img').hide();

Categories

Resources