jQuery is hiding the wrong table - javascript

I am using some code to hide/reveal tables. All is well except I cannot find how to stop all tables being effected by this code. I have table 1, table 2 and table X, I want table X to be present at all times, however I cannot figure how to do this.
<!DOCTYPE HTML">
<html>
<head>
<link rel="stylesheet" type="text/css"/>
<title>Add device</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
\$(document).ready(function(){
\$("#myDropdown").change(function(){
target = \$\(this\).val();
\$(".tables").hide();
if(target != 'none'){
\$("#" + target).show();
}
return false;
});
});
</script>
<style type="text/css">
table{
width:100%;
display:none;
}
#content{
width:100%;
}
</style>
</head>
<table id='none' class='tables' width='100%'>
<tr>
<td>**********TABLE X***********</td>
</tr>
</table>
<body>
<div id="content">
<p align = 'center'>
Are you adding a chassis or a module?</br>
<select id="myDropdown">
<option selected value="t3">Please Select</option>
<option value="t1">Chassis</option>
<option value="t2">Module</option>
</select>
</p>
<table id='t1' align='center' class='tables'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables'>
*********TABLE 2***************
</table>
</form>
</body>
</html>
I've tried playing around with classes and id's to no avail.

Add class to table you don't want to hide and use css .not selector.
Link to fiddle
Code:
HTML:
<table id='none' class='tables no-hide-please' width='100%'>
<tr>
<td>**********TABLE X***********</td>
</tr>
</table>
<div id="content">
<p align = 'center'>
Are you adding a chassis or a module?</br>
<select id="myDropdown">
<option selected value="t3">Please Select</option>
<option value="t1">Chassis</option>
<option value="t2">Module</option>
</select>
</p>
<table id='t1' align='center' class='tables'>
<tr>
<td>*********TABLE 1***************</td>
</tr>
</table>
<table id='t2' align='center' class='tables'>
<tr>
<td>*********TABLE 2***************</td>
</tr>
</table>
JS:
$(document).ready(function(){
$("#myDropdown").change(function(){
target = $(this).val();
$(".tables:not(.no-hide-please)").hide();
if(target != 'none'){
$("#" + target).show();
}
});
});
CSS:
table{
width:100%;
//display:none;
}
#content{
width:100%;
}

You're hiding based on the class, not the ID. The class is used on each table, which is why all your tables are being hidden.
Change the jQuery selector to bind to the id of the table you want to hide, and only that one will be hidden.
To hide the first and second table, you can select both.
$("#t1, #t2").hide();
Or create a class you can reuse called "hidable" and show/hide that. You can then apply that class to tables you want that behaviour to apply to.
$(".hideable").hide();
<table id='t1' align='center' class='tables hideable'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables hideable'>
*********TABLE 2***************
</table>

Add a class to the tables that you wish to be visible permanently:
<table id='none' class='tables no_hide' width='100%'>
Change you JQuery selector to this:
$(".tables:not(.no_hide)").hide();

$('.tables:not(#none)').hide();

Related

Returning number from javascript and inserting it to a html table

I am very new to web development and just learning. I have created a websocket server and now I am working on the actual GUI. The webserver must display a table of data that will dynamically change based on the user input.
What I am struggling with right now is how can I call the javascript function inside a html table?
In the final web, the javascript function will perform HTML request and return a number. This number must be then update a certain row and column in the table.
I have made a simplified example using JSFIddle:
https://jsfiddle.net/a42q1zt0/1/
HTML
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>
<div>
<input type="button" onClick="insertData()" value="Add">
</div>
<div class="custom-select" style="width:200px;">
<select>
<option value="0">Select operation:</option>
<option value="1">operation1</option>
<option value="2">operation2</option>
</select>
</div>
<br>
<table id="t1">
<caption>Operation table</caption>
<thead>
<tr>
<th>Operation code</th>
<th>To Do</th>
<th>Done</th>
<th>Left</th>
</tr>
</thead>
<tbody>
<tr>
<td>operation1</td>
<td>1000</td>
<td>
<script>
get_number_to_pick();
</script>
</td>
<td>13</td>
</tr>
<tr>
<td>operation2</td>
<td>555</td>
<td>
<script>
get_number_to_pick();
</script>
</td>
<td>15</td>
</tr>
</tbody>
</table>
</html>
Javascript:
function get_number_to_pick() {
var number_to_pick = 50;
return number_to_pick;
}
This seems like a simple task but I have not managed to find a working example of something simmilar on the internet. I hope to get some clarification here. Thanks in advance.

How to change TextArea validation based on dropdown

