Develop Reference

Javascript show more button in table

I need to show another tbody of table on Click. I have following table which is in foreach so there will be multiple buttons.:
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<td class="show-more-button">Show more</td> //It will open first tbody
<tr>
<tr>
<td class="show-more-button">Show more</td> //It will open second tbody
<tr>
<tbody class="show-more"> //First tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<tbody class="show-more"> //Second tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</tbody>
I'm using python with DjangoFramework. And that's the script i came up with. But it only works for changing the 's text but doesn't show the tbody.
<script>
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).parent().children(".show-more").style.display = "block";
} else {
$(this).text("Show more");
$(this).parent().children(".show-more").style.display = "block";
}
});
</script>
and in CSS:
.show-more {
display: none;
}
What error do i have in my script?

Because $(this).parent() will be <tr>. For example you might use closest and find first parent table and there will be able using .children('.show-more'). See an example below.
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).closest('table').children(".show-more").css('display', 'block');
} else {
$(this).text("Show more");
$(this).closest('table').children(".show-more").css('display', 'none');
}
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td class="show-more-button">Show more</td>
<tr>
<tbody class="show-more">
<tr>
<td>John</td>
<td>Doe</td>
<td>27</td>
</tr>
<tr>
<td>Alice</td>
<td>Lo</td>
<td>43</td>
</tr>
<tr>
<td>Linda</td>
<td>Morrison</td>
<td>45</td>
</tr>
</tbody>
</table>
Example changed and i prepared new solution.
$(document).on("click", ".show-more-button", function() {
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($(this).text() == "Show more") {
$(this).text("Show less");
$showMoreElement.css('display', 'block');
} else {
$(this).text("Show more");
$showMoreElement.css('display', 'none');
}
});
.show-more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<!--It will open first tbody -->
<td class="show-more-button" data-more-for="1">Show more</td>
</tr>
<tr>
<!--It will open second tbody -->
<td class="show-more-button" data-more-for="2">Show more</td>
</tr>
</tbody>
<!--First tbody -->
<tbody class="show-more" data-more-id="1">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<!--Second tbody-->
<tbody class="show-more" data-more-id="2">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</table>

