Bootstrap tooltip pushed my right side contents away - javascript

I added tooltip in my table's 2nd column but it is pushiing my last column away.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


You can just add data-container="body" in your HTML in this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
or can add {container: 'body'} to your JavaScript in this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
EDIT:
If you want your tooltip to be on text instead of td you can create an inner element like span and add tooltip on that item. Try this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>
<span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</span>
</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>
<span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</span></td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
just add data-container="body"
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>


try this way :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</p></td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</p></td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


edit <tbody> like
<tbody>
<tr data-toggle="tooltip">
<td>Default</td>
<td data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success" data-toggle="tooltip">
<td>Success</td>
<td data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
this. put data-toggle="tooltip" into <tr> tag

Related

Problems creating dynamic attributes inside foreach: knockoutjs

I am having problems displaying data in the accordian, as shown in photo.
No matter what row you click, the same "hidden row" is displayed. And I see why... the following line sets the target of the accordian element.
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
Somehow I need to make "#demo1" unique, and the hidden row as well.
Here is the code: How would I make sure each row gets it's own unique target id, as well as the hidden row?
Thanks!
<table class="table table-striped table-bordered notranslate">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th>First</th>
<th>Last</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody data-bind="foreach: customers">
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>
<i class="fa fa-plus" style="cursor: pointer"></i>
</td>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
<td> <i class="fa fa-pencil mr-1" data-bind="click: $root.editCustomer"></i> <i class="fa fa-trash mr-1" data-bind="click: $root.deleteCustomer"></i></td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" id="demo1" >
<table class="" style="background-color: lightyellow; width: 100%;">
<tbody>
<tr>
<th>Address 1</th>
<th>Address 2</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
</tr>
<tr>
<td data-bind="text: address1"></td>
<td data-bind="text: address2"></td>
<td data-bind="text: city"></td>
<td data-bind="text: state"></td>
<td data-bind="text: zip"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

