I'm trying to strike through a tr when a checkbox is checked. I can do this if I know the id of a given row but my table is generated by a PHP foreach loop. The following codes works but all rows have a line through each td. I only want the row with the checkbox selected.
<script>
$('input.complete').on('click', function(e) {
if (this.checked) {
$("td").addClass('newclass');
} else {
$("td").removeClass('newclass');
}
});
</script>
The table is generated by the following PHP foreach loop:
<?php foreach ($tasks as $task):?>
<tr>
<td><?php echo $task->id;?></td>
<td rowid="<?php echo $task->id;?>"><?php echo $task->task_name;?></td>
<td><?php echo $task->task_desc;?></td>
<td><input class="complete" type="checkbox" name="complete" value="CheckBox"></td>
</tr>
<?php endforeach;?>
The css is simply:
.newclass {
text-decoration: line-through;
}
I have tried to isolate the rows using parent and child selectors but can't seem to solve it. How do I get just the checked row?
$(this).parent().siblings("td").addClass("newclass");
would be the way to specify only the <td>'s in the respective row.
You'll need to change the removeClass line as well.
Related
I want to do next. When I click on a table row in the first HTML page, I want to display additional data for that row on another HTML page. This is the way I displayed data from PostgreSQL DB:
<?php
while($row = pg_fetch_assoc($result)) {
?>
<tr class="click_table" data-href="bsdisplay.php" onclick="show();" style="cursor:pointer">
<td><input type="checkbox" style="width: 20px; background-color: black;"></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['type']; ?></td>
</tr>
<?php
}
?>
The function shown is represented below:
function show() {
$.ajax({
type: "GET",
url: "baseFunctions.php",
success : function() {
location.reload();
}
});
}
baseFunctions is another PHP page where I wrote functions to display data in bsdisplay.php. I am now trying to find a way, to remember the row that is clicked and send that information to baseFunctions page as a number. I am relatively new to all of this, so I may be complicating things more than they are. Can someone help with this way or suggest an easier way to do this?
I have usual sql scenario with php (mysqli_fetch_assoc) and create table. I want to hide rows randomly when i click on them. I may also need to delete them from the database at the same time, because this file is calling from another with ajax every 5 sec. and hiding is not enough because after calling the rows appear again.. :) I'm no sure that this is the best solution but I'm learning now.
I'm trying something like this it's working, but i can hide only last row. I want hide every row randomly :)
jQuery().ready(function(){
$( "#trow" ).click(function() {
$( "#trow" ).hide()
});
});
<?php while ($row = mysqli_fetch_assoc($result_down)):
$datetime = $row['datetime'];
$device = $row['host'];
$message = $row['msg'];
?>
<tbody>
<tr id="trow">
<td id="device"><?php echo $datetime;?></td>
<td id="datatime"><?php echo $device;?></td>
< td id="message"><?php echo $message;?></td>
</tr>
</tbody>
<?php endwhile;?>
Try to change the trow from an id to a class name
<tbody>
<tr class="trow">
<td id="device"><?php echo $datetime;?></td>
<td id="datatime"><?php echo $device;?></td>
<td id="message"><?php echo $message;?></td>
</tr>
And in the JQuery side, call the click event on the class and not the id this time. The $(this) means the clicked element.
jQuery().ready(function(){
$( ".trow" ).click(function() {
$( this ).hide()
});
});
Simply hiding rows after a click can be done like this:
(function () {
$('table tr').click(function() {
$(this).hide();
});
})();
I'm having problems with my slideToggle function in jquery when I use divs created in a loop.
When I press one of the buttons I want it to show the corresponding div instead of all the divs underneath all the buttons.
This is my css:
<style>
.toggle { display:none;}
p { width:400px; }
</style>
Here is my loop with button and div
<?php
include('sql.php');
$i = 0;
while ($i < count($rows)) {
echo "
<button class='trigger'>
<table width='100%'>
<tr>
<td width='20%'><img src='http://localhost/app-side/Icons/beer_icon.png' /></td>
<td width='80%'><h2>{$rows[$i]['titel']} </h2></td>
</tr>
</table>
</button><br>
<div class='toggle'>
<p>
{$rows[$i]['info']}
</p>
</div>";
$i++;
}
?>
And here is my slideToggle function
<script>
$('.trigger').click(function(){
$('.toggle').slideToggle('fast');
});
</script>
Thank you in advance.
The easiest solution would probably be to wrap your entire looping html in a further div, and then amending your jQuery like so:
$('.trigger').click(function() {
$(this).siblings('.toggle').slideToggle('fast');
});
Since the two elements are now grouped inside a common parent, one can find the other using the siblings-method. Naturally, you can go about this in hundreds of ways, but this one struck me as the quickest and easiest.
Here's a fiddle: http://jsfiddle.net/QukC8/
Is there a way to check if a table cell has a specific content and to mark that cell with the symbol " ◤ " in the top left corner of that cell?
Thanks
use this find and rerplace function:
function ReplaceCellContent(find, replace)
{
$("#table tr td:contains('" + find + "')").html(replace);
}
You probably don't want to replace the content, just mark interesting cell with the "◤".
You can use CSS :before to do that
<table>
<tr>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>ipsum</td>
<td>lorem</td>
</tr>
</table>
JS:
$("td:contains('ipsum')").addClass('found');
Working example:
http://jsfiddle.net/3NWQD/1/
Example JSFiddle answer: http://jsfiddle.net/ATV4G/1/
Javascript:
function markCell(containingText, replaceWith) { //making our function
$("td:contains('"+containingText+"')").prepend("<span class='abs'>"+replaceWith+" </span>");
}
markCell("first", "◤"); //calling the function
CSS:
.abs {
position: absolute;
}
HTML:
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
</table>
These are the minimum requirements. If you want to beautify the output, you can write further CSS to achieve requirements. (Please check JSFiddle example)
Hope this helps you :)
try this
HTML
<table border="1" id="table">
<tr><th>No</th><th>Player Name</th></tr>
<tr><td>1</td><td>Sachin</td></tr>
<tr><td>2</td><td>Dhoni</td></tr>
<tr><td>3</td><td>Raina</td></tr>
<tr><td>4</td><td>Yuvi</td></tr>
<tr><td>5</td><td>Sachin</td></tr>
</table>
jQuery
function MarkCell(PlayerName)
{
$("td").each(function(){
//alert($(this).text());
if($(this).text() == PlayerName)
{
$(this).html('◤' + PlayerName);
}
});
}
MarkCell('Sachin');
live fiddle here
Here is a PHP solution.
Let's say you have a MySQL database you're connected to and the table has columns 'state_or_province', 'city', and 'country'. If you want to mark all cells with the state or province value of "GA", you would use something like this:
echo "<table>
<tr>
<th>State</th>
<th>City</th>
<th>Country</th>
</tr>";
while($row = mysql_fetch_array($myresults)){
echo "<tr>";
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>".$row["state_or_province"]."</td>";
}
else{
echo "<td>".$row["state_or_province"]."</td>";
}
echo "<td>".$row["city"]."</td>
<td>".$row["country"]."</td>
</tr>";
}
echo "</table>";
In your CSS style section, include the following
.red{
background-color: red;
}
In this example, all cells that have the value 'GA' under the 'State' column of our rendered table would appear in a red cell. Just edit the above CSS if you want to have the "◤" symbol appear on the top left hand corner instead
UPDATE
Change
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>".$row["state_or_province"]."</td>";
}
to
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>◤".$row["state_or_province"]."</td>";
}
and you'll see the triangles inside the text boxes
I have an html table, and on each row, i would like to add a delete button.
When the user clicks on it, I would like to do two things:
1) remove the row from the table.
2) extract data from the row that was removed - a particular cell, and then make an ajax call using this value to a function that will remove the record from the database. The function returns a fresh list of items, which i will then use to redisplay the same table.
I found the following post from someone else on stackoverflow:
How to remove current row from table in jQuery?
So I guess that addresses point number one. But I don't know how to modify the code in the selected answer of the post to allow for grabbing the id value in the row, and then making an ajax call.
<table class="table table-bordered table-striped" id="databaserecords">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Status</th>
<th>Voice</th>
<th>Jumbo</th>
<th>Mode</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php foreach ($dblist as $record): ?>
<tr>
<td class ='recordId'><?php echo $record['Id'] ?></td>
<td class ='recordName'><?php echo $record['Name'] ?></td>
<td><?php echo $record['Status'] ?></td>
<td><?php echo $record['Voice'] ?></td>
<td><?php echo $record['Jumbo'] ?></td>
<td class='recordmode'><?php echo $record['Mode'] ?></td>
<td><button id="deleteRecord">Delete Record</button></td>
</tr>
<?php endforeach ?>
<script>
$('#deleteRecord').live('click', function() {
//get a count of all records. only allowed to delete if you have more than one record.
var recCount = $('#databaserecords tbody tr').length;
if (recCount > 1)
{
$thevalueIwanttoSave = $(this).closest('recordId').val();
alert($thevalueIwanttoSave);
}
});
</script>
Right now, the alert always says that my variable is undefined.
Can you point me in the right direction? I do know how to code an ajax call... I think I just need help with grabbing the value from the table.
Thanks.
You selector is not correct.
$thevalueIwanttoSave = $(this).parent().siblings('.recordId').text();
closest selects the closest parent of the element(recordId is not parent/grandparent or.. of your button element) and you have also missed a . for class selector. val is used for getting/setting values of form elements, for td elements you should use text or html method. Also note that IDs must be unique(you can use classes instead) and live method is deprecated, you can use on method.
$('#databaserecords').on('click', '.deleteRecord', function() {
var recCount = $('#databaserecords tbody tr').length;
if (recCount > 1) {
var text = $(this).parent().siblings('.recordId').text();
alert(text);
// $(this).closest('tr').remove()
}
});
siblings()
parent()
closest()
text()
on()
$thevalueIwanttoSave = $(this).parent('tr').find('.recordId').text();
it should be .recordId, not recordId
$thevalueIwanttoSave = $(this).closest('.recordId').val();
alert($thevalueIwanttoSave);
Add the ID in an attribute on your delete button and you can just get it via jQuery.
in your php loop:
<button class="deleteRecord" recordID="<?php echo $record['Id'] ?>">Delete Record</button>
in JQuery on
$(".deleteRecord").click(function() {
var id = $(this).attr("recordID");
...
});
You need to use a . to select the element with class recordId. Also use text() to get the value:
$thevalueIwanttoSave = $(this).siblings('.recordId').text();
alert($thevalueIwanttoSave);