I have a list of users, and here it's possible to select (Standart/Admin). But when I save my POST, sends all selected options, but I only want to send the changed ones, because I doesn't make sense to send them all. And when I send this, I need to have the ID attached to it, any suggestions on how to do this? the PrintAll(), is just something I was trying to do, but can't make it work..
function printAll() {
var str = "",
i;
for (i = 0; i < myForm.UpdateUsers.options.length; i++) {
if (myForm.UpdateUsers.options[i].selected) {
str = str + i + " ";
}
}
alert("Options selected are " + str);
}
.ChangeEngine
{
font-size: 10px;
text-decoration: none;
}
.content2 {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.content2 h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content2 > p, .content2 > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content2 > p table td, .content2 > div table td {
padding: 30px;
}
.content2 > p table td, .content2 > div table td {
font-weight: bold;
color: #4a536e;
padding-left: 165px;
}
.content2 > div p {
padding: 5px;
margin: 0 0 10px 0;
}
.content2 table {
border-collapse: collapse;
}
.content2 td {
border: 1px solid #ccc;
}
.content2 tr {
border: none;
border: 1px solid #ccc;
}
.content2 th {
border: 1px solid #ccc;
}
.content2 tr:nth-child(even) {background-color: #f2f2f2;}
<div id="EditUsers" class="content2">
<div>
<table>
<form name="myForm" action="UpdateUsers.php" method="post">
<tr>
<th>Username</th>
<th>Engine</th>
<th>Access</th>
<th>ID</th>
</tr>
<tr>
<td>
username
</td>
<td>
Engine
</td>
<td><select class="data" name="UpdateUsers" placeholder="UpdateUsers" id="UpdateUsers">
<option>Admin</option>
<option>Standart</option>
</select></td>
<td>
id
</td>
</tr>
<br>
<tr>
<td>
username
</td>
<td>
Engine
</td>
<td><select class="data" name="UpdateUsers" placeholder="UpdateUsers" id="UpdateUsers">
<option>Admin</option>
<option>Standart</option>
</select></td>
<td>
id
</td>
</tr>
</table>
<input type="submit" id="ChangeUsers" value="Save" class="btn btn-info ChangeEngine" />
<input type=submit value="Print All" class="btn btn-info ChangeEngine" onClick="printAll()">
<br><br>
</form>
</div>
</div>
Related
I have made a filter table using html css and java but not able to add animation to it. I want that on entering the search element the results should be shown after hitting enter and it should be animated... in my condition the search result are shown directly....
here is my code
CSS code
* {
box-sizing: border-box;
}
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 5px solid #ddd;
margin-bottom: 12px;
border-radius:20px;
}
#myTable {
border-collapse: collapse;
table-align: center;
width: 80%;
border: 5px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
Java script code
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
filter = filter.replace(/\s/g,'')
txtValue = txtValue.replace(/\s/g, '')
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
} }
}
}
html code
<html>
<head>
<link href="css/filter-table.css" rel="stylesheet">
<link href="css/hdr-ftr.css" rel="stylesheet">
</head>
<body class="body-wrapper">
<center>
<center><font size="200"><b>Filter table</b></font> <br><br> <br>
<i class="fa fa-search searchIcon"></i>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Search your product here">
</center>
<table id="myTable" align="center" border="5" width>
<tr class="header">
<th style="width:40%;">Column 1</th>
<th style="width:60%;">Column 2</th>
</tr>
<tr>
<td><center>
<br><b>India</b></a></center></td>
<td><br>
<dl>
<li>Search 1</li>
</dl> <br>
</td>
</tr>
<tr>
<td><center>
<br><b>America</b></a></center></td>
<td><br>
<dl>
<li>Search 2</li>
</dl> <br><br><br>
</td>
</tr>
<tr>
<td><center>
<br><b>Iran</b></a></center></td>
<td><br>
<dl>
<li>Search 3</li>
</dl> <br><br><br>
</td>
</tr>
</table>
<!--filter-table.js-->
<script src="js/filter-table.js"></script>
</body>
</html>
pls someone help me...
thanks in advance
Sorry for rewriting from scratch, feel free to ask any questions
const input = document.querySelector(`input[name="search"]`);
input.onkeyup = () => {
const search = input.value.toLowerCase();
const list = document.querySelectorAll(`section > article`);
list.forEach((article) => {
const title = article.querySelector(`div:first-child`).innerText.toLowerCase();
if (title.includes(search)) {
article.classList.remove(`hide`);
} else {
article.classList.add(`hide`);
}
});
};
main {
display: flex;
flex-direction: column;
align-items: center;
}
main>input {
width: 90%;
padding: 1vh;
margin-bottom: 2vh;
font-size: 3vh;
}
main>div {
display: grid;
place-items: center;
width: 100%;
height: 90%;
}
section {
border: 1px solid #000;
font-size: 2em;
width: 90%;
}
section>article {
display: flex;
border: 1px solid #000;
transition: all .2s;
height: 4vh;
font-size: 3vh;
}
section>article.hide {
height: 0;
border: none;
overflow: hidden;
}
section>article>div {
display: flex;
border: 1px solid #000;
width: 50%;
justify-content: space-evenly;
}
<body>
<main>
<input type="text" name="search" placeholder="Search.." />
<div>
<section>
<article>
<div>India</div>
<div>s1</div>
</article>
<article>
<div>America</div>
<div>s2</div>
</article>
<article>
<div>Iran</div>
<div>s3</div>
</article>
</section>
</div>
</main>
</body>
I have a list of buttons. When a user clicks on one it will add and show you a notification bubble. This calculates how many times a user clicked a button. This works fine for the table, as shown below.
However I have more buttons on a different part of a page that I also want to include in to the notification list. For example, if I have the button pants and O clicks on it, it must check the current notifications to see if any one of them is clicked and add to it, and vice versa.
How can I achieve this?
function countN(counter) {
if (counter > 0) {
$('.notify').addClass("notification");
$('.market-odds .btn').addClass("notification")
$('.market-odds .btn').html(counter);
$(".notify").html(counter);
}
}
$('body').on('click', '.marketoptionrow.OP a.button', function() {
var alreadyClicked = $(this).hasClass('clicked');
if (!alreadyClicked) {
$(this).addClass('clicked');
var counter = parseInt($(".notify").html()) || 0
counter++;
countN(counter);
}
});
.notification {
position: absolute;
display: block;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: -1px;
width: auto;
min-width: 8px;
/*height: 9px;*/
line-height: 5px;
padding: 5px;
border-radius: 50%;
color: #fff;
box-shadow: 1px 1px 5px #000;
border: 2px solid #fff;
background-color: #b60000;
}
.button {
display: block;
width: 56px;
height: 22px;
line-height: 22px;
background: url(images/odds_button.png) #f9b108 repeat-x;
color: #005081;
border-radius: 9px;
text-decoration: none;
margin: 0 auto;
cursor: pointer;
border-left: 1px #f9b108 solid;
border-top: 1px #f9b108 solid;
border-bottom: 1px #f9b108 solid;
border-right: 1px #f9b108 solid;
box-shadow: 1px 1px 1px #005081;
text-transform: uppercase;
font-family: 'Roboto-Bold';
font-size: 14px;
font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="notify"> Notification</span>
<br/>
<table>
<thead>
<tr>
<th>Current</th>
</tr>
</thead>
<tbody>
<tr class="marketoptionrow OP" dataid="35917931">
<td><a class="button" bettype="W">Milk</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917934">
<td><a class="button" bettype="W">Salt</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917933">
<td><a class="button" bettype="W">EGGS</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917937">
<td><a class="button" bettype="W">flour</a></td>
</tr>
</tbody>
</table>
<br/>
How do i include this into the notifications. if this is clicked first before the table buttons then the table buttons must add to its list and vice versa
<div id="">
<div class="market">
<input type="button" id="1104263 " class="btn btn-betslip bg-blue" value="Pants">
</div><br/>
<div class="market">
<input type="button" id="1104264" class="btn btn-betslip bg-blue" value="Shirt">
</div><br/>
<div class="market">
<input type="button" id="1109306" class="btn btn-betslip bg-blue" value="Shoes">
</div>
</div>
I have this code written here but there is something I want to add to it that I would like help with, and not being a master coder I don't know what to do.
Here is my code so far
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
alert(ans);
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>
Currently I have it, so that when the user types in the information and clicks the "calculate" button, the answer pops up in like a small window. But I don't want that to happen. What I want to happen instead, is that, when you click the "calculate" button, the answer (a number) will appear right below, or next to the button instead of popping up on the screen. I would also like to refine the answer from being so specific, and only have it round the thousandth decimal.
As you tagged the question jQuery, I remade your example to utilise it. Also, there are a few suggested changes: field names/variable names would benefit from being clues to what they contain, and rather than hard-coding the event listeners, attach them programmatically. The comments in my code should show what's happening.
// Rather than an inline click event listener, as the OP has
// tagged the question jQuery, we can simply attach the event
// listener here.
$(".calc-btn").on("click", calculate);
/*****
* function to actually calculate the target value. This gathers
* all the given fields, performs the requisite math, and outputs
* a rounded value to the answer pane.
*****/
function calculate() {
// Note the meaningful names. While not a key part of your
// question, it will help down the line with debugging errors
// if your variables and fields have meaningful names.
var targetDamage = parseInt($("[name='target-damage']").val());
var targetBattles = parseInt($("[name='target-battles']").val());
var currentBattles = parseInt($("[name='current-battles']").val());
var currentDamage = parseInt($("[name='current-damage']").val());
// Given the above fields, we can see what we're actually doing
// rather than simply manipulating A, B, C and D.
var ans = ((targetDamage * targetBattles) - (currentBattles * currentDamage)) / (targetBattles - currentBattles);
var remainingBattles = targetBattles-currentBattles;
// Stick the answer in the answer pane!
$(".calculator-answer-pane").text("You need to average "+Math.round(ans)+" over the next "+remainingBattles+" battles to reach your target.");
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.main-container {
width: 1000px;
background-color: #FFF;
padding: 10px 20px;
text-align: center;
-moz-border-radius: 10px;
}
.calculator-container {
font-size: 30px;
font-weight: bold;
padding-bottom: 20px;
padding-top: 8px;
}
.calculator-main-pane {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<center>
<div class="calculator-container">Average Damage Calculator</div>
<div class="calculator-main-pane">
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td>
<input type='number' name='target-damage' />
</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td>
<input type='number' name='target-battles' />
</td>
</tr>
<tr>
<td>Type in your current number of battles</td>
<td>
<input type='number' name='current-battles' />
</td>
</tr>
<tr>
<td>Type in your current average damage</td>
<td>
<input type='number' name='current-damage' />
</td>
</tr>
<tr>
<td>
<button class="calc-btn">calculate</button>
</td>
<td class="calculator-answer-pane"></td>
</tr>
</table>
</div>
</center>
</div>
I've added a span next to the button. Instead of showing an alert after calculating a score, the answer is placed in the span.
function calculate(){
// The value property returns a string, use parseInt to convert it to an integer.
var targetAvgDamage = parseInt(document.getElementById("a").value, 10),
numberOfBattles = parseInt(document.getElementById("b").value, 10),
battlesFought = parseInt(document.getElementById("c").value, 10),
currentAvgDamage = parseInt(document.getElementById("d").value, 10);
var answer = ((targetAvgDamage * numberOfBattles) - (battlesFought * currentAvgDamage)) / (numberOfBattles - battlesFought);
// Get the element from the DOM to place the answer in.
var answerCell = document.getElementById('answer-cell');
// Set the text content of the element.
answerCell.textContent = 'The answer is: ' + Math.ceil(answer);
}
var
// Get the button element from the DOM.
calculateTrigger = document.getElementById('calculate-btn');
// Attach an event handler for the visitor clicks on the button.
calculateTrigger.addEventListener('click', calculate);
* { font-family:arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin:40px; background-color:#05537b; }
.thisTable td { line-height:36px; font-size:14px; }
.container { background-color:#EEE; padding:5px 15px 15px 15px; border:1px solid #CCC; margin-bottom:25px; width:100%; text-align:left }
.box { background-color:#FFF; border:1px solid #CCC; width:40px; margin:0px 4px; }
.button { margin-left:10px; background-color:#333; border:1px solid #CCC; width:25px; color:#FFF; font-weight:bold; }
.answer { padding-left:10px }
.answer b { text-decoration:underline }
.how { color:#555; margin-left:15px; font-size:13px; background-color:#FFF; padding:2px 4px }
.how b { color:#D00; font-weight:bold; text-decoration:none }
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<center>
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">
Average Damage Calculator
</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td><input type='number' id='a'/></td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td><input type='number' id='b'/></td>
<tr>
<td>Type in your current number of battles</td>
<td><input type='number' id='c'/></td>
<tr>
<td>Type in your current average damage</td>
<td><input type='number' id='d'/></td>
</tr>
<tr>
<td>
<button id="calculate-btn">calculate</button>
</td>
</tr>
<tr>
<td>
<span id="answer-cell"></span>
</td>
</tr>
</table>
</div>
</div>
To round the answer you can use a number of methods, see below for some examples.
var a = 24.5123678;
console.log(`Round up to nearest int: ${Math.ceil(a)}`);
console.log(`Round down to nearest int: ${Math.floor(a)}`);
console.log(`Round to the nearest int: ${Math.round(a)}`);
console.log(`Round up to a number of decimals: ${a.toFixed(4)}`);
You can add a new td to your table, and then use the innerHTML to add the result of your calculation to the new td (with id="result") .
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
//Here you assign your result to the new td
var Result = document.getElementById("result").innerHTML = "Result: " + ans;
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td> <td id="result">here</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>
I'm trying to get the slider to work but it simply won't. It works when I'm not using a table but for my website I need a table where I can display the members. What's wrong with my code? The information has to below the name, not next to it.
<!DOCTYPE html>
<html>
<head>
<title>Bestuur</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
</style>
</head>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td><div id="flip">Pieter Schreurs</td>
<td>
<label for="pieter">Secretaris</label>
</div></td>
<td><div id="panel">Hidden information</div></td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
</html>
I tidied up your markup - divs and tds closing incorrectly and moved the #panel. Is this what you're after?
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel,
#flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td width="200">
<div id="flip">Pieter Schreurs</div>
<div id="panel">Hidden information</div>
</td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
There are a few tags that you never close. Fix those, then either move your #flip inside a td or remove that div and set the parent tr to have that ID.
I changed implementation so that "Functie" doesn't move.
Demo
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
th, td {
width: 150px;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr id="flip">
<td>Pieter Schreurs<div id="panel">Hidden information</div></td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
i have a form having three fields old,new and confirm.i have designed a javascript to check if all the fields are entered or not but unfortunately this is not working as desired.please tell me where i have done mistake.i am new to javascript
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
dt, dd, ol, ul, li, table, tr, td, form, object, embed,
article, aside, command, details, fieldset,
figcaption, figure, footer, group, header, hgroup, legend{
margin: 0;
padding: 0;
border: 0;
}
html {
font: 82.5% verdana, helvetica, sans-serif;
background: #fff;
color: #333;
line-height: 1;
direction: ltr;
}
html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.button {
min-width: 46px;
text-align: center;
color: #444;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: 0 8px;
line-height: 27px;
border-radius: 2px;
transition: all 0.218s;
border: 1px solid #dcdcdc;
background-color: #f5f5f5;
cursor: default;
}
*+html .button {
min-width: 70px;
}
button.button,
input[type=submit].button {
height: f1f1f1px;
line-height: 29px;
vertical-align: bottom;
margin: 0;
}
.button:hover {
border: 1px solid #c6c6c6;
color: #333;
text-decoration: none;
transition: all 0.0s;
background-color: #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.button:active {
background-color: #f6f6f6;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.button:visited {
color: #666;
}
.button-submit {
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
}
.button-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
button-submit:active {
background-color: #357ae8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.footer-bar {
bottom: 0;
height: 35px;
width: 100%;
overflow: hidden;
}
.content {
padding: 0 44px;
}
.table{
padding: 0 55px
}
.header {
padding: 10px 20px 5px;
background:#00AAFF;
border: 1px solid #e5e5e5;
height:20px;
}
</style>
<script type="text/javascript">
function ccheck()
{
old=document.f1.old.value;
confirm=document.f1.confirm.value;
if(old=="" || old==null)
{
alert("Plz. Enter Your City");
document.f1.old.focus();
return false;
}
if(confirm=="" || confirm==null)
{
alert("Plz. Enter Your State");
document.f1.confirm.focus();
return false;
}
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="">
<form action="checkPassword.jsp" onSubmit="return ccheck()">
<div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="NewPsw"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
A jsfiddle for the same http://jsfiddle.net/YCWu4/
Try using this to get your elements
old = document.getElementById('old').value;
confirm = document.getElementById('confirm').value;
And give them ids to reference instead of names:
<input id="old" name="old">
and
<input id="confirm" name="confirm">
Working DEMO
You need to name your form if you want to reference it by name using document.f1
<form name="f1" id="f1" action="checkPassword.jsp" onsubmit="return ccheck()">
working fiddle
Some other pointers:
Your inputs are not well formed. <input/>
Do not pollute the global namespace add var to old and confirm
You miss name="f1" on your form tag.