We Keep Coding

How to delay the search in list.js?

I'm using list.js for filtering and searching, my list is very large and I need to delay the search for it, but the documentation doesn't show any examples of how to do so, all it says is this: https://listjs.com/api/#searchDelay
One example of how to do so would be very helpful

Below is the table example from List.js which I have used in this snippet to demonstrate the usage of searchDelay. Below snippet code sets a delay of 1 second before starting a search on the list. As per the changelog, this feature has been included with version 2.3.0
var options = {
valueNames: [ 'name', 'born' ],
searchDelay: 1000 // 1 second
};
var userList = new List('users', options);
.list {
font-family:sans-serif;
}
td {
padding:10px;
border:solid 1px #eee;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td class="name">Jonny Stromberg</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

Select more than one option, and receive them in another php

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>

Need Help Transferring Data Between HTML Tables [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have two tables, one with a list of players for you to choose with a checkbox and another where the players are supposed to appear after clicking the checkbox. There is also a div in table2 that subtracts the player's value from the set $35000 value.
When I click the checkbox, the player goes to table2 and the salary subtracts, like expected, but when I uncheck the checkbox, the player returns to table1 and the salary doesn't return back to $35000. Also it will not let click that same player again, so I was wondering what the problem may be.
Here's the Code Below:
$(document).ready(function() {
$('#table1 tbody tr td input.checkmark').on('click', function() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
});
$('body').on('click', '#table2 tbody tr td input.checkmark', function() {
if (!$(this).prop('checked')) {
var row = $(this).closest('tr').clone();
$('#tbody1').prepend(row);
$(this).closest('tr').remove();
}
});
})
//FUNCTION FOR TOTALING SALARY
function calc() {
var salary = $('[name="salary"]');
var sum = 35000;
$('[name="salary"]').each(function() {
if (this.checked) {
sum -= parseInt($(this).val());
}
$("#salary_total").val(sum);
});
};
//CLICK EVENT HANDLER
$(document).ready(function() {
$('[name="salary"]').on('click', calc);
});
<div class="table_container">
<table class="mytable" id="table1">
<caption><figure class="table_head">Players</figure></caption>
<thead><tr class="table1">
<th>Position</th>
<th> Name</th>
<th>FPPG</th>
<th>Salary</th>
<th>Game</th>
<th></th>
</tr></thead>
<tbody id="tbody1">
<tr class="table1">
<td>P</td>
<td>Stephen Strasburg</td>
<td>39.56</td>
<td>10,800</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10800"></td>
</tr>
<tr class="table1">
<td>P</td>
<td>Patrick Corbin</td>
<td>38.82</td>
<td>10,500</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10500"></td>
</tr>
<form id="playerForm">
<table class="mytable" id="table2">
<caption align="bottom">
<figure id="max">Max Salary: $35,000</figure>
<figcaption>
<button class="optimize_btn" id="optimizeButton">Optimize</button>
<button class="optimize_btn" id="reset">Clear</button>
</figcaption>
</caption>
<caption>
<figure class="table_head">My Team</figure>
<figcaption><div class="dollar">
<input name="calc" disabled="" class="salary_count good" id="salary_total" type="number" max="35000" value="35000"></div>
</figcaption>
</caption>
<thead><tr class="table2"></tr></thead>
<tbody id="tbody2">
</tbody>
</table></form>
.mytable{
background-color: blanchedalmond;
font-size: 20px;
overflow: scroll;
}
.table_head{
width:300px;
font-size: 2rem;
font-weight: bolder;
}
.mytable th:first-child {
padding-left: 10px;
}
.mytable tr {
padding-left: 10px;
}
.mytable tr td:first-child {
padding-left: 10px;
border-left: 0;
}
.mytable tr td {
padding: 8px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
border-bottom: 0;
}
.mytable tr:last-child td:first-child {
-moz-border-radius-bottom-left: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mytable tr:last-child td:last-child {
-moz-border-radius-bottom-right: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mytable tr:hover td {
background: #f2f2f2;
transform: scale(1.01);
padding-left: 10px;
outline: 1px solid #191970;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
#footer{
background-color: hsl(291,5%,29%);
color: ivory;
text-align: center;
font-size: 0.8em;
font-variant:small-caps;
padding-top: 5px;
padding-bottom: 5px;
bottom:0;
width:100%;
clear: both;
margin: 0 auto;
}
#wrapper_lineup{
margin: 0 auto;
position: relative;
max-width: 1284px;
background-color: #fff;
}
.header{
text-align: center;
padding-bottom: 15px;
}
.table_container{width:1200px;margin:0 auto;}
table{
float: left;
}
.salary_count {
width: 120px !important;
padding: 7px;
display: inline-block;
border: 1px hidden;
border-radius: 4px;
font-family: brush-script-std;
font-weight: bold;
background-color: white;
font-size: 2.8rem;
}
.dollar{
display:inline-block;
position: relative;
font-size: 2.8rem;
font-family: brush-script-std;
color: black;
font-weight: bold;
}
.dollar input{
padding-left:15px;
}
.dollar:before {
position: absolute;
content:"$";
left:-10px;
top:8px;
}
#table1{
margin-right: 10px;
overflow: auto;
cursor: pointer;
}
#table2{
margin-left: 40px;
cursor: pointer;
}
.checkmark {
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
height: 25px;
width: 25px;
background-color: skyblue;
}
.over{
background-color: white;
color:red;
font-weight: bold;
}
div[comma-value]{
position:relative;
}
div[comma-value]:before{
content: attr(comma-value);
position:absolute;
left:0;
}
div[comma-value] input{
color:#fff;
}
.optimize_btn {
background: none;
border: 1px solid #dbdbdb;
cursor: pointer;
background-color: #11AAFF;
color: white;
font-family: 'Aaux-Next-Regular';
font-size: 20px;
width: 120px;
height: 50px
}
.optimize_btn:hover{
background-color: white;
color: black;
}
.choose{
color: black;
font-weight:lighter;
font-size: 2rem;
}
.select_pos{
color: deepskyblue;
font-weight:bolder;
font-size: 2rem;
}
#max{
color: black;
width:200px;
}

This is your offending line:
$('#table1 tbody tr td input.checkmark').on('click', ...)
^^ This is a statically run query select by jquery, meaning when you clone the rows back to your original table they are not the original dom elements so they no longer have this event handler.
What you'll want to do is write an addListener function that will take the table row and attach the appropriate event handlers to it. In this case:
$('#table1 tbody tr td input.checkmark').on('click', move_to_table2);
function move_to_table2() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
}
...
(inside table2's event handler)
var row = $(this).closest('tr').clone();
$(row).on('click', move_to_table2)
...
My example borks up the salary calculation but I think you can handle that!

How can I add a button that adds the answer to the inputs, next to the button?

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>

Why does my jQuery slidedown not work in my table?

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>