I use this code to hide all rows in a table that have a td with a class named "hide". This is working fine.
$('.table').find('tr:has(td.hide)').hide();
Now I am trying to hide all all rows in table if the row has n number of td with the class equal to hide. I was not even able to loop on the tr list of the table with thos code
$('.table > tr').each(function() {
console.log("new tr", $(this).text());
});
my html looks as following
<table class='table'>
<tr class='hidable'><td class='hide'> Some text</td> <td class='hide'> Some text</td></tr>
<tr class='hidable'><td class='hide'> Some text</td> <td class='nothide'> Some text</td></tr>
</table>
in this example i want to hide the row if the two tds have the class hide.
When you create a table without tbody, that tag is automatically generated.
Child combinator:
Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
Include tbody as part of the selector. Try $('.table tbody > tr')
$('.table tbody > tr').each(function() {
console.log("new tr", $(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table'>
<tr class='hidable'>
<td> Some text </td>
<td class='hide'> Some text</td>
<td class='hide'> Some text</td>
</tr>
<tr>
<td class='nothide'> Some text</td>
</tr>
</table>
OR: Remove > from the selector
$('.table tr').each(function() {
console.log("new tr", $(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table'>
<tr class='hidable'>
<td> Some text </td>
<td class='hide'> Some text</td>
<td class='hide'> Some text</td>
</tr>
<tr>
<td class='nothide'> Some text</td>
</tr>
</table>
With jQuery I'd suggest using toggleClass():
// here we select the <tr> elements, and chain the toggleClass() method
// to that jQuery collection:
$('tr').toggleClass(function() {
// within the anonymous function 'this' refers to the current <tr>
// element of the collection (the native DOM node not a jQuery $(this))
// we use Element.querySelectorAll() to retrieve all the <td> elements
// with a class of 'hide' and then test the length to see if there
// are more than one. If this is true, we return the 'hideRow' class
// to the method, otherwise we return an empty string. Obviously this
// approach uses a CSS selector ('hideRow') to hide the relevant <tr>
// elements:
return this.querySelectorAll('.hide').length > 1 ? 'hideRow' : '';
});
.hide {
background-color: limegreen;
opacity: 0.5;
}
.hideRow {
/* here we use opacity: 0.5 so that you can visually
see which elements are selected/affected; in production
you should obviously switch to 'display: none' to hide the
elements: */
opacity: 0.5;
}
<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="hide">cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td class="hide">cell 2</td>
<td>cell 3</td>
<td class="hide">cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td class="hide">cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td class="hide">cell 1</td>
<td class="hide">cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td class="hide">cell 1</td>
<td class="hide">cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</tbody>
</table>
JS Fiddle demo.
In native JavaScript — using a contemporary browser — the following would achieve the same thing:
// here we use the spread syntax to conver the iterable NodeList returned by
// document.querySelectorAll() into an Array, we then iterate over that Array
// of Nodes using Array.prototype.forEach():
[...document.querySelectorAll('tr')].forEach(
// we use an anonymous Arrow function - as we don't need to use 'this' - in
// order perform a function on each of the <tr> elements of the Array of
// <tr> elements; the 'tr' passed into the function is a reference to the
// current <tr>:
(tr) => {
// here we use the Element.classList API, with its toggle() method to
// supply a class-name ('hideRow'), and we use the assessment to determin
// whether or not the class-name should be applied. If the assessment
// evaluates to true then the class-name is applied, if false it is not:
tr.classList.toggle('hideRow', tr.querySelectorAll('.hide').length > 1);
});
.hide {
background-color: limegreen;
opacity: 0.5;
}
.hideRow {
opacity: 0.5;
}
<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td class="hide">cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td class="hide">cell 2</td>
<td>cell 3</td>
<td class="hide">cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td class="hide">cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td class="hide">cell 1</td>
<td class="hide">cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td class="hide">cell 1</td>
<td class="hide">cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</tbody>
</table>
JS Fiddle demo.
As an important addenda to my original answer, the reason that your selector:
$('.table > tr')
doesn't work is because of the child combinator, the >, which would cause jQuery to retrieve the <tr> elements which are children of the <table class=".table"> element. As browsers predictably rescue 'broken' HTML — though a <tbody> is not mandatory according to the spec — they will all automagically insert a <tbody> element to wrap any <tr> elements which are contained within a <table> that aren't already so wrapped.
This has been discussed elsewhere on the site: https://stackoverflow.com/a/5568877/82548
References:
JavaScript:
Array.prototype.forEach().
Arrow functions ((arguments) => { ...statements... }.
document.querySelectorAll().
Element.classList API.
Element.querySelectorAll().
NodeList.prototype.forEach().
Spread (...) syntax.
jQuery:
toggleClass().
You want to hide row if 2 td's have hide class , if this is your requirement then here is tested example
$(".table tr").each(function(){
if($(this).find("td.hide").length == 2) {
$(this).hide();
}
});
Here I loop through each tr and then in each tr I check all td with class "hide" with find("td.hide").length == 2 and if length is equal to two then hide the row.
Related
I'm working on a JSP page. When page renders based on certain conditions
1)I have to insert a row to an existing table which has a row with a class name "details" OR
2) delete the inserted row if it exists
Page has to render in ie11 as well. So I cannot use insertAfter() or any es6 methods. I'm unable to append/ remove at the right node
Code
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr class="details">
<td>cell 3</td>
<td>cell 4</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
var newHtml = '<tr class="select__pcp"><td colspan="2"> </td><td class="txt-right">text Msg</td><td class="txt-right span2"></td></tr>';
if(condition) {
// insert newHTML after <tr class="details">
} else {
//if <tr> with class="select__pcp" exists then delete it
}
You need to use appendChild: see this page(https://www.w3schools.com/jsreF/met_node_appendchild.asp)
and removeChild: see this page(https://www.w3schools.com/JSREF/met_node_removechild.asp)
and if you add a node in special place you need to use insertAdjacentElement: see this page(https://www.w3schools.com/jsref/met_node_insertadjacentelement.asp)
To Add: You can try setting the outerHTML of the details element to include the new element.
To Remove: you can set the outerHTML to an empty string
---on snippet load: adds element to table, waits 3 seconds and removes element.
var newHtml = '<tr class="select__pcp"><td colspan="2"> </td><td class="txt-right">text Msg</td><td class="txt-right span2"></td></tr>';
function removeOrAdd(action){
if(action) {
document.querySelector('.details').outerHTML += newHtml
} else {
document.querySelector('.select__pcp').outerHTML = ''
}
}
removeOrAdd(true)
setTimeout(removeOrAdd, 3000, false)
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr class="details">
<td>cell 3</td>
<td>cell 4</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
I want to get the row id or index from a table by searching for a cell value and i dont know how.
Please help me get going! :)
Fiddle here
<button id="button" class="btn btn-secondary">Get index of row 2</button>
<table id="table">
<tbody>
<tr data-index="0">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr data-index="1">
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr data-index="2">
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</tbody>
</table>
var $table = $('#table')
var $button = $('#button')
var $SearchFor ='cell 5'
$(function() {
$button.click(function () {
alert('row id of '+$SearchFor+' is')
})
})
You can use the following:
$table.find("td:contains('"+$SearchFor+"')").parent().index();
or
$table.find("td:contains('"+$SearchFor+"')").parent().data("index");
Demo
var $table = $('#table')
var $button = $('#button')
var $SearchFor = 'cell 5'
$(function() {
$button.click(function() {
var i = $table.find("td:contains('"+$SearchFor+"')").parent().index();
console.log($SearchFor + " is found in row with data-index " +i)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button" class="btn btn-secondary">Get index of row 2</button>
<table id="table">
<tbody>
<tr data-index="0">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr data-index="1">
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr data-index="2">
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</tbody>
</table>
Is there a simple way of swapping elements of an html table using javascript?
for instance having a table like this:
<table>
<tr>
<td class = "draggable">
<div class = "droppable">Item 1</div>
</td>
</tr>
<tr>
<td class = "draggable">
<div class = "droppable">Item 2</div>
</td>
</tr>
I want to make it available to swap cells.
Thanks!
I've written a little function to swap elements. Pass as arguments the parent (container of swapping elements), and two numbers (index) of the children elements that you want to be swapped.
var rowsParent = document.getElementById('sortRows');
var cellsParent = document.getElementById('sortCells');
swapElements(rowsParent,0,1);
swapElements(cellsParent,2,0);
function swapElements(parent,elemA,elemB){
//a little of validation
if(!parent||parent.constructor.toString().search('HTML')===-1) return;
var children = parent.children;
if(typeof elemA!=='number' || typeof elemB!=='number' || elemA===elemB || !children[elemA] || !children[elemB]) return;
elemB = elemA<elemB ? elemB--:elemB;
var childNumb = children.length - 1;
var a = parent.removeChild(children[elemA]);
var b = parent.removeChild(children[elemB]);
append(elemB,a);
append(elemA,b);
function append(a,b){
childNumb===a ? parent.appendChild(b) : parent.insertBefore(b,children[a]);
}
}
table, td {
border: solid 1px black;
padding: 3px;
margin: 15px;
}
<table>
<tbody id="sortRows">
<tr>
<td>a 1</td>
<td>a 2</td>
<td>a 3</td>
<td>a 4</td>
<td>a 5</td>
</tr>
<tr id="sortCells">
<td>b 1</td>
<td>b 2</td>
<td>b 3</td>
<td>b 4</td>
<td>b 5</td>
</tr>
<tr>
<td>c 1</td>
<td>c 2</td>
<td>c 3</td>
<td>c 4</td>
<td>c 5</td>
</tr>
<tr>
<td>d 1</td>
<td>d 2</td>
<td>d 3</td>
<td>d 4</td>
<td>d 5</td>
</tr>
<tr>
<td>e 1</td>
<td>e 2</td>
<td>e 3</td>
<td>e 4</td>
<td>e 5</td>
</tr>
</tbody>
</table>
You could do it in the same way you swap contents for any variable:
var child1_HTML = $("table tr:nth-child(1)").html();
$("table tr:nth-child(1)").html($("table tr:nth-child(2)").html());
$("table tr:nth-child(2)").html(child1_HTML);
I have aspx page that are in iframe.
I need to add buttons on this page to footer and make it's content scrollable (all content is inside table).
So on page I have :
/* Buttons Footer*/
.full-scrollable-height {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
form.form-full-height {
height: 83%;
overflow: hidden;
margin: 0;
}
form.form-full-height .footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 50px;
background-color: #ffffff;
/*padding-top: 15px;*/
/*border-top: 1px solid #B7B7B7;*/
}
/* End Footer*/
td{height:30px;border: 1px solid red;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:200px">
<form class="form-full-height">
<div class="full-scrollable-height">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
<footer class="footer">
<div class="container">
<div class="col-xs-12">
<div class="pull-left">
<a class="btn btn-default" href="#">Save Template</a>
<a class="btn btn-default" href="#">Load Template</a>
</div>
<div class="pull-right">
Save
Cancel
</div>
</div>
</div>
</footer>
</form>
</div>
Problems : Is this approach fine? I mean setting height for table-wrap div? Can I somehow skip this is I know height of iframe?
And can I set buttons in the middle of footer (vertical-align : middle doesn't work here and if make footer inline-block it looks very bad )
There are quite a few possible ways to achieve scrollable content with a fixed footer.
Here are 3 possible solutions.
Method 1: Using flexbox
html, body, form {
height: 100%;
display: flex;
flex-direction: column;
}
.full-scrollable-height {
flex: 1 1 auto;
overflow-y: auto;
border-bottom: 1px solid silver;
}
table {
width: 100%;
}
footer .container {
padding: 15px 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-full-height">
<div class="full-scrollable-height">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
<footer class="footer">
<div class="container">
<div class="col-xs-12">
<div class="pull-left">
<a class="btn btn-default" href="#">Save Template</a>
<a class="btn btn-default" href="#">Load Template</a>
</div>
<div class="pull-right">
Save
Cancel
</div>
</div>
</div>
</footer>
</form>
Method 2: Using absolute positioning + Javascript
window.onload = function() { // Better is to use the DOM ready event here
var form = document.forms[0];
var content = form.getElementsByClassName('full-scrollable-height')[0];
var footer = form.getElementsByTagName('footer')[0];
footer.style.position = 'absolute';
footer.style.bottom = 0;
(window.onresize = function() {
var height = form.offsetHeight - footer.offsetHeight;
content.style.height = height + 'px';
})();
};
html, body, form {
height: 100%;
}
.full-scrollable-height {
overflow-y: auto;
}
table, footer {
width: 100%;
}
footer {
border-top: 1px solid silver
}
footer .container {
padding: 15px 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-full-height">
<div class="full-scrollable-height">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
<footer class="footer">
<div class="container">
<div class="col-xs-12">
<div class="pull-left">
<a class="btn btn-default" href="#">Save Template</a>
<a class="btn btn-default" href="#">Load Template</a>
</div>
<div class="pull-right">
Save
Cancel
</div>
</div>
</div>
</footer>
</form>
Method 3: Using fixed position on the footer
table {
width: 100%;
}
footer .container {
padding: 15px 0
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background: white;
border-top: 1px solid silver
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-full-height">
<div class="full-scrollable-height">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
<footer class="footer">
<div class="container">
<div class="col-xs-12">
<div class="pull-left">
<a class="btn btn-default" href="#">Save Template</a>
<a class="btn btn-default" href="#">Load Template</a>
</div>
<div class="pull-right">
Save
Cancel
</div>
</div>
</div>
</footer>
</form>
I checked your codes,for checking purpose the codes in inline.Please try this.
<style>
table {
width: 100%;
}
form.form-full-height .footer {
background-color: #000000;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
</style>
HTML with inline css:
<footer class="footer">
<div class="container" style="position: relative; height: 100%;">
<div class="col-xs-12" style="clear: both ! important; vertical-align: middle ! important; height: 100%; display: table;">
<div class="" style="display: table-cell; margin: auto ! important; vertical-align: middle ! important; height: 100% ! important;">
<div class="pull-left">
Save Template
Load Template
</div>
<div class="pull-right">
<a class="btn btn-primary" href="#">Save</a>
<a class="btn btn-primary" href="#">Cancel</a>
</div>
</div>
The code example below creates a table with 6 rows. The last two rows are empty.
The JavaScript code finds and displays correctly the number of rows in a table.
I would like to find the row number of the first row with empty cells. In this example it will be row (4) (counting from 0). I tried several solutions and they did not work.
Your help is appreciated.
Thanks,
Menachem
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<br>
<script>
var x = document.getElementById("myTable").rows.length;
alert ("Number of rows in the table is " + x);
</script>
</body>
</html>
You can use combination of :has() and :not().
td:not(:empty) get td which is not empty
tr:not(:has(td:not(:empty))) selects all tr which is not contains any non empty td
tr:not(:has(td:not(:empty))):first gets the first tr from them
var index = $("#myTable tr:not(:has(td:not(:empty))):first").index();
console.log(index);
table,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<br>
<script>
var x = document.getElementById("myTable").rows.length;
alert("Number of rows in the table is " + x);
</script>
I would like to find the row number of the first row with empty cells
You can use :has(), adjacent sibling selector + to match td:empty, that has next element sibling that is td:empty, :first, index(). The index of the first tr element which has a child td element without child nodes would be 3
$("#myTable tr:has(td:empty + td:empty):first").index()
<!DOCTYPE html>
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<br>
<script>
var x = document.getElementById("myTable").rows.length;
alert("Number of rows in the table is " + x);
console.log($("#myTable tr:has(td:empty + td:empty):first").index());
</script>
</body>
</html>
$("#myTable tr").find('td').filter(function() {
return $(this).text() == '' ;
}).addClass('empty');
table,
td {
border: 1px solid black;
}
.empty {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Use .filter()
You can use a test inside a .filter() call that checks the number of empty td's against the number of all td's in a tr. Filter out all those that have any non-empty td, call .first() to find the first one in the filtered set, and .index() to get the index
var index = $("#myTable tr").filter(function(){
return $("td",this).length == $("td:empty",this).length;;
}).first().index();
console.log("Empty row index: "+index);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>