how do I display my array "employee" to this table?
the idea is to display each name with on button on the side.
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<tr class="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-list" width="70%">{employees}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01"
data-clear-btn="false"
style="background: #006b54; color:white !important ;"
id="{id}-inspectSelected">
</button>
</td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closePopup()">Close</button>
</div>
</div>
js
var employees = ['usera', 'userb', 'userc'];
Check out these lessons by W3 Schools:
Creating elements: https://www.w3schools.com/jsref/met_document_createelement.asp
Changing Inner Html: https://www.w3schools.com/jsref/prop_html_innerhtml.asp
On a user profile page I have a table where the headings are not on the top but on the left side, and descriptions are on the right.
When user clicks 'edit profile' a modal opens up.
In the modal I want to hide table columns or I guess in this case rows by selecting the checkboxes and then hitting the 'save changes' button. When 'save changes' is clicked their choices should also be saved and updated on their profile.
I also want a few of the checkboxes to already be checked when they visit their profile page for the first time after registering. And then they should be able to change it there after.
My code is not working and I tried everything I could find on hiding columns... I have been looking for days. Any help is much appreciated!
TABLE
<div class="row">
<table class="table table-responsive-sm" id="profileTable" id="table-pagination" cellspacing="0" style="width:100%" >
<tbody>
<?php
$sql = "SELECT `dancing_since`, `dancer_dob`, `school`, `school_code`,`teacher_name`, `class_location`, `date_enrolled`, `date_firstdance`, `first_dance_name`, `current_lvl` FROM `dancers` WHERE name = '$name' AND dancer_name = '$dancerName'";
$res = mysqli_query($con,$sql);
//if($res==FALSE){
//die('there was an error running query [' . $con->error . ']');
// }
while($row=mysqli_fetch_array($res)){
echo '
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
';
}
?>
</tbody>
MODAL
<!--POPUP MODAL FORM-->
<div class="formModal">
<div class="formModal text-right">
<button type="button" class="btn btn-outline-primary editprofile-btn" data-toggle="modal" data-target=".bd-editprofile-modal-lg">Edit Profile</button>
</div>
<!-- Modal -->
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<div class="controls">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab">Edit Profile Information</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel8" role="tab">Change visiblity</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
//some code for edit profile form
<!-- PANEL 8 -->
<div class="tab-pane fade" id="panel8" role="tabpanel">
<div class="modal-body">
<div class="container-fluid">
<div class="panel-8-heading text-center">
<b>Select up to 10 abilities you would like to appear on your profile.</b>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col1" class="hidecol" id="col_1" data-column="0"/> Dancing Since
</div>
<div class="col-sm-4">
<input type="checkbox" name="col2" class="hidecol" id="col_2" checked="checked" data-column="1" /> D.O.B
</div>
<div class="col-sm-4">
<input type="checkbox" name="col3" class="hidecol" id="col_3" data-column="2"/> School
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col4" class="hidecol" id="col_4" checked="checked" data-column="3"/> School Code
</div>
<div class="col-sm-4">
<input type="checkbox" name="col5" class="hidecol" id="col_5" checked="checked" data-column="4"/> Teacher's Name
</div>
<div class="col-sm-4">
<input type="checkbox" name="col6" class="hidecol" id="col_6" checked="checked" data-column="5"/> Class Location
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col7" id="col_7" checked="checked" data-column="6"/> Date Enrolled
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col8" id="col_8" data-column="7" /> First competition
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col9" id="col_9" checked="checked" data-column="8"/> Date of First dance
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col10" id="col_10" data-column="9" /> Current Level
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 8 END -->
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
JQUERY
$(document).ready(function() {
//modal checkbox
$('#profileTable tr td:nth-child(3)').hide();
});
EDIT
Below are images of the user table and the modal with checkboxes. I want to be able to hide the entire row. so if user deselect location then on their profile they would no longer see "location: NJ"
PROFILE TABLE
MODAL
I would suggest a slightly different approach:
you write a modal form where user selects the content he or she wants to be visible in the profile page.
submit that data to the server.
reload the page
when creating a new page, return only the data that the user has selected in the form (from settings), use filter (or a set of if conditions as this seems to be homework) to select the data your user wants to see.
return only the necessary data
render it. (You will not need to hide the data)
This approach has several benefits:
you avoid the complexity of hiding / showing data
you avoid displaying data that should not be displayed: user can still view hidden columns if they edit html, and that is a huge no-no in web development.
it is easier to add new data to the profile
you can easily save the user preferences as per your requirement
If you want to go a step further, you can try improving the above by writing ajax code to update the rows dynamically, without reloading the entire page.
Will not be giving any specific code examples as its a lengthy task, and also it looks like a class or homework task. Good luck!
HTML
<table border="1" id="myTable">
<tbody>
<tr id='trow1'>
<th>Dancing Since:</th>
<td>2012</td>
</tr>
<tr id='trow2'>
<th>D.O.B:</th>
<td>1994</td>
</tr>
<tr id='trow3'>
<th>School:</th>
<td>ABC</td>
</tr>
<tr id='trow4'>
<th>School Code:</th>
<td>1001</td>
</tr>
<tr id='trow5'>
<th>Teachers Name:</th>
<td>Badai</td>
</tr>
</tbody>
</table>
<button id="myBtn_colSwitch" style="margin-left: 2%;" onClick="columnSwitchMODAL()">Row Filter</button> <!-- onclick opens MODAL -->
<!-- The Modal Column Switch -->
<div id="myModal_colSwitch" class="modal_colSwitch">
<div class="modal-content_colSwitch">
<span class="close_colSwitch">×</span>
<input id='1' type='checkbox' onClick='javascript:displayROW(1);' checked>Dancing Since<br>
<input id='2' type='checkbox' onClick='javascript:displayROW(2);' checked>D.O.B<br>
<input id='3' type='checkbox' onClick='javascript:displayROW(3);' checked>School<br>
<input id='4' type='checkbox' onClick='javascript:displayROW(4);' checked>School Code<br>
<input id='5' type='checkbox' onClick='javascript:displayROW(5);' checked>Teachers Name<br>
</div>
</div>
<!-- Column Switching ENDS -->
CSS
/* Column Switch */
.modal_colSwitch
{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content_colSwitch
{
background-color: #fefefe;
margin: 100px auto;
padding: 60px;
border: 1px solid #888;
width: 25%;
height: 25%;
overflow-y: scroll;
box-shadow: 5px 10px 18px #888888;
}
#myBtn_colSwitch
{
background-color: #6599FF;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
/* The Close Button */
.close_colSwitch {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_colSwitch:hover,
.close_colSwitch:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Column Switch ENDS */
/* Table Style */
#myTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 30%;
margin: 0 auto;
}
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
}
#myTable tr:nth-child(even){background-color: #f2f2f2;}
#myTable tr:hover {background-color: #ddd;}
JAVASCRIPT
function columnSwitchMODAL()
{
var modal_colSwitch = document.getElementById('myModal_colSwitch');
var btn_colSwitch = document.getElementById("myBtn_colSwitch");
var span_colSwitch = document.getElementsByClassName("close_colSwitch")[0];
btn_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "block";
}
span_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "none";
}
window.onclick = function(event)
{
if (event.target == modal_colSwitch)
{
modal_colSwitch.style.display = "none";
}
}
}
function displayROW(row_no)
{
var hideDisplay = '';
if(document.getElementById(row_no).checked)
hideDisplay = 'table-row';
else
hideDisplay = 'none';
if(row_no == 1) document.getElementById('trow1').style.display = hideDisplay;
else if(row_no == 2) document.getElementById('trow2').style.display = hideDisplay;
else if(row_no == 3) document.getElementById('trow3').style.display = hideDisplay;
else if(row_no == 4) document.getElementById('trow4').style.display = hideDisplay;
else if(row_no == 5) document.getElementById('trow5').style.display = hideDisplay;
}
Hope this helps!
I don’t know if this is only an extract of the code or a mistake, because I can’t find any <table> defined in the modal. And from your jquery code you need an element with id profileTable.
I suggest you to state what have you tried and what is not working. Also you can divide the problem in a smaller scale and to identify the root cause. E.g. try the hide/show mechanism outside the modal, or break down the jquery code (if $('#profileTable tr td:nth-child(3)') return nothing then .hide() would take no effect)
Update 1
I think you are trying to hide the table column(the vertical one). First, the table has 2 ids, profileTable and table-pagination. Remove either one so the table has exactly one id. Since # is a id selector, multiple id may mess up the css. Second, let's put "modal" aside. Browser has no knowledge about modal, it just know there are bunch of nested html elements with different styling. With or without modal, javascript should work the same way. It helps you to break down your through model and find the root cause easier.
I made a demo base on the snippet you provided. Two buttons at the bottom shows how to hide and show column.
https://codepen.io/anon/pen/oMpRbq
Update 2
Understand the requirement and update the demo. Hide/show the row instead of column. The concept is almost the same, the different is to select tr instead of td. I only make 2 checkbox since they are all the same.
$('#filter-panel').on('change', 'input', function(e) {
var rowIndex = $(e.currentTarget).val();
$('#profileTable tr:nth-child(' + rowIndex + ')').toggle();
});
table {
border: 1px solid black;
border-collapse: collapse;
}
table td,
table th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<table class="table table-responsive-sm" id="profileTable" cellspacing="0" style="width:100%">
<tbody>
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
</tbody>
</table>
<br /><br />
<div id="filter-panel">
<input type="checkbox" name="vehicle" value="1" checked/> dancing since
<input type="checkbox" name="vehicle" value="2" checked/> d.o.b
</div>
I tried to use this issue as a guide, but I'm not sure what I'm doing wrong with my below code. I'd appreciate it if someone could help out.
A little background: I have limited ability to change the HTML as it's in Confluence using an add-on called Confiforms. I can hide/show fields using Confiforms, but I generally find that it takes a performance hit when I configure it that way.
HTML:
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"/>
</span>
</span>
</p>
</td>
</tr>
Relevant jQuery:
$('input[type="checkbox"]').change(() => {
if ($(this).is(':checked')) {
$(this).closest('tr').next('tr').show();
}
else {
$(this).closest('tr').next('tr').hide();
}
});
Thanks!
You should be very careful when using jquery with arrow functions:
$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
$(this).closest('tr').next('tr').show();
} else {
$(this).closest('tr').next('tr').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
</span>
</span>
</p>
</td>
</tr>
</table>
The arrow-function preserve the context of this, thus it's no longer the relevant element you attached the event to.
In case you do want to use arrow function, you can use the following:
$('input[type="checkbox"]').change((evt) => {
el = evt.currentTarget;
if ($(el).is(':checked')) {
$(el).closest('tr').next('tr').show();
} else {
$(el).closest('tr').next('tr').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
</span>
</span>
</p>
</td>
</tr>
</table>
I work with OpenEprp 7.0 and i want to refresh a particular div in a page that contains a dashboard. the code of the first part of the dashboard is the following:
<t t-if="number === 2">
<table style="margin-left:360px;margin-top:0px;margin-bottom:0px;">
<tr>
<td style="text-align:left;font-size:12px;"><b>Jusqu'au mois courant:</b></td>
<td>
<input type="radio" id="radio_budget_cumulee_jusque_mois_courant" value="courant" name="radio_budget_cumulee" />
</td>
</tr>
<tr>
<td style="text-align:left;font-size:12px;"><b>Jusqu'au fin d'année:</b></td>
<td>
<input type="radio" id="radio_budget_cumulee_jusque_fin_anneee" value="fin" name="radio_budget_cumulee"/>
</td>
</tr>
</table>
<div id="budg">
<div t-attf-id="#{view.element_id}_action_#{column_index}_#{action_index}" class="oe_content" t-att-style="action.attrs.fold ? 'display: none;' : 'height: 220px;overflow-x: hidden;overflow-y: auto;padding: 0 12px 1px;'"></div>
</div>
</t>
I want to refresh the div with the id budg in my js i write the following code:
$('#budg').load(document.URL + ' #budg');
the div is loaded but there is no content. Any help please
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
How can i use jQuery/Javacript to find link with "abc" inside #name div of #posts table.
and after locating it (the link with abc). jQuery will add html content to #post-content #load div of that table that has link with "abc" inside ,using the html(); function in jQuery.
that means after adding my code will look like this :
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
Some stuff is added here using html()
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
while the #name with no link with "abc" which is the link with "user2" will not be affected or modifeid.
How can i do this?
I hope you understand.
Assuming you fix the html and use classes:
$('.name a[href*="abc"]').closest('tr').find('.load').html('Some stuff is added here using html()');
Find a tag with href containing 'abc'
Get parent tr
Find #postcontent >#load within this element
var x = $('a[href*="abc"]');
var b = x.parents('tr');
var c = b.find('#post-content > #load');
alert(c.html());