I need to perform validation on TextArea based on below scenario:
If Mobile is selected in the dropdown, only number should allow to enter in the TextArea.
If Email is selected in the dropdown, we can enter any character in the TextArea.
image snippet here
Below is my code to achieve above scenario. I have performed validation based on class name of Text Area. When I change dropdown value, I am changing the class name of Text Area.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function changeNotifyTypeValue(textboxControl)
{
textboxControl.value="";
if (textboxControl.className=="mobileValidation")
textboxControl.className="emailValidation";
else
textboxControl.className="mobileValidation";
}
$(function() {
$('.numberValidation').keyup(function() {
this.value = this.value.replace(/[^0-9,][.]?/g, '');
});
$('.emailValidation').keyup(function() {
//email validation
});
});
</script>
</head>
<body>
<table border="1" class="display"
id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select
id="notifyTypeID0"
class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)" >
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0"
class="emailValidation">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id="notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)" >
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="numberValidation">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>
Here is my doubt
I can see through inspect element, when I change dropdown value, the class name of text Area is being changed on run time. But, still validation is being perform based on old class name of text Area.
There are some issue with your <script>, you are trying to use pure javascript in jquery.
Once try this script and check
$(document).ready(function(){
$('textarea').keyup(function(){
if($(this).hasClass("mobileValidation")){
var cv = $(this).val();
$(this).val(cv.replace(/[^0-9,][.]?/g, ''));
} else if($(this).hasClass("emailValidation")){
//your email validation code;
}
});
});
The code is messed up with both javascript and jQuery. I'm providing javascript only solution. And classes are also mismatching (mobileValidation and numberValidation).
Here is the running code. You can run code snippet and check.
<html>
<head>
<script>
function changeNotifyTypeValue(textboxControl) {
textboxControl.value = '';
if (textboxControl.className == "mobileValidation")
textboxControl.className = "emailValidation";
else
textboxControl.className = "mobileValidation";
}
function validate(textboxControl) {
console.log(textboxControl.className);
if (textboxControl.className == "emailValidation") {
console.log('email');
} else {
console.log('number');
textboxControl.value = textboxControl.value.replace(/[^0-9,][.]?/g, '');
}
}
</script>
</head>
<body>
<table border="1" class="display" id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="notifyTypeID0" class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)">
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0" class="emailValidation" onkeyup="validate(updateAddress0)">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id=" notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)">
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="mobileValidation" onkeyup="validate(updateAddress1)">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>

How to enable anchor tag on a table row?

<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
<th>head7</th>
</tr>
<a href="#">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
<td>col7</td>
</tr>
</a>
</tbody>
</table>
</div>
I have got this html page and i need to make the entire row as an anchor tag so when i hover over the row and click it I can goto another page. But When i try to execute it, the DOM throws the anchor tag outside table tags and it does not work. How can i implement this ?
You can't add <a> tag in a <table>.
You can only add content in <td> tag.
Try to add a onclick attribute with document.location.href+='#anchor'; return false;
Example
table {
height:200px;
}
#test{
height:400px;
background-color:grey;
}
<table>
<tr onclick="document.location+='#test';return false;">
<td>
click
</td>
<td>
click
</td>
</tr>
</table>
<div class="test" id="test"></div>
Update
For go to another page use
window.location.href="url";
instead of
document.location
You can't.
A link can exist inside a table cell or completely contain a table. There are no options in between.
You could put a link in the first cell and then apply some JavaScript:
jQuery("tr").on("click", function (e) {
location = jQuery(this).find("a").attr("href");
});
It is not a valid standard. You can use JS for acnchor. For example:
$('.table-bordered tr td').on("click", function(){
window.location.href= $(this).parent().attr('href');
});
TR defination can be:
<tr href="http:/www.yahoo.com">.....</tr>

Want to move an added element to a different part of the DOM