Here two ways. Choose anyone. It works well:
$(function(){
$('.show-more-button').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id).toggle();
});
$('.show-more-button2').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id+'_2').toggle();
th_sh();
});
})
function th_sh(){
var o = 0;
$('#call-table2').find('.shows').each(function(){
var u = $(this).css('display') == 'table-row' ? 1 : 0;
o = o + u;
});
o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="shm1" style="display:none;">
<th scope="col">Data1</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2" style="display:none;">
<th scope="col">Data2</th>
<th scope="col">Value</th>
</tr>
<tr class="shm2" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3" style="display:none;">
<th scope="col">Data3</th>
<th scope="col">Value</th>
</tr>
<tr class="shm3" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
<br><hr><br>
<table class="table table-striped" id="call-table2">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="th_disp" style="display:none;">
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1_2 shows" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2_2 shows" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3_2 shows" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>

Get value from <td> where <th> matches text

With a system that I use you can create custom fields. These fields all have the same html and css. Now I would like to get the value td where the th is week.
Now I use:
var week = $(this).find('td.bug-custom-field:last').text();
Which works but then I have to make sure it always is the last field. Is there a better way of doing this?
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>

Var 1:
var week=0;
$('table tr td').each(function(){
if($(this).prev().text()=='Week'){
week=parseInt($(this).text(), 10);
}
});
console.log(week);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
Var 2:
var week = $('table').find('td.bug-custom-field:last').text();
console.log(week);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>

You already have most of the details you need. Once you have the th the most robust solution is to go up to the row and then use find to find the td. The alternative is a simple .next() but is more likely to break if the layout changes.
var th = $("th.bug-custom-field.category:contains('Week')")
var row = $(th).closest("tr");
var week = $(row).find('td.bug-custom-field:last').text();
var weekTH = $("th.bug-custom-field.category:contains('Week')")
var weekTR = $(weekTH).closest("tr");
var weekTD = $(weekTR).find('td.bug-custom-field:last');
var week = $(weekTD).text();
console.log(week);
th { text-align:left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>

Table: click in row then show me the column id

i have a very simple table. When i click in a row does i become the id from the clicked column. Any ideas?
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Example:
Click on Country2: country(column id)
Click on Number3: number(column id)
$('#myTable tbody').on('click', 'tr', function () {
alert('clicked in row, but which column?');
}
Best regards

you could check the index of the td with respect row and then find the respected column th id using eq() function of jquery
$('tr td').click(function(){
var a = $(this).index();
var id = $('tr th').eq(a).attr('id')
console.log(id);
})
table ,tr,td{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>

Get the row index using $(this).index() + 1:
$('#myTable tbody').on('click', 'tr', function () {
alert('You clicked on row '+ ($(this).index() + 1 ) );
});

Use index . Index start with 0 so add 1 .
$('#myTable tbody').on('click', 'tr', function() {
var row = $(this).index() + 1; // Index start with 0 so add 1
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>

var $table = $('#myTable'),
$th = $table.find('thead tr th');
$table.find('tbody tr').on('click', 'td', function () {
console.log($th[$(this).index()].id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>

Hope this helpful.
Html:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable" class="display table-striped">
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</table>
</body>
</html>
Script:
<script>
$('#myTable tbody').on('click','td', function () {
var row = $(this).index() ;
alert(row);
});
</script>
specify the 'td' in the script function. Doing this you will get the column id of the selected column in particular row.

hide column 2nd column when row above uses rowspan

I have this table
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
It renders like this
I want to get rid of the blank column of headers.
I've tried using this css
'th:nth-of-type(2) {display: none;}'
I got this instead
The rowspan is throwing me off. I'm willing to use a clever regex substitution or css.

I used css not selector
th:nth-of-type(2), tbody th:not([rowspan]) {display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

Let's get weird with it. I think :empty pseudo selector just might be what you're looking for. I don't know how different your full table structure is, but this should put you on the right path.
I placed my css on two lines for readability. You can combine as you wish.
tr > th:empty:nth-child(2){display: none;}
tr > td:empty:nth-child(2){display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

Here is one way to do it with jquery. This locates each <th> with a rowspan attribute and hides any immediately proceeding column.
$("table.dataframe").find("th[rowspan]").each(function() {
var index = $(this).index() + 2;
$(this).closest("table.dataframe").find('th,td').filter(":nth-child("+index+")").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

You can achieve this by giving tds and ths borders then setting the first col border to 0 or none, but you gonna have to omit or set the table border to 0:
table {
border-collapse: collapse;
}
table th, td {
border: 1px solid #000;
}
table th.no-border {
border: none;
}
<table class="dataframe">
<thead>
<tr style="text-align: right;">
<th class="no-border"></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>

is this table data dynamic?
assuming this table is fixed javascript way would be like this
it checks if your second column is blank then remove then second element of each table row
<script>
var x = document.getElementsByTagName("th");
var check = x[1].innerHTML;
if(check == "") {
var blk_0 = document.getElementsByTagName("tr")[0];
var blk_1 = document.getElementsByTagName("tr")[1];
var blk_2 = document.getElementsByTagName("tr")[2];
blk_0.removeChild(blk_0.childNodes[3]);
blk_1.removeChild(blk_1.childNodes[3]);
blk_2.removeChild(blk_2.childNodes[1]);
}
</script>
https://jsfiddle.net/3erhzcta/

move a column ,including th, between tables in jQueryUI sortable

Fiddle Example
I have two example tables with subject titles in the first cells.
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
<th>Person 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
<td>23</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
<td>Policeman</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Firefighter</td>
</tr>
</tbody>
</table>
I've made the first child of th and td unsortable since they are titles. Is there any way to move other columns, one at a time (td:nth-child,th:nth-child), to the other table using jQueryUI sortable?
How can I make a whole column sortable in the change or start event?
Here's my expected output:
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 2</th> // sorted
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>23</td> //sorted
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Policeman</td> //sorted
<td>Firefighter</td>
</tr>
</tbody>
</table>
JS code:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(function() {
$( ".sort" ).sortable({
change: function( event, ui ) {
var see = ui.item.index();
console.log(see);
$(this).find('td:nth-child(see),th:nth-child(see)')
},
helper: fixHelperModified,
cancel: ".ui-state-disabled",
connectWith: ".connect"
}).disableSelection();
});

What about something like this?
It's a workaround for what you're asking, but it does basically the same thing, just fix the styling, spaces, etc. as you'd like
HTML
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>18</td>
</tr>
<tr>
<td>Clerk</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>Policeman</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
</tr>
<tr>
<td>Student</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>46</td>
</tr>
<tr>
<td>Firefighter</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
td, th {
border:1px solid #222
}
.red {
background:red
}
.ui-state-disabled {
opacity:1
}
.sortableContainer>div {
display:inline-block;
}
table {
border-spacing:0px;
border-collapse:collapse;
}
JS
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});