I have a table with each rows have a Send Button:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr>
<td id="name"></td>
<td>20</td>
<td>Street AA</td>
<td><a name="sendName" id="sendId" href="www.google.com">Send</a>
</td>
</tr>
<tr>
<td>Mr.XX</td>
<td>20</td>
<td>Street XX</td>
<td><a name="sendName" id="sendId" href="www.google.com">Send</a>
</td>
</tr>
<tr>
<td>Mr.YY</td>
<td>20</td>
<td>Street YY</td>
<td><a name="sendName" id="sendId" href="www.google.com">Send</a>
</td>
</tr>
</tbody>
</table>
Preview
All values in that table I get from database. So what I want to do is, when the NAME value is empty, the send button will be disabled based on its row table.
Since you have no input values i do not quite understand why you want to use javascript for a task like this. If the value is empty simply do not display the link at all. Or remove the href-attribute add a css class and style the link different.
//disabled link
<a name="sendName" id="sendId">Send</a>
I don't know if this was a copy/paste error but you use the same ID sendID on all links.
You really need to not put the button there if the database returns an empty name instead of removing it after. Something like
<a name="sendName" id="<? echo "id".&name; ?>"
<? if (&name!="") echo 'href="#"'; ?>>Send</a>
or
<? if (&name=="") { ?>
<span>Send</span>
<? } else { ?>
<a name="sendName" id="<? echo "id".&name"; ?>" href="#">Send</a>
<? } ?>
Try the Below example code on send link :
<?php if($row['NAME']==''){ echo 'Send' } else{?>
<a name="sendName" id="sendId" href="www.google.com">Send</a>
<?php }?>
you can try this jquery code for that you you need to include jquery library
<script>
$(document).ready(function(e){
var objTR = $("table tr");
for(var i = 0; i < objTR.length; i++)
{
var objCols = $(objTR[i]).children();
var name = objCols[0].innerHTML;
if(name == "")
$(objCols[3]).find("a").removeAttr("href");
}
});
</script>
Related
I am trying to pass a variable from an anchor link and display it in a div on a form so I can post the variable. This is my anchor:
if($Count2 == 0) {
echo "<tr>";
}
echo "<td align='left' class='roomviewred'>
<span class='roomName'>
<div class='show_login'><a href='#Record?<?php echo $RoomNo2; ?>'></a>$RoomNo2</div>
</span>
<span class='auditMonth2'>$AuditMonth</span>
</td>";
}
$Count2 = 0;
echo "</tr>
The Form:
<div class = "loginform">
<form method = "post" action = "clear_faults_submit.php" target="_self">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td class="ButtonText"></td>
<td><input type = "password" id = "password" name = "password" placeholder = "***"></td>
</tr>
<tr>
<td colspan="2"><div id="Record"></div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="50%" align="center"><input type = "image" id = "dologin" src = "images/login.png"></td>
<td width="50%" align="center"><input type = "image" id = "close_login" src = "images/cancel.png"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</form>
</div>
The JavaScript:
$(document).ready(function()
{
$(".show_login").click(function(){
showpopup();
});
$(".close_login").click(function(){
$('.show_login').hide();
});
});
function showpopup()
{
$(".loginform").fadeIn();
$(".loginform").css({"visibility":"visible","display":"block"});
}
function hidepopup()
{
$(".loginform").fadeOut();
$(".loginform").css({"visibility":"hidden","display":"none"});
}
I have spent hours trying differnt methods and from what I have read, the above code should work. It does not, so I must be doing something wrong.
Many thanks in advance for your time.
This is the way I resolved my question.
EDITED
This is how I solved my question. For my link code I now have:
<div class="show_login"><span class="RommDisplay"><?php echo $RoomNo2;?></span></div>
I added a class named "Click", "class="Click"". When the link is clicked the class="Click" is captured by the following JQuery function and produces a
variable call "anchorValue" and assigns the resulf to another variable called "room". I then use "room" to get the data into an document.getElementById which
I can use in my popup form. This may not be the most elegant or tidy way, but it works.
$(document).ready(function(){
$(".Click").click(function () {
var anchorValue= $(this).attr("href");
var room = (anchorValue[0] == '#') ? anchorValue.substr(1) : anchorValue;
$(".show_login").click(function(){
document.getElementById('Record').innerHTML=room;
document.getElementById('Room').innerHTML=room;
showpopup();
});
$(".close_login").click(function(){
$('.show_login').hide();
});
});
function showpopup()
{
$(".loginform").fadeIn();
$(".loginform").css({"visibility":"visible","display":"block"});
}
function hidepopup()
{
$(".loginform").fadeOut();
$(".loginform").css({"visibility":"hidden","display":"none"});
}
});
And in my popup FORM I have which hold the value of the :
<input type="hidden" id="Room" name="Room" /><div id="Record"></div>
This is get request.
so in your link give name to your request.
<div class='show_login'><a href='#Record?variable=<?php echo $RoomNo2; ?>'></a>$RoomNo2</div> now we can get value with $_GET['variable']
inside your #Record
<div id="Record">
<?php isset($_GET['variable']) ? $_GET['variable'] : '' ?>
</div>
this was short if else statemanet. Remeber always check variable if exist write it to screen else it will throw error that undefined
Two-part question:
I have two tables: one table is items and the other is the table that selected items will be copied into when the Add button is clicked. After, when all items that are wanted are selected, there will be a 'finished' button which will post the items selected to the DB.
I started with Javascript but didn't get far at all because jQuery seems better suited but I'm not very familiar with it
function addto()
{
var div = document.getElementById('fixedDiv','inside');
div.innerHTML = div.innerHTML + 'Item Added';
}
<div id='fixedDiv'>
<table align="center" id="tradee">
<th rowspan="2"> Other Item</th>
<?php while($rowi =$item->fetch_assoc())
{?>
<tr>
<td>
<?php echo $rowi['item_name']; ?>
</td>
<td><?php echo $rowi['item_description'];?></td>
</tr>
<?php } ?>
</table>
<br>
<table align="center" id="tradeTable">
<th>Cat_id</th>
<th>Name</th>
<th>Description</th>
<?php while($row =$item_results->fetch_assoc())
{?>
<tr>
<td><?php echo $cat_id = $row['cat_id']; ?> </td>
<td name="item_name"><?php echo $item_id = $row['item_name'];?></td>
<td><?php echo $item_descrip = $row['item_description'];?></td>
<td><input name ="submit" type="button" class="added" onclick="addto()"
value="Add" >
</td>
</tr>
<?php } ?>
</table>
i dont know what excatly you try to do, but i hope it helps a bit:
Here is the fiddle with some modifications on your html and jQuery:
http://jsfiddle.net/4FArt/5/
function addto(obj)
{
var $row = $(obj).parents("tr");
var $table = $("#tradee");
var item_name = $row.find(".item-name").text();
var item_desc = $row.find(".item-desc").text();
var newTR = $("<tr><td>"+item_name+"</td><td>"+item_desc+"</td></tr>");
$table.append(newTR);
}
You should check also your markup of HTML, a TD has no name Attribute, and ah <TH> is also wrapped by an <TR>... But maybe its just for showing, and you allready know that :)
I am using mysql_fetch_array() to fetch data from MYSQL and I am displaying that data in the form of HTML table using PHP. HTML Table's first column is primary key of data base table. I added radio button to it while displaying fetched result. I have UPDATE and DELETE buttons on top of HTML table. If I select a radio button and click UPDATE/DELETE, a pop-up window should appear to display that selected row values. For this I think I need to pass selected row id/key to
pop-up window. If any one know how to achieve it, let me know!
<?php
while($rows=mysql_fetch_array($result))
{
?>
<table>
<tr>
<td><? echo $rows['ID']; ?></td>
<td><input type="radio" name="" value=""><? echo $rows['Name']; ?></td>
<td><? echo $rows['Surname']; ?></td>
<td><? echo $rows['Number']; ?></td>
</tr>
</table>
<?php
}
?>
Thanks In Advance!!!
please see this code
<td><input type="radio" name="" value="" onclick="alert("<?php echo "you have selected ".$rows['ID']." want to update or delete??"; ?>")"><? echo $rows['Name']; ?></td>
hope it will usefulllll
You can perform UPDATE and DELETE operation by using below code.
<table>
<tr id="row_1" data-idval="1"><td>1</td>
<td>XYZZZZ</td>
<td>PQR</td>
<td>----</td>
<td><span class="update">UPDATE</span></td>
<td><span class="delete">DELETE</span></td>
</tr>
<tr id="row_2" data-idval="2"><td>2</td>
<td>XYZZZZ</td>
<td>PQR</td>
<td>----</td>
<td><span class="update">UPDATE</span></td>
<td><span class="delete">DELETE</span></td>
</tr>
<tr id="row_3" data-idval="3"><td>3</td>
<td>XYZZZZ</td>
<td>PQR</td>
<td>----</td>
<td><span class="update">UPDATE</span></td>
<td><span class="delete">DELETE</span></td>
</tr>
</table>
Javascript:-
<script type="text/javscript">
function yesnodialog(button1, button2, element){
var btns = {};
btns[button1] = function(){
var id_val = element.parents('tr').data('idval');
alert(id_val);
//write here update code using ajax here
$(this).dialog("close");
};
btns[button2] = function(){
// Do nothing
$(this).dialog("close");
};
$("<div></div>").dialog({
autoOpen: true,
title: 'Condition',
modal:true,
buttons:btns
});
}
$('.update').click(function(){
yesnodialog('Yes', 'No', $(this));
})
</script>
Same you can do for DELETE as well.
See live demo here
How can I get the class of the table when clicking the tr?
This is my code
<table class='table1' border='1'>
<tr class='graph1'>
<td>Test1</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph2'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph3'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
</table>
<table class='table2' border='1'>
<tr class='graph1-1'>
<td>Test1</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph2-1'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph3-1'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
</table>
When I click on
<tr class='graph2'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
It should display 'table1'
or if I click on
<tr class='graph3-1'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
It should display: 'table2'
Take not that this is dynamic, its not only graph2 or graph3-1 will be clicked.
how would I do that using jquery?
Any help would be greatly appreciated and rewarded! Thanks!
I would use closest() to find the table parent. See also http://api.jquery.com/closest/
$('.viewHistory').click(function() {
var classname = $(this). closest('table').attr('class');
alert(classname);
}
jQuery('table tr').click(function(){
//this is set to the row's DOM element
jQuery(this).parent('table').attr('class');
});
See the jQuery.parent for details.
Never used it personally so not sure about this, but jQuery.closest may give better performance compared to jQuery.parent.
Also, please note that the following code sample will attach click event for any table row in the document, so you'd better add some specific class to your tables (say clickable_table and use it like this)
jQuery('.clickable_table tr').click(function(){
//this is set to the row's DOM element
jQuery(this).parent('table').attr('class');
});
You can use the .parent() function (if you want to click the a tag, use it twice)
and the .attr("class") to get the class. I think there is also a .class or something but not sure right now.
hi i found a script which uses checkbox to select all/ unselect all checkboxex which i found a working example here http://jsfiddle.net/ThiefMaster/HuM4Q/
the problem is when i tried to integrate it to my own html. it doenst work anymore, here is my code:
javascript:
<head>
<script>
$('#checkAll').click(function() {
if(this.checked) {
$('input:checkbox').attr('checked', true);
}
else {
$('input:checkbox').removeAttr('checked');
}
});
$('input:checkbox:not(#checkAll)').click(function() {
if(!this.checked) {
$('#checkAll').removeAttr('checked');
}
else {
var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
var numTotal = $('input:checkbox:not(#checkAll)').length;
if(numTotal == numChecked) {
$('#checkAll').attr('checked', true);
}
}
});
</script>
</head>
and these is my html:
<h2>Courses</h2>
<?php
$attributes = array('name' => 'list','id' => 'form' );
echo form_open('courses/edit',$attributes);?>
<table class="data display datatable" id="example">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Units</th>
<th>Notes</th>
<th><input type="checkbox" id="checkAll"></th>
</tr>
</thead>
<tbody>
<?php foreach($query->result_array() as $row): ?>
<tr class="even gradeC">
<td><?php echo anchor('courses/details/'.$row['courseID'],$row['courseID']);?></td>
<td><?php echo $row['courseTitle'];?></td>
<td><?php echo $row['courseDesc'];?></td>
<td><?php echo $row['courseUnits'];?></td>
<td><?php echo $row['courseNotes'];?></td>
<td><input type="checkbox" name="checkID[]" id="checkID" value="<?php echo $row['courseID'];?>"/></td>
</tr>
<? endforeach; ?>
</tbody>
</table>
Try fixing this line:
<td><input type="checkbox" name="checkID[]" id="checkID" value="<?php echo $row['courseID'];?>"/></td>
The id attribute should be unique, eg, only one element should have the id "checkID", not every row. Try removing the attribute altogether or make it unique for each row to see if your javascript sorts itself out.
Also, you need a line like this at the top, in your head:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
That script used jQuery. Make sure you include the jQuery script in your page.