I need to hide table rows depending on their content - javascript

I have a simple table of domains and subdomains.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
</body>
</html>
I need to show/hide subdomains when I click on domain row.
I tried jQuery slideToggle
$(document).ready(function(){
$(document).on("click", "tbody tr:eq(1)", function(){
$("tbody tr:nth-child(1n+3)").slideToggle(1000);
});
});
It works fine when I specify row numbers manually, but I need to find them automatically for every domain/subdomains, because table will grow in size.
So I need to check subdomain_name textContent:
If it's empty - this is a domain. Add EventListener to it, so on click it will show/hide it's subdomains.
If it's not empty - check domain_name textContect and add to rows that need to be hidden.


You can add class for the <td> of domain name using following css selector, then loop through the rows and using .closest().
ThefirstIndex is to determine the row without subdomain value
$(document).ready(function(){
$('tr>td:nth-child(1)').addClass('domainTd');
$(document).on("click", ".domainTd", function(){
var domainName= $(this).text();
var firstIndex=true;
$('tr>td:nth-child(1)').each(function(index){
if($(this).text()===domainName){
if(firstIndex){
firstIndex=false;
}else{
$(this).closest('tr').slideToggle()
}
}
})
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

Related

Advanced search in HTML table with Jquery

I am trying to search html table using jquery, and from examples seen in internet i managed to get it to work, but i would like to do more advanced search.
I want search to include also next row from matched row (regardless if there is any match there), how could i achieve this ?
I have this HTML at moment:
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("tbody tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input id="myInput" type="text" placeholder="Search..">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</p>
<table>
<thead>
<tr>
<th style='text-align:left;'>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>Porsche</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Ferrari</td>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Lada</td>
</tr>
<tr>
<td>Vladimir</td>
</tr>
</tbody>
</table>
</body>
</html>
So goal would be to always include +1 row to matched row ,for example if i would search Ferrari, i would like it to show Ferrari row and John row.

$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("tbody tr").filter(function () {
if ($(this).text().toLowerCase().indexOf(value) > -1) {
$(this).addClass("filteredNode");
}
else {
$(this).removeClass("filteredNode");
}
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
.filteredNode + tr {
display: table-row !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<p>
<input id="myInput" type="text" placeholder="Search..">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</p>
<table>
<thead>
<tr>
<th style='text-align:left;'>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>Porsche</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Ferrari</td>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Lada</td>
</tr>
<tr>
<td>Vladimir</td>
</tr>
</tbody>
</table>
</body>
</html>

jQuery DataTable Not a Function

I've done a lot of searching and everyone says it is caused by including the DataTable script before jQuery, or double-including jQuery.
However, this is not the case for my code.
I keep getting $(...).DataTable is not a function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
</head>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

https is secured connection.In your case you are using http in http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js which may be the source of the problem
$(document).ready(function() {
$('#myTable').DataTable();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>

#Philip Tenn, I have checked the code with and without https. But I have no any issue with your code, its working fine.

You have a </div> at the end of your table that shouldn't be there, but otherwise your code works fine...
$(document).ready(function(){
$('#myTable').DataTable();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</body>
</html>
Perhaps there is something else on your page that is interfering with it?

How to select a specific element with nested table in html using jquery

I have searched and tried some jquery selectors (e.g. :last) but I couldn't figure out which selector should I use. Should I use this also? The problem is, I want to add a row inside of nested <table>, and if I click add button, the only specific <table> can add a row inside it.Here's my example code:
index.html
=========================================================================
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
If I clicked the Add Item, 1 row() added below the Yamaha Item.
If I clicked the Add Customer, 1 row() added below the Some Name.
myJS.js code:
=========================================================================
$("#addItem").on('click', function(e) {
$('tr:last').after("Added Row for Items.");
e.preventDefault();
});
<br>
$("#addCustomer").on('click', function(e) {
$('tr:last').after("Added Row for Customer.");
e.preventDefault();
});

I added <tfoot> for the tr.customer and table.cart and placed the buttons therein respectively. It needed classes and ids to make a complex task much easier.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".addItem").on('click', function(e) {
$(this).closest('table').find(".item:last").after('<tr class="item"><td>New item</td><td></td><td></td><td></td></tr>');
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td>New Item</td><td></td><td></td><td></td></tr>');
$('.customer:last').append(newCart);
e.preventDefault();
});
</script>
</body>
</html>

Give your tables unique ids.
For example:
<table id="customerTable"></table>
<table id="productTable"></table>
$("#addCustomer").on('click', function(e) {
$('#customerTable > tbody').append('<tr><td>New row</td></tr>');
e.preventDefault();
});
If you will use a loop from a data source and there will be more than two tables, you can use closest() or siblings() function to select that tables.
// note, use class instead of using id if there will be multiple buttons.
$('.addCustomer').on('click', function() {
// test if you get the correct table
var table = $(this).closest('table');
console.log(table);
// if above not work try;
var table = $(this).siblings('table');
console.log(table);
// if you successfully get the table you wanted,
table.find('tbody').append('<tr><td>New customer row</tr>');
});

You can try this,
$(document).ready(function () {
$("#AddItem").on('click', function(e) {
$(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Item</td></tr>')
e.preventDefault();
});
$("#AddCustomer").on('click', function(e) {
$(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Customer</td></tr>')
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>

Some thing like this
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="StackOverflow_Solve.jQueryAjax.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script>
$(function () {
// $('#myModal').show();
$('#AddItem').click(function(e) {
e.preventDefault();
var childtable = $(this).closest('tr').find('.childtable');
console.log(childtable);
var mytr = '<tr><td>Yamaha</td><td>1</td><td>Large</td><td>Black</td><td> <button id="remove" class="remove">remove Customer</button></td></tr>';
$('#childtable > tbody:last').append(mytr);
});
$(document).on('focus', '.remove', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table id="childtable" class="childtable">
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<button id="remove" class="remove">remove Customer</button>
</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
</form>
</body>
</html>

slidetoggle multiple divs with same id

I am trying to create a table of information for artists. Fields are generated dynamically from database. If any user clicks on artist name, few others information related to the artist shows down. At first rest of the information are kept hide.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>Artist Name</td>
<td>Birth Year</td>
<td>Age</td>
</tr>
<tr id="collapsible">
<td><h2>A</h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>B<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>C<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
</table>
</body>
</html>
Jquery
$(document).ready(function(){
// hide all div containers
$('collapsible#rest').hide();
// append click event to the a element
$('#check-details').click(function(e) {
// slide down the corresponding div if hidden, or slide up if shown
$(this).parent().next('#rest').slideToggle('slow');
// set the current item as active
$(this).parent().toggleClass('active');
e.preventDefault();
});
});

You had quite a few errors there. For example, you can't have random div's inside table rows unless they are inside elements. I corrected the syntax and made some improvements to your javascript code.($(this).parents('.collapsible').next('.rest').slideToggle('slow');) jsFiddle http://jsfiddle.net/q6AmR/

$(this).parent()
Is incorrect, your a tag is in a h2 which is it's parent, you'd have to do
$(this).parent().parent().parent()
To get back to the tr which contains the div.
Also, having a div within a tr is poorly formed HTML, as if having a tr within a tr.
I would recommend changing the HTML to something like:
<table>
<tr>
<td><a href="" class="artistLink">Katy Perry</td>
<td></td>
<td></td>
</tr>
<tr class="rest">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
$("tr.rest").hide();
$("a.artistLink").click(function(e) {
$(this).parent().parent().next("tr.rest").slideToggle();
...
});
</script>
This was written on my iPad so might need tweaking!

Rotate a table 90 degrees

I have a table that looks something like this:
<table><tbody>
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
<tr><td>d</td><td>4</td></tr>
<tr><td>e</td><td>5</td></tr>
<tr><td>f</td><td>6</td></tr>
<tr><td>g</td><td>7</td></tr>
</tbody></table>
I need it to get to something like this:
<table><tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
<td>e</td><td>f</td><td>g</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>5</td><td>6</td><td>7</td>
</tr>
</tbody></table>
example
I'm thinking something like this should work, but I'm kinda lost, how would I go about this:
Here's what I started
I'm open to Javascript, jQuery or even CSS for this.

This will swap the rows and columns of any size tbody,
as long as rows all have the same number of cells.
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> Small Test Page</title>
</head>
<body>
<script>
function tableSwap(){
var t= document.getElementsByTagName('tbody')[0],
r= t.getElementsByTagName('tr'),
cols= r.length, rows= r[0].getElementsByTagName('td').length,
cell, next, tem, i= 0, tbod= document.createElement('tbody');
while(i<rows){
cell= 0;
tem= document.createElement('tr');
while(cell<cols){
next= r[cell++].getElementsByTagName('td')[0];
tem.appendChild(next);
}
tbod.appendChild(tem);
++i;
}
t.parentNode.replaceChild(tbod, t);
}
</script>
<h1> Small Test Page</h1>
<p> <button type= "button" id= "tableSwapBtn" onclick= "tableSwap()">
Swap rows and columns</button> </p>
<table style="width:300px;border:1px" rules="all">
<tbody>
<tr> <td> a</td> <td> 1</td> </tr>
<tr> <td> b</td> <td> 2</td> </tr>
<tr> <td> c</td> <td> 3</td> </tr>
<tr> <td> d</td> <td> 4</td> </tr>
<tr> <td> e</td> <td> 5</td> </tr>
<tr> <td> f</td> <td> 6</td> </tr>
<tr> <td> g</td> <td> 7</td> </tr>
</tbody>
</table>
</body>
</html>

Here is my solution:
http://jsfiddle.net/mtrwk/19/
$('table').each(function() {
$(this).after("<table><tbody></tbody></table>");
var newTable = $(this).next("table").children("tbody");
$(this).children("tbody").children("tr").each(function(rIndex, rItem){
$(this).children("td").each(function(dIndex, dItem){
if(newTable.children("tr:eq("+dIndex+")").html() == null){
newTable.append("<tr></tr>");
}
newTable.children("tr:eq("+dIndex+")").append($(this)[0].outerHTML);
});
});
});

I have a jquery class that accomplish this task. This class supports rowspan and colspan in the table as well.
Usage is really simple:
$('#newtable').tableflip($('#sourcetable'));
Here is the code of the class and sample usage: https://jsfiddle.net/adyhu78/9b1q4ys0/

Categories