In a function I need to pass a arr. I want to remove all columns of html table.
Not sure how to do this.
I tried this, but not working:
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
</table>
and in javascript I have a variable:
var arr=[0,2,3];
I want to remove all columns and its data from table on specified so output will be:
<table>
<thead>
<tr>
<td>b</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>e1</td>
</tr>
<tr>
<td>b2</td>
<td>e2</td>
</tr>
<tr>
<td>b3</td>
<td>e3</td>
</tr>
</tbody>
</table>
You can use the array to create a filter for tds to be deleted as given below
var arr = [0, 2, 3];
var filters = arr.map(function(val) {
return 'td:nth-child(' + (val + 1) + ')';
});
$('table').find(filters.join()).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
Related
In html I have my markup is like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
I want to add a class for each last tbody after thead. So basically my output should be like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
</table>
I have tried this code but its not working at all.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextAll('tbody').last().addClass('last-row');
});
You can add that class to all tbody before thead and then add same class to last tbody
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
Demo
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
.last-row
{
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>rftg</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}
.section-table tbody.last-row{
background-color:#FF0;
}
.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Try prev('tbody'), since you don't have thead at the end, you need to add tbody:last-child as well.
You can first add the class to all the <tbody> that is just a previous element of the <thead>. Using this will leave you with the last <tbody> unchanged in the HTML table so you should add one more line of JQuery that will add class to this remaining last <tbody>.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody').last().addClass('last-row');
.last-row{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
<thead>
<tr>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
</tr>
</tbody>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
You can use .nextUntil() to target all siblings till <THEAD> is encountered then use .last() to get the desired element and add class.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
.last-row {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>HEAD 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
I have a loop where i want display tables and calculate the sum here is html
#for (int i = 0; i < 3; i++) {
<table id="table #i" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
}
In javascript i wrote this code, I want the method can sum up all data in column 2 and 3 then display on the footer of each table in a loop, but when i run this code, it returned wrong sum and only display in 1st table.
$(document).ready(function () {
$('table').each(function () {
calculateColumn(1);
calculateColumn(2);
})
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function () {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text(total);
}
When you say $('table tr').each(), it iterates over all the tr elements in the page, not just the one's in the current table(which is targeted by $('table').each())
You need to pass the table reference to the calculate method
$(document).ready(function() {
$('table').each(function() {
calculateColumn(this, 1);
calculateColumn(this, 2);
})
});
function calculateColumn(table, index) {
var total = 0;
$(table).find('tbody td:nth-child(' + (index + 1) + ')').each(function() {
total += +$(this).text() || 0;
});
$(table).find('tfoot td').eq(index).text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>6</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>6</td>
<td>150</td>
</tr>
<tr>
<td>Banana</td>
<td>3</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>120</td>
</tr>
<tr>
<td>Organe</td>
<td>4</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>300</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
In the table I am receiving data from the db, and all the marks have a particular value A or B. According to the value I need to separate the data , if the mark has value A it should be stored under the A and if mark has the value B it should be stored under B. I am not sure how to write the jquery for this problem. I have attached a fiddle along with the post. Showing only the html and the required format of the table.
<table style="width:300px">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>Required Table format
<table style="width:300px">
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
http://jsfiddle.net/yzzp5/
Try this,
<table style="width:300px" id="marksId">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>
Required Table format
<table style="width:300px" id="reqtable">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Your script goes here
$(function(){
var data={'a':[],'b':[]};
$('#marksId tr').each(function(index,tr){
if($(tr).find('td').eq(1).text()=='a'){
data.a.push($(tr).find('td').eq(0).text());
}
if($(tr).find('td').eq(1).text()=='b'){
data.b.push($(tr).find('td').eq(0).text());
}
});
var HTML='';
// alert(JSON.stringify(data))
// if both have equal counts
$.each(data.a,function(idx,val){
HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
});
// alert(HTML);
$('#reqtable').append(HTML);
});
You might need to change this code based on requirement but it will give you an idea to work on
Check Example here also.
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>
<tr>
<td>click</td>
<td>//div[#id='wrapper']/div/div/div</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[1]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[2]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[3]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[4]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
I want to click through 4 sections.
All have the same path, but not the same tablediv.
/div/div/div[2]/table/tbody/tr[1]/td
--> 1 to 4
How can I do this, thats the code are minimalize,
how can I use a while loop here?
The Code in Selenium has 18 commands..
Thanks
Since you are using Selenium IDE rather than WebDriver, the only "while" loop that you'll be able to execute is by executing plain old javascript.
<tr>
<td>store</td>
<td>iterator</td>
<td>1</td>
</tr>
<tr>
<td>storeEval</td>
<td>while (iterator <= 4) { browserBot.click("/div/div/div[2]/table/tbody/tr[1]/td[" + iterator + "]" }</td>
<td></td>
</tr>
You'll of course need to play with it, this is pseudo-code but will give a pretty decent idea of how to solve it using the IDE.
This should be any easy one for you. I want to have a table with rows that expand. I am trying to implement JQuery accordion on class="Accordion1".
it does not work at all.
What am I doing wrong?
...
<script>
$(function() {
$( "th.Accordion1").accordion();
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th colspan="2" class="Accordion1">GROUP 1</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
<tr>
<th colspan="2" class="Accordion1">GROUP 2</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
Thanks!
I believe you want to use the header option of jQuery Accordion.
$(function () {
$('table').accordion({header: '.accordion1' });
});
http://api.jqueryui.com/accordion/#option-header
I realize that this post is quite old but I have two different solutions for the problem stated and thought to post them anyway, maybe someone is thankful for it.
You can find two options on my Pen.
One including "Group 1" and "Group 2"...
<div class="options" id="op1">
<div class="accordion">
<h3>GROUP 1</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3>GROUP 2</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
And one without
<div class="options" id="op2">
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
Be aware that for this to work you have to include jquery and jquery-ui!
The options I've added for the accordion and the CSS are optional... ;)