Actually, I have created this table:
<table border='0' name="codes">
<tr>
<td><b> <?php echo xlt('Code'); ?> </b></td>
<td><b> <?php echo xlt('Description'); ?> </b> </td>
</tr>
<? php ...... ?>
</table>
Due to the fact that the size of the table is dynamic ,I have a counter ($counter) that counts the rows of the table including the first row that shows the columns of the table (Code Description).
I also have created a button "Erase" and when I press it I want it to delete the table.
Below there is the code of the button "Erase":
<input type='button' value='<? php echo xla('Erase'); ?>' onclick="selcode(**' <? php echo $counter; ?>'**)" />
The button "Erase" calls the function selcode and inside this function there will be the code that delete the table. The function selcode is written in Javascript.
<script language="JavaScript">
function selcode(counter) {. . . }
</script>
Can you help me please how can I delete the table? Also, the way I enter the php variable counter as function parameter is the right one?
Change the erase button to type="reset" this will wipe out your form and clean it.
<input type='reset' value='< ? php echo xla('Erase'); ?>'>
I think thats what you are wanting?
Something like:
function selcode() {
var el = document.getElementsByName("codes")[0];
el.parentNode.removeChild(el);
return false;
}
Related
I made a table and I have been using Datatable CDN to have some functions such as search and the ability to select table pages. After following the steps on DataTables my code load my table with the search bar and pages, however all the functions are not working. Can someone tell me where I did a mistake please:
Using static data makes the dataTable work as it is intended with the search option and pagination working and showing the results that are in the table. However when using dynamic data with MySQL database the search and pagination functions stops working. Below is my code with fetch the data from table employees from my DB:
<?php
global $db;
$sql = "SELECT id, name, role, competency FROM employees";
$result = mysqli_query($db, $sql);
?>
This query is found just before my table in my html code, all the data are displayed correctly and styling of dataTable are displayed also, however the functions for search and pagination are not working. The search returns No Match result however the record is present in the table. Can someone please tell me the error please.
<table id="Data_Table" width="100%">
<thead>
<tr>
<td>ID</td>
<td>Employee Name</td>
<td>Job Role</td>
<td>Competency Level</td>
<td>Action</td>
</tr>
</thead>
<?php
if (mysqli_num_rows($result) > 0) {
foreach($result as $row) {
?>
<tbody>
<tr>
<form method="post">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['role']; ?></td>
<td><?php echo $row['competency']; ?></td>
<td>
<button type="button" class="view_emp" title="View Record">
<span class="la la-eye"></span> View
</button>
<button type="button" class="edit_emp" title="Update Record">
<span class="la la-edit"></span>Update
</button>
<input type="checkbox" name="keyToDelete" value="<?php echo $row['id']; ?>" required>
<button type="submit" name="delete_employee" class="delete_employee" title="Delete Record"><span class="la la-trash"></span>Delete
</button>
</td>
</form>
</tr>
</tbody>
<?php
}
}
else {
echo "No Employee Record could be found";
}
$db-> close();
?>
</table>
In my code I have also included the script that would use DataTables as follows:
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
and the style link for the datatable
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
All the style are working as intended but the function such as search and pagination are not working can someone tell me what i made wrong here
I defined the DataTables in my script as follows:
<script>
$(document).ready(function(){
$('#Data_Table').DataTable();
});
</script>
There are no error in the console log of the browser the function search and pagination simply wont work, search option will search and return results as No match with records when there is a record and $results are the data fetched from my database employees eg: id: 1 ,name: Bob ,role: Web Designer ,Competency: Beginner.
In order to use DataTables, you need to inizialize one
$(document).ready( function () {
$('#Data_Table').DataTable();
});
This needs to be wrapped in a script tag
I don't see it anywhere in your code
Plus, you missed a td closing tag in Line 18
Here's a working example: jsfiddle.net
Source: datatables.net
I want to color the word "Pizza" in class "status", which is inside my HTML table, which gets data from a database with PHP.
<!-- populate table from mysql database -->
<?php
while($row=mysqli_fetch_array($records))
{
?>
<tr>
<td class="status"><?php echo $row['pojem'];?></font></td>
<td><font color="brown"><?php echo $row['kratica'];?></font></td>
<td><font color="brown"><?php echo $row['nem'];?></font></td>
</tr>
<?php
}
?>
I have tried the following but it doesn't work
<script>
$('.status:contains("Pizza")').css('color', 'red');
</script>
You may use the following jQuery code and set CSS class colord with the color or the style you want.
$(document).ready(function(){
$('td.status').each(function(){
text = $(this).html();
$(this).html(text.replace('Pizza','<span class="colord">Pizza</span>')); // html is used instead of text
});
})
Edit
The text method is replaced with html method to make void HTML escape in the string.
If i have understand correctly then this is good solution
<!-- populate table from mysql database -->
<?php while($row=mysqli_fetch_array($records)){ ?>
<tr>
<?php if((strpos($row['pojem']), 'Pizza') !== false) { ?>
<td><font color="red"><?= $row['pojem'] ?></font></td>
<?php }else{ ?>
<td><font color="brown"><?= $row['pojem'] ?></font></td>
<?php } ?>
<td><font color="brown"><?= $row['kratica'] ?></font></td>
<td><font color="brown"><?= $row['nem'] ?></font></td>
</tr>
<?php } ?>
I am having some trouble in using tablesorter jquery plugin.
The thing is that I have a view that when a submit button is clicked, depending on the search of the form, a table with information from the database is loaded. This table is only displayed when the Search button is clicked and not always display the same information. I have tried to use tablesorter jquery plugin but it doesn't seem to work. I am calling:
<script src="/js/jquery-1.12.1.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<head>
<script>
function sort_my_table(){
$('my_table').tablesorter();
}
</script>
</head>
and then the table below.
When I press this button the table shows up at the bottom of the page, the button is submitting a form where you enter the information that you want and then there is a search using this info and the table displays the result of the search:
<input type="submit" class="btn btn-primary" value="search" name="send">
My table looks like this:
<thead>
<tr>
<th style="text-align:center">Code</th>
<th style="text-align:center">Name</th>
<th style="text-align:center">Description</th>
</tr>
</thead>
<?php foreach ($elements as $element) { ?>
<tbody>
<tr>
<td><?php echo $element->fabr?></td>
<?php if (count($element->place) > 0) { ?>
<td>
<?php foreach ($element->place as $pl) { ?>
<?php echo $pl['name'] ?><br>
<?php } ?>
</td>
<td>
<?php foreach ($element->place as $pl) { ?>
<?php echo $pl['number'] ?><br>
<?php } ?>
</td>
<?php } else { ?>
<td></td>
<td></td>
<?php } ?>
</tr>
<?php } ?>
</tbody>
</table>
I really don't know how to use it or how to make it work.
Tell the tablesorter to sort your table when the document is loaded:
$(document).ready(function()
{
$('my_table').tablesorter();
}
);
Click on the headers and you'll see that your table is now sortable.
(This will only work if the table itself isn't manipulated or overwritten directly)
http://tablesorter.com/docs/#Demo
Sounds like you need to move the script that is fired on click.
If you want it to load before the click you can use this:
https://jsfiddle.net/MaXiNoM/4ggnL81h/
$(function(){
$("#myTable").tablesorter();
});
if you want the table to be blank then pass it null params, this will let you load a blank table. It sounds a call that is fired from an onclick, which is also when your table is rendered and populated. You could try taking the call directly from there and putting that into your onload.
I'm trying to update the two locked textboxes with information that I get from my database. I enter a phone number in the "Telefon" checkbox, and I want it to get the firstname and lasttname for that phone number. Which works by the way, but it's not the way I want it. I want the information to be automatically put into the textboxes without refreshing the page. and for some odd reason my code got split in two here. I've tried to look for a solution for hours. I'm very new to coding, and I would love some help!
<?php
SESSION_START();
$output = NULL;
if(isset($_POST['btn_checkTelefon'])) {
require 'connectdb.php';
$telefon_Search = $connect_DB->real_escape_string($_POST['telefon_Search']);
$sql = "SELECT * FROM elever WHERE Telefon = '$telefon_Search'";
$resultSet = $connect_DB->query($sql);
if($resultSet->num_rows > 0) {
while($rows = $resultSet->fetch_assoc()) {
$fornavnoutput_Database = $rows['Fornavn'];
$etternavnoutput_Database = $rows['Etternavn'];
}
echo '<script type = "text/javascript">';
echo 'function sayHi() {';
echo 'val1 = document.getElementById("telefon_Input").value;';
echo 'if(val1 == "") {';
echo ' alert("Vennligst skriv inn ditt telefon nummer!");';
echo '}';
echo 'if(val1 !== "") { ';
echo ' document.getElementById("check_Fornavn").value = "<?php echo $fornavnoutput_Database?>";';
echo ' document.getElementById("check_Etternavn").value = "<?php echo $etternavnoutput_Database?>";';
echo '}';
echo '}';
echo '</script>';
} else {
$output = "No results";
}
}
$fornavnoutput_Database2 = "Fornavn";
$etternavnoutput_Database2 = "Etternavn";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css?<?php echo time(); ?>" />
</script>
<script type = "text/javascript"></script>
<title></title>
</head>
<body>
<?php
include 'connectdb.php';
?>
<form name="form1" action="">
<table id="valgt_skap_tabell" class="bokssvartabell">
<tr>
<td>Valgt skap</td>
</tr>
<tr>
<td>
<input class="bokssvarskjema" type="text" name="Valgt skap" disabled value= <?php
if(isset($_POST["radios"])){
echo $_POST["radios"];
} else {
//header('location: index.php');
} ?>>
</td>
</tr>
</table>
<table id="telefon_tabell" class="bokssvar_tabell">
<tr>
<td>Telefon:</td>
</tr>
<tr>
<td><input type="text" name="telefon_Search" id="telefon_Input" maxlength=8"><br></td>
</tr>
<tr>
<td><button type="button" name ="btn_checkTelefon" id="sjekkTelefon" onclick = "sayHi()">Sjekk</button></td>
</tr>
<div id="d1"></div>
</table>
<table id="opplysninger_tabell" class="bokssvartabell">
<tr>
<td>Fornavn:</td>
<td>Etternavn:</td>
</tr>
<tr>
<td><input type="text" name="Fornavn" disabled id="check_Fornavn"></td>
<td><input type="text" name="Etternavn" disabled id="check_Etternavn"></td>
</tr>
</table>
</form>
<?php echo $output; ?>
</body>
You need to use AJAX for this. Example $.ajax() -> shortcuts $.post(), $("id").load("url"), ... Look it up a lot in depth explanation about these on stackoverflow.
Please never mix JavaScript with php.
Use it in separate file.
Edit: So have you fixed it yet?
The easier way to load paged dynamicaly is with load method + actions. $.post is used if you need to do something with returned data from php. I will give you example of load.
I will give a proper example how to code.
Universal function for a link that look at href value and load HTML parts (form in this case) from PHP dynamicaly to your page, you do need to implement actions or just call your ordinary page if you have only one default action there. I use jQuery library here. This script must be in separate file else it will work but you will get a sync warning in your console.
$(function() {
$('a').on("click", function(e) {
e.preventDefault();
e.stopPropagation();
var URL = $(this).attr('href');
$('body').load(URL, 'form');
})
})
php example
prefered showsomethingfunction in separate file like showfunctions.php
function myLinks() {
echo "<a href='index.php?action=showsomething'>showsomething</a>"
}
index.php + included showfunctions.php
<?php
myLinks();
if(isset($_GET["action"]){
// do your ordinary thing like open connection with database.
switch($_GET["action"]))
{
case "showsomething":
//show showsomething() function with html
break;
//further you can add more action instead of showsomething if you have several links
}
//close database.
}
?>
You need to separate your code else it will be a mess if it gets even more complicated. HTML code must be ONLY in showfunctions.php for example in function to call for actions.
Code is not tested but I think it will work. This code will also work without javascript but then it will just reload pages.
You have to use jQuery $.post() for that.
first You have to create php file which will process Your data.
For example lets create file query.php with the following content:
<?php
if(isset($_POST['telefon_Search'])) {
require 'connectdb.php';
$telefon_Search = $connect_DB->real_escape_string($_POST['telefon_Search']);
$sql = "SELECT * FROM elever WHERE Telefon = '$telefon_Search'";
$resultSet = $connect_DB->query($sql);
if($resultSet->num_rows > 0) {
$row = $resultSet->fetch_assoc();
echo json_encode($row);
}
}
next on Your page You have to create function which will send phone number to our query.php file and which will return Name and Surname if they exist.
$('#sjekkTelefon').click(function (){
$.post('query.php', { telefon_Search : $('#telefon_Input').val() }, function (data){
var user = $.parseJSON(data);
$('#check_Fornavn').val(user.Fornavn);
$('#check_Etternavn').val(user.Etternavn);
});
});
and complete html will looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css?<?php echo time(); ?>" />
<title></title>
</head>
<body>
<table id="telefon_tabell" class="bokssvar_tabell">
<tr>
<td>Telefon:</td>
</tr>
<tr>
<td><input type="text" name="telefon_Search" id="telefon_Input" maxlength=8"><br></td>
</tr>
<tr>
<td><button name ="btn_checkTelefon" id="sjekkTelefon">Sjekk</button></td>
</tr>
<div id="d1"></div>
</table>
<table id="opplysninger_tabell" class="bokssvartabell">
<tr>
<td>Fornavn:</td>
<td>Etternavn:</td>
</tr>
<tr>
<td><input type="text" name="Fornavn" disabled id="check_Fornavn"></td>
<td><input type="text" name="Etternavn" disabled id="check_Etternavn"></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('#sjekkTelefon').click(function (){
$.post('query.php', { telefon_Search : $('#telefon_Input').val() }, function (data){
$('#check_Fornavn').val(data.Fornavn);
$('#check_Etternavn').val(data.Etternavn);
});
});
</script>
</body>
</html>
I have this PHP in my application,
<table><tr>
<?php
if($music_interests !== FALSE)
{
$count = 0;
foreach($music_interests as $interest)
{
?>
<td>
<div class="interest inline">
<img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img"/>
<p><?php echo truncate($interest['name'], 25); ?></p>
<div class="interest_popup">
<img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img left"/>
<div class="right">
<strong><?php echo truncate($interest['name'], 25); ?></strong>
<p>Music<br><?php echo #$interest['num_users']; ?> users have this interest.</p>
<?php echo anchor('my_profile/remove_interest/'.$interest['id'], 'Remove interest', array('class' => 'button red upper rounded_5 small remove')); ?>
</div>
<div class="clear"></div>
</div><!--.interest_popup-->
</div>
</td>
<?php
$count = ($count + 1)%4;
if ($count == 0)
{
echo "</tr><tr>";
}
}
}
?>
As you can see the PHP creates a table and every 4th <td> creates a new row. I am now adding ajax functionality to my app, but I cannot work out how I would work out if I need to create a new row first before appending a <td> that my ajax request has created.
Currently I have this code that adds a td to my table,
var interest = "<td>" + msg.name + "</td>";
self.parent().children('table').append(interest);
You shouldn't append table cells directly into the table. Table cells goes into table rows.
Get the last row in the table, and check how many cells there are in it. If there are four cells already you need to create a new table row and append to the table, then add the cell to that row. Otherwise you can add the cell to the existing row.
Warnign! untested code! I would do something like this:
var interest = "<td>" + msg.name + "</td>";
var $lastTr = self.parent().children('table tr:last');
if ($lastTr.find("td").size() < 4) {
$lastTr.append(interest);
} else {
interest = "<tr>" + interest + "</tr>";
self.parent().children('table').append(interest);
}
Update: I modified the answer since now I have better understanding of the question.
Here's a sample that shows how you can dynamically create td and tr elements. Replace the constant content ("some value") with whatever you get using AJAX.
JSFiddle (jQuery 1.7.1 added): http://jsfiddle.net/BUR7p/3/
<html>
<head>
<script language="javascript" type="text/javascript">
//my previous understanding of the question
//function AddNewRow()
//{
// var row = $(document.createElement("tr"));
// row.append("<td>some value</td>");
// row.append("<td>another val</td>");
// $("#mytable").children().append(row);
//}
//my corrected understanding: you don't know how
//to decide how to create a new row to put in the
//table. note i added a table body explicitly, it
//is added by default automatically if you don't.
function AddNewData()
{
var row = $("#tablebody").children().last();
if(row.children().length >= 4)
{
console.log("creating a new row...");
//create a new row if we need one
row = $(document.createElement("tr"));
$("#tablebody").append(row);
}
else console.log("using existing row...");
//add new datum to row
row.append("<td>some value</td>");
}
</script>
</head>
<body>
<p>
<table id="mytable">
<tbody id="tablebody">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</tbody>
</table>
</p>
Add new row
</body>
</html>
As an alternative, you can modified the server side in a way that returns, in addition to the data, a flag whether the data should be created in a new row or not.
Please follow up and tell us if this helps or not.
answer found at this question:
// pass stuff to insert to .after() as an HTML string
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
documentation for :last psuedoselector and .after() function