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 :)
Related
I have a table query from DB. This table has few info from the DB. The rest of the info I want is to be shown when I click the collapsible. So for that I want the collapsible row just after each of the queried row. Below is my code.
It is creating as many collapsible as queried rows but all rows are together and all collapsible are together. Also The collapsible are coming before the queried rows though it should be under the queried rows.
<table class="blueTable">
<thead>
<tr>
<th>Broadband ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Circle</th>
<th>SSA</th>
<th>SDCA</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($searchqry)):?>
<tr>
<td><?php echo $row['bb_id'];?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['phone'];?></td>
<td><?php echo $row['circle'];?></td>
<td><?php echo $row['ssa'];?></td>
<td><?php echo $row['sdca'];?></td>
</tr>
<tr><button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</tr>
<?php endwhile;?>
</tbody>
</table>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++)
{
coll[i].addEventListener("click", function()
{
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight)
{
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<tr>
<td colspan="8">
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</td>
</tr>
Needed to put a cell inside the row.
You are missing a <td> inside of the second <tr>.
I want to filter data in the table use dropdown menu (e.g. filter by name so i can see all data with name 'Jane'). I don't want to move to another page (use ajax or anything else if can). Any idea what must i do ?
This is the dropdown menu and table code :
<!-- Dropdown menu -->
<div class="col-md-2">
<select class="form-control selectpicker">
<option value="">Name</option>
<?php
// print all name value from $administratorProvider
foreach($administratorProvider as $administrator){
?>
<option value="<?php $administrator->first_name ?>"><?php echo $administrator->first_name; ?></option>
<?php
}
?>
</select>
</div>
<table>
<!-- Table heading -->
<thead>
<tr>
<th class="center">No.</th>
<th>Name</th>
<th>Email</th>
<th>Join</th>
<th>Last Login</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<?php
$i=1;
foreach ($dataProvider as $data){
?>
<tr>
<div>
<td class="center"><?php echo $i; ?></td>
<td><?php echo $data->name; ?></td>
<td><?php echo $data->email; ?></td>
<td><?php echo $data->join; ?></td>
<td><?php echo $data->last_login; ?></td>
</div>
</tr>
<?php $i++; } ?>
</tbody>
<!-- // Table body END -->
</table>
Thanks for any advice.
Regards
You can use jQuery to achieve this effect quite easily. Make two files:
1) One that includes the table.
2) One that has the select tag that will reload the first file upon change of the <select> tag.
Let's call the first file select.php
<script>
// Load the div with the contents of the table.php file with no GET parameter
$('div').load('table.php');
$('select').change(function() {
var name = $(this).val();
var data = 'name='+ name;
// Make sure that the table's contents don't change if the first option tag
// is selected.
if(name != '') {
$('div').load('table.php', data);
}
});
</script>
<div class="col-md-2">
<select class="form-control selectpicker">
<option value="">Name</option>
<?php
// print all name value from $administratorProvider
foreach($administratorProvider as $administrator){
?>
<option value="<?php $administrator->first_name ?>"><?php echo $administrator->first_name; ?></option>
<?php
}
?>
</select>
</div>
File two can be called table.php
$sql = "SELECT * FROM table WHERE name = '".$name."'";
$query = mysql_query($sql)or die(mysql_error());
$num = mysql_num_rows($query);
$i = 0;
while($row = mysql_fetch_array($query)) {
// Save your info as variables
$name[$i] = $row['name'];
$email[$i] = $row['email'];
$join[$i] = $row['join'];
$login[$i] = $row['last_login'];
}
?>
<div>
<table>
<thead>
<tr>
<th class="center">No.</th>
<th>Name</th>
<th>Email</th>
<th>Join</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
<?php
for($i=0;$i<$num;$i++) {
?>
<tr>
<div>
<td class="center"><?php echo $i; ?></td>
<td><?php echo $name[$i]; ?></td>
<td><?php echo $email[$i]; ?></td>
<td><?php echo $join[$i]; ?></td>
<td><?php echo $login[$i]; ?></td>
</div>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
Upon change of the select tag, the second file will be loaded with the value of the selected option tag sent to that file as a GET variable. You might wanna take the SQL part with a grain of salt as I'm not sure how you're fetching your relevant data.
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>
Evening all, I have the form, which is populated from a sql database.
<table class="sortable" border="2" cellspacing="2" cellpadding="2">
<tr>
<th> Serial Number </th>
<th> Date </th>
<th> Time </th>
<th> Color </th>
<th> Design </th>
<th> Result </th>
</tr>
<?php
$i = 0;
while ($i < $num)
{
$serial = mysql_result($results, $i, 'serial_number');
$date = mysql_result($results, $i, 'date');
$time = mysql_result($results, $i, 'time');
$airport = mysql_result($results, $i, 'color');
$terminal = mysql_result($results, $i, 'design');
$result = mysql_result($results, $i, 'result');
?>
<tr>
<td> <?php echo $serial; ?> </a></td>
<td> <?php echo $date; ?> </td>
<td> <?php echo $time; ?> </td>
<td> <?php echo $color; ?> </td>
<td> <?php echo $design; ?> </td>
<td> <?php echo $result; ?> </td>
</tr>
<?php
$i++;
}
?>
What I would like to do is have each row of the table clickable. When each row is clicked, one cell of data from that row (the first cell) is sent via (POST) to the next page. Can a form be integrated into each tr??
You specify jQuery in your tags, so I assume you can use that.
// when any row is clicked
$('table').on('click', 'tr', function () {
// get the value
var value = $(this).find('td:first').text();
// redirect the user with the value as a GET variable
window.location = nextPage + '?data=' + value;
});
Where nextPage is the URL of the page you want to redirect to.
The short answer: yes, a form can be integrated into each tr.
The long answer - use just as you did before:
<tr>
<td>
<form method="post" target="details.php">
<input type="submit" name="more" value="<?php echo $serial; ?>"
</form>
<?php echo $serial; ?>
</td>
<td> <?php echo $date; ?> </td>
<td> <?php echo $time; ?> </td>
<td> <?php echo $color; ?> </td>
<td> <?php echo $design; ?> </td>
<td> <?php echo $result; ?> </td>
</tr>
But GET is easier, make a series of links that go details.php?number=123, or whichever:
<td>
<a href="details.php?number=<?php echo $serial; ?>"
<?php echo $serial; ?>
</a>
</td>
Although get can use a form, the data send is not user-customised, so the form data can be generated to use like a link.
Try with that code in echo when create your table:
<td><?php echo(''.$serial.'');?></td>
For each data that you have!
OTHER SOLUTION WITHOUT ACTION
<td><?php echo(''.$serial.'');?></td>
my_page.php - where to send the data
?[variable_name] - where is stored the data
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.