I'll try and state what im trying to do and hope it makes sense (i only learned this last week!). When clicking the delete button that i create, i would like the content associated along with it to go down into a panel body i created in my HTML page with a class name of 'panelAdd'. Any help is much appreciated as i am quite new. Thanks for reading. Ill put the HTML first
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>To Do List</title>
</head>
<body>
<h3 class="header">
<strong>To Do List</strong>
</h3>
<table class="table table-responsive myTable col-xs-offset2" id="myTable">
<thead>
<th>Complete?</th>
<th>Task to Complete</th>
<th>Time to Complete?</th>
<th>Remove?</th>
</thead>
<tbody>
<tr>
</tr>
<tr>
<td><input type="checkbox" class="newCheck col-xs-offset-2" value=""></td>
<td><input type="text" class="newWord" placeholder="New task"></td>
<td><input type="text" class="newTime" placeholder="How long do you have?"></td>
<td><button class="btn btn-primary buttonAdd">Add Task</button></td>
</tr>
</tbody>
</table>
<footer>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Completed!</h3>
</div>
<div class="panel-body"></div>
</div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/add.js"></script>
<script type="text/javascript" src="js/remover.js"></script>
</body>
</html>
Add button
$(document).ready(function (){
$(".btn-primary").on("click", function(e) {
e.preventDefault();
var newWord, newRow, wordTd, newCheck, deleteButton, deleteTd;
var isDuplicate;
newWord = $(".newWord").val();
newTime = $(".newTime").val();
newCheck = $(".newCheck").val();
var newRow = $("<tr>");
var newCheck = $("<input>").attr("type", "checkbox").attr("class", "newCheck").attr("data-state", "not-checked");
var wordTd = $("<td>").append(newWord).before();
var timeTd = $("<td>").append(newTime).before();
var deleteButton = $("<button>").addClass("btn btn-danger buttonRemove").append("Remove");
var deleteTd = $("<td>").append(deleteButton);
newRow.append(newCheck).append(wordTd).append(timeTd).append(deleteTd).before();
$("tbody").append(newRow);
$("#newWord").val("")
});
});
$(document).on("click", ".newCheck", function(){
if($(this).prop("checked") === true){
$(this).parent().attr("class", "done");
}
else{
$(this).parent().removeClass();
}
});
Remove Button
$(document).ready(function (){
$(document).on("click",".btn-danger", function(){
$(this).parents("tr").remove();
});
});
FIDDLE
Remove Button
$(document).on("click",".btn-danger", function(){
$t = $(this).closest('tr').find('td')[0];
$(this).parents("tr").remove();
$('.panel-body').append($t);
});
});
What you can do is grab the content you want to insert and append it in the target panel in this case .panel-body. See the fiddle above which adds the task name to the Completed list.
Do you expect like this.
Fiddle Sample
Code snippets:
$(document).on("click",".btn-danger", function(){
var removed = $(this).parents("tr").remove();
$(".panel-body").append('<div class="panelAdd"></div>').append(removed);
});
Let me know if this helps!
DEMO
You can just use .detach and .appendTo on click event of your remove button as below:
$(document).on("click",".btn-danger", function(){
var detachedRow=$(this).parents("tr").detach(); //detach and store it as reference
detachedRow.find('input[type="checkbox"]').remove();
//I hope you don't need checkbox when task is complete so removing it from that row
detachedRow.appendTo($('.panel .panel-body #myTableCompleted tbody'));
append it to your completed panel
});
Note : The .detach() method is the same as .remove(), except that
.detach() keeps all jQuery data associated with the removed elements.
This method is useful when removed elements are to be reinserted into
the DOM at a later time.
I have also added the table structure in your .panel-body to get the same UI look and have removed column for checkbox from the same and it is as below:
<div class="panel-body">
<table class="table table-responsive myTable col-xs-offset2" id="myTableCompleted">
<thead>
<th>Task to Complete</th>
<th>Time to Complete?</th>
<th>Remove?</th>
</thead>
<tbody>
</tbody>
</table>
</div>
Note - I think there might be other requirements too like only checked
checkbox to be added to that completed panel-body etc., and if yes
there will be a minor change in the delete code

jQuery: Offset and position return same value

I tried to detect an element inside a table. However, jquery return the same value for both offset and position. What I want is the position of the element relative to the table column.
Why is my jQuery offset and position both return the same value? The value that is returned is actually the offset value. How can I get the position value?
Thanks.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test offset & position</title>
</head>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<style type="text/css">
table.table tbody tr td{
vertical-align:middle;
}
</style>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
</tr>
</thead>
<tbody>
<tr>
<td><select name="select" class="detect">
<option>100</option>
<option>20</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="cover"></div></td>
<td><p>Internet
Explorer 4.0</p>
<p>dsfds</p>
<p>df</p></td>
<td><textarea class="detect">4444 444
dsfdsfdsf ds fds f
dsf
ds
fsd
fs</textarea></td>
<td><div><textarea class="detect">4</textarea></div></td>
</tr>
</tbody>
</table>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
$(".detect").focus(function(e) {
console.log("height:"+$(this).height()+" width:"+$(this).width()+" position top:"+$(this).position().top+" position left:"+$(this).position().left +" offset top:"+$(this).offset().top+" offset left:"+$(this).offset().left);
});
});
</script>
</body>
</html>
Try to add position:relative; to parent element
position returns the position relative to the offset parent, and offset does the same relative to the document. Obviously, if the document is the offset parent, which is often the case, these will be identical.

Categories