List.js is not working for tables - javascript

I'm trying to use list.js to implement a "live" searching on a table. I have tested successfully on lists (doing something like the example in http://listjs.com/examples/existing-list). However, I cannot replicate this behavior for tables.
I have done this small code to replicate the issue:
<!DOCTYPE html>
<html><head>
<title>Test try</title>
<meta charset="UTF-8">
<script type="text/javascript" src="list.min.js"></script>
</head><body>
<div id="payload">
<input class="search" placeholder="Search">
<table style="border: 1px solid black">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</thead>
<tbody class="list" >
<tr>
<td class="a">Lorem </td>
<td class="b">ipsum </td>
<td class="c">dolor </td>
<td class="d">sit </td>
</tr>
<tr>
<td class="a">amet</td>
<td class="b">consectetur </td>
<td class="c">adipiscing </td>
<td class="d"> elit </td>
</tr>
</tbody>
</table>
</div>
<script>
var options = {ValueNames: ['a','b','c','d']};
var searchable = new List('payload', options);
</script>
</body>
</html>
For some reason I could not determine, this is not working, in FF any input on the search field clears the table body, and deleting it doesn't restore the table neither. Can you help me?

You have a typo in the variable name ValueNames that should be valueNames. A working example of your code here: http://jsfiddle.net/pTEJ3/

Related

Hiding a <td> depending on the Condition

I have a table structure as given below:
<table>
<tr>
<td id="td1"> </td>
<td id="td2"> </td>
<td id="td3"> </td>
<td id="td4"> </td>
</tr>
</table>
I am checking some condition like:
if(a==2 || check == true)
I want to hide the "td3" if any one condition satisfies.
My code is in C#.
I have already tried
document.getelementbyId("td3").style("display"= "none"),
document.getelementbyId("td3").display.hide();
td3.Attributes.add("style", "display:none")
Your three JavaScript examples aren't valid JavaScript. I recommend reading the JavaScript docs a bit more in depth!
You can use the code below to hide the td.
document.getElementById("td3").style.display = "none";
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
<td id="td4">TD4</td>
</tr>
</table>
You can simply use jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#td3').hide()
});
</script>
</head>
<body>
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
<td id="td4">TD4</td>
</tr>
</table>
</body>
</html>

HTML: Totaling columns

I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>

Jquery - copy a row from one table to another

I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.
Here are the code snippets I think are critical:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
<script>
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Thanks for any suggestions!
You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.
<table id="drafted">
<tbody>
<tr>
<th width="36"> Rank </th>
<th width="141"> Player Name </th>
<th width="52">Position </th>
<th width="38">Team </th>
<th width="69"> Bye Week </th>
</tr>
</tbody>
</table>
function DraftPlayer(o) {
var p = $(o).closest('tr');
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow)
p.remove();
}
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.innerHTML;
//alert(cloneRow )
copyTable.append("<tr>"+cloneRow+"</tr>");
p.parentNode.removeChild(p);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted" border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
</body>
</html>
A lot of mistakes in your code. Go through my code ,I edited it, Works Fine
You need to convert the DOM Element to jquery object in order to use the clone() function.
The modified DraftPlayer() function is:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
Suggestions:
There are some problem with your HTML also
Modify the table tag.
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>

Visibility does not work

So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work
<table style="visibility:hidden;" id="viewevade">
<tr>
<td class="form"width="25%">Period</td>
<td class="form"width="75%"> PeriodA </td>
</tr>
<tr>
<td class="form">Inbound Call Date</td>
<td class="form">Date</td>
</tr>
<tr>
<td class="form">Input Date</td>
<td class="form"> DateA</td>
</tr>
<tr>
<td class="form">Reviewer</td>
<td class="form">username</td>
</tr>
<tr>
<td class="form">Topic</td>
<td class="form">Topic A</td>
</tr>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
and I make a function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
to use it in
<button width="100%" onclick="ViewEva();">View Evaluation</button></td>
It doesnt work. Any help? Thanks b4
I created this as a codepen here:
http://codepen.io/anon/pen/pjZMrO
Using your function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?
EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.
<form action ="" method="post" onsubmit="">
I can think of two things.
You are not including your script
Your HTML is wrong and your browser goes bananas
Here you have a plunker working example
Note both the <script src='./script.js'></script> and the
<tr>
<td>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
</td>
</tr>
Your table cannot be direct child of the row, you have to put it in a column, and close the inner table

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>

Categories