You should make sure the data-target and matching hidden row id are unique for each row. You can use the attr data-binding to dynamically set these attributes and utilize the $index context observable property of the foreach binding to construct unique matching values.
This could result in for example data-bind="attr: { 'data-target': '#demo' + $index() }" for the data-target and data-bind="attr: { id: 'demo' + $index() }" for the matching hidden row id. Have a look at the shortened example below:
ko.applyBindings({
customers: [{}, {}, {}, {}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<table class="table table-striped table-bordered notranslate">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th>First</th>
<th>Last</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody data-bind="foreach: customers">
<tr data-toggle="collapse" data-bind="attr: { 'data-target': '#demo' + $index() }" class="accordion-toggle">
<td colspan="6">Click to toggle</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" data-bind="attr: { id: 'demo' + $index() }">
<table class="" style="background-color: lightyellow; width: 100%;">
<tbody>
<tr>
<th>Address 1</th>
<th>Address 2</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
</tr>
<tr>
<td colspan="5">...</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

clear data from a row in a table html

hi there I want to clear the data from a table but just one row and not delete the row. i was looking for some code but I find just delete row
what is the best way to clear the data from a tr and leave the td tittle just clear the Item and Task
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>tittle</td>
<td data-name="task" class="task" data-type="text">task1</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>tittle</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">task2</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>tittle</td>
<td data-name="task" class="task" data-type="text">task3</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td> <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
</tr>
</tbody>
</table>

On click find the .parent() of the button, and clear its .siblings() using `.empty()':
$('#table').on('click', '.delete', function() {
$(this).parent('td')
.siblings('.task, .Item') // or remove selectors to clear all siblings
.empty();
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>2</td>
<td data-name="task" data-disabled="true" class="task" data-type="text">002</td>
<td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
<tr>
<td>3</td>
<td data-name="task" class="task" data-type="text">003</td>
<td data-name="Item" class="Item" data-type="select">Item3</td>
<td><button class="delete btn btn-sm btn-default">delete data</button></td>
</tr>
</tbody>
</table>

If you want to remove the row entirely :
$('#delete').click(function() {
$(this).closest('tr').remove();
});
To remove all content -including th divs- :
$('#delete').click(function() {
$(this).closest('tr').empty();
});
To remove only the content of each cell :
$('#delete').click(function() {
$(this).closest('tr').children().empty();
$(this).closest('tr').css({display: "hidden"});//to visually remove the line (and not have an empty line)
});

$("#table tr:nth-child(n) td").empty();
OR
$("#table tr:nth-child(n) td").html('');

Expend/collapse table rows in jQuery

Check the code bellow. My code currently working fine but when I click "More" button its expends all rows and once i click "Less" it collapse all rows. My goal is: by default display only first 6 rows when I click more it will load reset all available rows. Then when I click "Less" it will collapse only the expended rows the 6 rows will be as like default position. And if the rows less then 6 then this button will just not do anything. Also if possible I wanted slow dropdown not slow hide/show.
How can I achieve that?
$(".table").children("tbody").hide();
$("#expendbtn").html("More");
$("#expendbtn").click(function(){
if ($("#expendbtn").text()=="More") {
$(".table").children("tbody").show("slow");
$("#expendbtn").html("Less");
} else {
$(".table").children("tbody").hide("slow");
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>

This will work for you.
A simple tweak inside you script, I have changed this ↓
$(".table").children("tbody").hide();
to this ↓
$(".table").find("tr").hide().slice(0, 7).show();
A working fiddle for you. ↓
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").show();
$("#expendbtn").html("Less");
} else {
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
Updated 2 with transition
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").removeClass('slideUp');
$("#expendbtn").html("Less");
} else {
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
}
});
.table tbody{
}
.table tr{
transition: all ease-in-out 0.4s;
overflow:hidden;
max-height:100px;
}
.table tr.slideUp{
transform: scaleY(0);
display:block;
max-height:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>

Here you go with a solution https://jsfiddle.net/v5pvxujp/1/
$("#expendbtn")
.html("More")
.click(function(){
if ($("#expendbtn").text()=="More") {
$('table tr:nth-child(n+7)').fadeIn('slow');
$("#expendbtn").html("Less");
} else {
$('table tr:nth-child(n+7)').fadeOut('slow');
$("#expendbtn").html("More");
}
});
.hideRow {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
Hope this will help you.

A working, shorter and expendable example:
/**
* Hide every row from +irow+
* If +animateIt+ is true, animate the dropdown
*
*/
function hideRowsStartingAt(irow, animateIt)
{
$(".table tbody").children("tr:nth-child(n+"+irow+")").hide(animateIt ? 'slow' : null);
}
// Set up
hideRowsStartingAt(7);
$("#expendbtn").html("More");
// Wait (for click) and see
$("#expendbtn").click(function(){
// Collapse or expend ?
var doExpend = $("#expendbtn").text() == "More" ;
if ( doExpend )
{
$(".table tbody").children("tr").show('slow');
}
else // doCollapse
{
hideRowsStartingAt(7, true);
}
// Button name is now…
$("#expendbtn").html(doExpend ? 'Less' : 'More') ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>

Getting value from specific cell in an html table is not working using JQuery

I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.

Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>

Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO

Links to show and hide tables

I am trying to have links that by clicking on it will show and hide the table below it, once I land on the page all I would like to see are links. I trying with this sample code, but not getting anywhere, any suggestions?
<html>
<title>hise show</title>
<head>
<script>jquery link here</script>
<script type="text/javascript">
$(document).ready(function() {
$('.act table').hide();
$('.see').click(function() {
$(this).parents('table').find('td').slideToggle("slow");
});
});
</script>
</head>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
</body>
</html>
Thank you!

You have just to change your selector to :
$(this).next('table').slideToggle("slow");
Using JQuery next() function your code will work.
$('.act table').hide();
$('.see').click(function() {
$(this).next('table').slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>

$('#showTable').click(function(){
$('#mytable').toggleClass('hidden');
if($('#showTable').text()=='Show Table') $('#showTable').text('Hide Table');
else $('#showTable').text('Show Table');
});
table tr td{ border: 1px solid #383838; }
table { border: 1px solid #383838; }
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Show Table
<table class="hidden" id="mytable">
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
<tr>
<td>
Sample Table
</td>
<td>
Sample Table
</td>
</tr>
</table>
Another quick solution for your approach: Check this code: http://jsfiddle.net/vxt5h9o7/

Try this, run the snippet
<!DOCTYPE html>
<html>
<head>
<title>The code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 2</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>
<br>
<p class="see" style="font-size:15px;">Table 3</p>
<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
<script>
$(document).ready(function(){
$(".act").hide();
$(".see").click(function(){
$(this).next().toggle();
});
});
</script>
</body>
</html>

Categories

Resources