Toggling specific paragraphs using jquery doesn't work - javascript

I am trying to get jquery function to work on table rows. I am basing my solution on the following stack overflow question, however whenever I click on the expand link nothing seems to happen. I tried to debug the javascript code but it doesn't to reach it.
Here is the HTML code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> td { white-space: pre } p { display: none } </style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
</head>
<body>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks!

You have two options:
wrap the code in $(document).ready
place it after your body tag close at the bottom of the file (benefits)
Your code also had mismatch of target element.
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
.expanding-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content2">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content2" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>

wrap the code in a document ready statement
$( document ).ready(function() {
// Handler for .ready() called.
});

The thing here is your jquery selector, you are targeting your links wrongly, try this instead:
<script>
$("a[data-toggle=*]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
That way you will target all A tags, with a data-toggle with any value inside it.

An alternative way:
WORKING DEMO
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
JS:
$(document).on("click","a[data-toggle]", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});

Related

How to save table with contenteditable column into local storage

I'm trying to save the content of column 3, with id name = 'edit' in the table, locally. Here is the code:
// Button to save edit
function saveEdits() {
var table, tr, editElem, userVersion, i, j;
table = document.getElementById("mytable");
tr = table.getElementByClassName("output");
editElems = {
for (i=0; i< tr.length; i++){
//get the editable element
userVersion[i] : tr[i].getElementsById("edit").innerHTML;
}
}
localStorage.setItem('userEdits', JSON.stringify(editElems));
}
// place in the body to reload the changes
function checkEdits() {
var userEdits = localStorage.getItem('userEdits');
if (userEdits) {
userEdits = JSON.parse(userEdits);
for ( var elementId in userEdits ) {
document.getElementById(elementId).innerHTML = userEdits[elementId];
}
}
}
I am following tutorial in https://www.developerdrive.com/allowing-users-to-edit-text-content-with-html5/, but I want to apply it to the table, however, it doesn't work.
Here is my html code
<!doctype html>
<html>
<head>
<title>BOOK LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src=./javascript.js></script>
</head>
<body onload="checkEdits()">
<div class="header">
<h1>BOOK</h1>
</div>
<div class="tbody">
<table id="mytable" align="center" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">BOOK NAME</th>
<th width="50%">AUTHOR</th>
<th width="25%">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class='output'>
<td>1</td>
<td>BOOK 1</td>
<td>John</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>2</td>
<td>BOOK 2</td>
<td>Sara</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>3</td>
<td>BOOK 3</td>
<td>Mary</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>4</td>
<td>BOOK 4</td>
<td>Bob</td>
<td id='edit' contenteditable='true'>No Description</td>
<!---- TABLE FILTER AND SORT FUNCTION ---->
<script>
$(document).ready(function() {
$('#mytable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</tbody>
</table>
<!--------------------- EDIT FILE ----------------------------------------------->
<input id='saveComment' type='button' value='Save' onclick='saveEdits()'>
<!------------------------------------------------------------------------------->
</div>
</body>
</html>
There are some bugs in the code:
tr = table.getElementByClassName("output"); // it is getElementsByClassName
secondly, I don't know if this style of declaring a JSON is valid or not but since it didn't worked, I changed it and saved the values first to an array and then converted it to a JSON String.
Another thing is that the way you are trying to store key value pairs in JSON you won't be able to get a selector in a JSON String and hence you won't be able to update the values correctly. So, i have used an associative array where it's keys are the row number in which the edit was performed and the value holds the new content of that column. So, while updating you just have to select the desired column from a row in which the values should be updated.
This is working fine:
// Button to save edit
var TR;
function saveEdits() {
var table, tr, editElem, userVersion = [], i, j;
table = document.getElementById("mytable");
tr = table.getElementsByClassName("output"); //element
TR = tr;
console.log(tr);
for (i=0; i< tr.length; i++){
// This will set a key value pair where key as row number and value as the inner HTML
// This key will further help us updating the values from localhost
userVersion[tr[i].sectionRowIndex] = tr[i].getElementsByTagName("td")[3].innerHTML;
}
console.log(userVersion);
localStorage.setItem('userEdits', JSON.stringify(userVersion));
}
// place in the body to reload the changes
function checkEdits() {
try{
var userEdits = localStorage.getItem('userEdits');
//console.log(JSON.parse(userEdits));
if (userEdits) {
userEdits = JSON.parse(userEdits);
table = document.getElementById("mytable");
tr = table.getElementsByClassName("output"); //element
for ( var elementId in userEdits ) {
tr[elementId].getElementsByTagName("td")[3].innerHTML = userEdits[elementId];
}
}
}catch{
//console.log("Hello");
}
}
<!doctype html>
<html>
<head>
<title>BOOK LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body onload="checkEdits()">
<div class="header">
<h1>BOOK</h1>
</div>
<div class="tbody">
<table id="mytable" align="center" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">BOOK NAME</th>
<th width="50%">AUTHOR</th>
<th width="25%">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class='output'>
<td>1</td>
<td>BOOK 1</td>
<td>John</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>2</td>
<td>BOOK 2</td>
<td>Sara</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>3</td>
<td>BOOK 3</td>
<td>Mary</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>4</td>
<td>BOOK 4</td>
<td>Bob</td>
<td id='edit' contenteditable='true'>No Description</td>
<!---- TABLE FILTER AND SORT FUNCTION ---->
<script>
$(document).ready(function() {
$('#mytable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</tbody>
</table>
<!--------------------- EDIT FILE ----------------------------------------------->
<input id='saveComment' type='button' value='Save' onclick='saveEdits()'>
<!------------------------------------------------------------------------------->
</div>
</body>
</html>

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>

How to move content from one row of the table to another table row using javascript

I have two tables.Table 1 and table 2.I want to copy one row content to another when click on the that row instead of button ,using java-script.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("t1").clone().appendTo("t2");
});
});
</script>
</head>
<body>
<table style="width:100%;border-style:dashed">
<tr1>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr1>
</table>
</br>
<table style="width:100%;border-style:dashed">
<tr2>
<th></th>
<th></th>
<th></th>
</tr2>
</table>
<button>colne</button>
</body>
</html>
i will appreciate if codepen example be given.
You might trying to achieve this using
.droppable
Check this
Jsfiddle
$(document).ready(function() {
var items = [];
$("#myTable tr").on("click", function() {
var newTr = $(this).closest("tr").clone();
var newButtonHTML = "<input type = 'button' value='Edit' onclick='Edit()' /><input type='button' value='Delete' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>";
$(newButtonHTML).children("button").click(function(e) {
});
$(newTr).children("td:last").html("").html(newButtonHTML);
items.push(newTr);
newTr.appendTo($("#stopsTable"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="height: 700px;width: 100%;overflow: auto; float: left;">
<table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" >
<thead>
<tr>
<th>S No</th>
<th>Stop Name</th>
<th>Longitude</th>
<th>Latitude</th>
<th>ETA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr >
<td >1</td>
<td>The Indian Heights School</td>
<td>28.56137</td>
<td>77.05249</td>
<td>06:06:12</td>
<td>Ignition_On</td>
</tr>
<tr >
<td >2</td>
<td>The Indian Heights School</td>
<td>28.56136</td>
<td>77.05246</td>
<td>06:06:23</td>
<td>Ignition_On</td>
</tr>
<tr >
<td >3</td>
<td>The Indian Heights School</td>
<td>28.56135</td>
<td>77.05242</td>
<td>06:06:31</td>
<td>Start</td>
</tr>
<tr >
<td >4</td>
<td>The Indian Heights School</td>
<td>28.56139</td>
<td>77.05245</td>
<td>06:06:41</td>
<td>Ignition_On</td>
</tr>
</tbody>
</table>
<table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;">
<thead>
<tr>
<th>S No</th>
<th>Stop Name</th>
<th>Longitude</th>
<th>Latitude</th>
<th>ETA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Just see my code in this example .I think it will be help full for you and other friends.
should be a simple matter of jquery dom manipulation, consider this:
<table id="first-table">
<tbody>
<tr class="row-copier"><td>Content here</td><td>other content</td></tr>
<tr class="row-copier"><td>more content</td><td>second column</td></tr>
<tr class="row-copier"><td>...and something completely different</td><td><h1>YAY!</h1></td></tr>
</tbody>
</table>
<table id="second-table">
<tbody>
<tr><td>Result Table</td><td>where stuff will get copied</td></tr>
</tbody>
</table>
<script>
jQuery(function($) {
$('.row-copier').click(function() {
// select row-copier row, clone it, and append to second table body
$(this).clone().appendTo('#second-table>tbody');
});
});
</script>
the important bits are the clone operation to make a deep copy, and the appendTo to specify where the clone copy is being put. I edited the answer to reflect your desire to copy the row clicking anywhere on the row itself, so no links are required, nor a closest to get the row.
good luck!

Html Show Hide Content

I am trying to find an OnClick Function that will work inside of a table.
When the page loads they content needs to be hidden, but given an option either but button or link to show it.
<div id="table-container">
<table id="maintable" border="1" cellspacing="0" cellpadding="1">
<thead>
<th class="blk" nowrap>Number</th>
<th class="blk" nowrap>Original Title</th>
<th class="blk" nowrap>Translated Title</th>
</thead>
<tbody>
<td class="lgt"><font size="4">2 Guns </font></td>
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
This is roughly what I am trying to do, is be able to hide
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
and or unhide them..
I have tried using the below input..
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<div id="wrap">
See more.</p>
<p>Hide this content.</p>
</div>
All that seems to do is lift the text in the cell of the table, and not the table..
UPDATE: Can't seem to get what exactly are you trying to do, so I'll try to cover the obvious.
I'm assuming you are coding the HTML yourself and not receiving the output of some server-side script, although that would be the most reasonable.
If you are coding the HTML, that means you can add classes, ids and tags as needed without problems. I would definitely do something entirely different but that would imply more convoluted code.
With multiple sections. A toggle per section:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
section = $(this).attr('data-section');
$(section + ' .hidethis').toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<caption>SECTION 1</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<table id='section-2' border="1">
<caption>SECTION 2</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<div class='toggle' data-section='#section-1'>Toggle section 1</div>
<div class='toggle' data-section='#section-2'>Toggle section 2</div>
</body>
</html>
One toggle per item:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
$('.hidethis', $(this).parent()).toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In this case, notice that in order to not over-complicate the jQuery code, you'll need some kind of container that parent both title and expandable content.
After much more searching about, I found this...
<html>
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
</head>
<body>
<span onClick="toggle();">toggle</span><br /><br />
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</body>
</html>
It worked a treat, the problem I found with it, was I couldn't work out how to make it do more than just 1 row.. But in the other posts someone mentioned using..
<tbody>
So I did over the ones I needed.. Now I have included a button and I am done with it :)
Thanks for your help though
Ok someone had helped me with this, and this was the solution to making it work a treat.
<script type='text/javascript'>
$(document).ready(function(){
$(document).on('keyup', '#search-box', function(){
$('#maintable tbody:not(.myContent)').each(function(){
var movieTitle = $(this).find('td:nth-child(2)').text();
if (RegExp($('#search-box').val(), 'i').test(movieTitle)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
<tr><!-- FIX: Needed to wrap it in a row -->
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
</tr>
<tbody class="myContent" style="display:none;">
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This/td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr><!-- FIX: close row -->
</tbody>

Javascript create a modified html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Test</title></head>
<body>
<table id = "summary">
<tr>
<th style="text-align:center">ID</th>
<th style="text-align:center">Source</th>
<th style="text-align:center">Operation</th>
</tr>
<tr>
<td style="text-align:center">1</td>
<td style="text-align:center">EcpR</td>
<td style="text-align:center">detail</td>
</tr>
<tr>
<td style="text-align:center">2</td>
<td style="text-align:center">SrcWP</td>
<td style="text-align:center">detail</td>
</tr>
</table>
<table id = "ds1" style = "display:none">
<tr>
<th style="text-align:center">ID</th>
<th style="text-align:center">Server</th>
<th style="text-align:center">ConnCount</th>
</tr>
<tr>
<td style="text-align:center">1</td>
<td style="text-align:center">108.123.0.1</td>
<td style="text-align:center">26</td>
</tr>
<tr>
<td style="text-align:center">2</td>
<td style="text-align:center">127.56.27.1</td>
<td style="text-align:center">127</td>
</tr>
</table>
<table id = "ds2" style = "display:none">
<tr>
<th style="text-align:center">ID</th>
<th style="text-align:center">Server</th>
<th style="text-align:center">ConnCount</th>
</tr>
<tr>
<td style="text-align:center">1</td>
<td style="text-align:center">118.103.10.11</td>
<td style="text-align:center">206</td>
</tr>
<tr>
<td style="text-align:center">2</td>
<td style="text-align:center">87.36.127.13</td>
<td style="text-align:center">17</td>
</tr>
</table>
<script>
function showDS(i) {
var detailedPage = window.open();
/*
do something
*/
}
</script>
<body>
</html>
I want to use the Javascript to solve the following problem: when user click the first "detail" link, a new html page should be opened, and the content of the new html should be identical to the previous one except that the "summary" table becomes "display:none" and the "ds1" table becomes "display:block". I think I need to copy the document object of the old html, do anyone known how to copy the content of a html including the tags?

Categories