AS title, I want to create array in document.getElementById because my id is come from repeat region. Below is my javascript and html.
<script type ="text/javascript">
$(document).ready(function(){
$('table tbody tr').click(function(){
var PurchaserID = window.opener.document.getElementById("PurchaserID");
var n = 5;
PurchaserID.value = document.getElementById("test[n]").innerText;
alert(PurchaserID.value);
window.close();
});
});
</script>
<?php do { ?>
<tr>
<td id = "test[<?php echo $row_Purchaser['ID'];?>]" align="center" ><?php echo $row_Purchaser['ID'];?></td>
<td align="center"><?php echo $row_Purchaser['Name']; ?></td>
<td align="center"><?php echo $row_Purchaser['IC']; ?></td>
<td align="center"><?php echo $row_Purchaser['Handphone']; ?></td>
</tr>
<?php } while ($row_Purchaser = mysql_fetch_assoc($Purchaser)); ?>
Any problem of my program. Why I can't get the value test[n] to test[5] even I create var n =5; May I know how to solve it. Thanks if you could me !!
Related
My problem is that I call my function within my for, but only a part changes color and not above each record, the buttons work but the color of the corresponding row does not change, it had occurred to me to send a value that could be the pk of my table and this one that is changing in the for, if you know any way to achieve that I would really appreciate it
<!doctype html>
<html lang="es">
<head>
<body>
<?php
if (isset($_POST['submit']) && !hash_equals($_SESSION['csrf'], $_POST['csrf'])) {
die();
}
$error = false;
$config = include 'ClientesBeta/conexion/config.php';
try {
$dsn = 'mysql:host=' . $config['db']['host'] . ';dbname=' . $config['db']['name'];
$conexion = new PDO($dsn, $config['db']['user'], $config['db']['pass'], $config['db']['options']);
if (isset($_POST['marca'])) {
$consultaSQL = "SELECT * FROM zonas WHERE idZonas <> 1 and nombreZona LIKE '%" . $_POST['marca'] . "%'";
} else {
$consultaSQL = "SELECT * FROM zonas where idZonas <> 1";
}
$sentencia = $conexion->prepare($consultaSQL);
$sentencia->execute();
$alumnos = $sentencia->fetchAll();
} catch(PDOException $error) {
$error= $error->getMessage();
}
?>
<table class="table table-bordered table-striped" style="margin-top:20px;">
<thead>
<th>ID</th>
<th>Zona</th>
<th>Acción</th>
</thead>
<tbody>
<?php
if ($alumnos && $sentencia) {
foreach ($alumnos as $row) {
?>
<tr>
<td id="prueba2"></td>
<td id="prueba"></td>
<td id="prueba1"></td>
<td >
<button type="button" onclick="cambiarColor2();">Inicio</button>
<button type="button" onclick="cambiarColor();">Proceso</button>
<button type="button" onclick="cambiarColor1();">Fin</button>
</td>
<script>
function cambiarColor(){
document.getElementById('prueba').style.backgroundColor = "blue";
}
</script>
<script>
function cambiarColor1(){
document.getElementById('prueba1').style.backgroundColor = "red";
}
</script>
<script>
function cambiarColor2(){
document.getElementById('prueba2').style.backgroundColor = "green";
}
</script>
</tr>
<tr>
<td><?php echo $row['idZonas']; ?></td>
<td><?php echo $row['nombreZona']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
It is difficult to understand your question. But I believe you are looking for the below answer. Let me know if it helps you.
I think you have placed the ID in the wrong tags, though. Changed the id to where you want to change the colour. I haven't tested the code also.
<?php
if ($alumnos && $sentencia) {
foreach ($alumnos as $key => $row) {?>
<tr>
<td id="prueba2_<?php echo $key; ?>"></td>
<td id="prueba0_<?php echo $key; ?>"></td>
<td id="prueba1_<?php echo $key; ?>"></td>
<td>
<button type="button" onclick="cambiarColor(<?php echo $key; ?>, 2, 'green');">Inicio</button>
<button type="button" onclick="cambiarColor(<?php echo $key; ?>, 0, 'blue');">Proceso</button>
<button type="button" onclick="cambiarColor(<?php echo $key; ?>, 1, 'red');">Fin</button>
</td>
</tr>
<tr>
<td><?php echo $row['idZonas']; ?></td>
<td><?php echo $row['nombreZona']; ?></td>
<td> </td>
</tr>
<?php
}
}
?>
<script>
function cambiarColor(id, eleid color){
document.getElementById('prueba'+eleid+'_'+id).style.backgroundColor = color;
}
</script>
I'm trying to change the font color to red when the number is below 0. green when above. I've managed to get the entire row to go red thanks to a stackoverflow answer but can't manage to give it to the font itself.
the <?php echo $coin_gain; ?> displays a number that can negative.
<tr>
<td><?php echo $coin_name; ?></td>
<td><?php echo $coin_price; ?></td>
<td class="status"><?php echo $coin_gain; ?>%</td>
</tr>
<script>
$(document).ready(function() {
$(".status").each(function(){
var value = parseInt ( $( this).html() );
if (value < 0){
$(this).parent().css('background-color', 'red');
}
});
});
</script>
<tr>
<td><?php echo $coin_name; ?></td>
<td><?php echo $coin_price; ?></td>
<td class="status"><?php echo $coin_gain; ?>%</td>
</tr>
<script>
$(document).ready(function() {
$(".status").each(function(){
var value = parseInt ( $( this).html() );
if (value < 0){
$(this).css('color', 'red');
}
});
});
</script>
You simply need to remove the parent selector to target the cell itself rather than the row.
If you output with PHP, then process class with PHP too:
For font color it's color: #000000 and not background-color
<?php $isPositive = $coin_gain >= 0; ?>
<tr style="background-color: <?= $isPositive ? 'green' : 'red'; ?>>
<td><?= $coin_name; ?></td>
<td><?= $coin_price; ?></td>
<td class="status" style="color: <?= $isPositive ? 'green' : 'red'; ?>><?= echo $coin_gain; ?>%</td>
</tr>
If you want to target the cell, remove .parent() :
if (value < 0){
$(this).css('color', 'red');
} else {
$(this).css('color', 'green');
}
When you add .parent() you target the containing element of your cell (<td>), which is the row (<tr>)
<tr>
<td><?php echo $coin_name; ?></td>
<td><?php echo $coin_price; ?></td>
<td class="status"><?php echo $coin_gain; ?>%</td>
</tr>
<script>
$(document).ready(function() {
$(".status").each(function(){
var value = parseInt ( $( this).html() );
if (value < 0){
// this will change the color of font
$(this).css('color', 'red');
}
});
});
</script>
In Foreach loop of php i get on click event only 'product_title' and 'email'. code is as bellow.
foreach($abs_records as $abs)
{
<tr>
<td><input type="checkbox" name="case[]" class="case" ></td>
<td><?php echo $abs['product_id']; ?></td>
<td><?php echo $abs['product_title']; ?></td>
<td><?php echo $abs['user_email']; ?></td>
<td class="send_mail_btn"><a href="javascript:void(0)" >Send</a></td>
</tr><?php
} ?>
Using Jquery click on 'Send' i will get the result of Single Time value of 'Product_title' and 'user_email'
Can you suggest me.
Thanks.
Add a class to the td element like so:
<tr>
<td><input type="checkbox" name="case[]" class="case" ></td>
<td><?php echo $abs['product_id']; ?></td>
<td class="title"><?php echo $abs['product_title']; ?></td>
<td class="email"><?php echo $abs['user_email']; ?></td>
<td class="send_mail_btn"><a href="javascript:void(0)" >Send</a></td>
</tr>
Than you can find the related values in jQuery:
$(document).on('click', '.send_mail_btn', function() {
var title = $(this).siblings('.title').html();
var email = $(this).siblings('.email').html();
console.log("Title: " + title);
console.log("Email: " + email);
});
add class to email and title td and also add class to send anchor tag + add click event in jquery to get value
foreach($abs_records as $abs)
{
<tr>
<td><input type="checkbox" name="case[]" class="case" ></td>
<td><?php echo $abs['product_id']; ?></td>
<td class="title"><?php echo $abs['product_title']; ?></td>
<td class="email"><?php echo $abs['user_email']; ?></td>
<td class="send_mail_btn"><a class="send-link" href="javascript:void(0)" >Send</a></td>
</tr><?php
} ?>
Jquery:
$(".send-link").click(function() {
var title = $(this).parent("tr").find(".title").text();
var email = $(this).parent("tr").find(".email").text();
alert(title+ " -- "+email)
});
I want to get dynamic values from php in js in a dynamic manner...Let me elaborate: First I show the image then code:
<div id="">
<table border="1" width="820" style="margin-left:15px;">
<tr>
<th>Sr #</th>
<th>Commented Post</th>
<th>Commenter Name</th>
<th>Commenter Email</th>
<th>Comments</th>
<th>Status</th>
</tr>
<?php
$values = array();
while($row= mysqli_fetch_assoc($res)) {
$values[] = $row['comment_id'];
?>
<tr align="center" style="height:50px;">
<td><?php echo $row['comment_id']; ?></td>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['comment_name']; ?></td>
<td><?php echo $row['comment_email']; ?></td>
<td><?php echo $row['comment_text']; ?></td>
<td>
<?php
if($row['status']==0) { ?>
<div class="status_<?php echo $row['comment_id']; ?>" id="status_<?php echo $row['comment_id']; ?>">Unapproved</div>
<?php } else { ?>
Approved
<?php } ?>
</td>
</tr>
<?php }
?>
</table>
</div>
And Js here's:
<script type="text/javascript">
$(document).ready(function(){
var values = <?php echo json_encode($values); ?>;
var id = values[0];
$('.status_'+id).click(function(){
$("#status_"+id).html("<b>Test</b>");
});
var i = values[1];
$('.status_'+i).click(function(){
$("#status_"+i).html("<b>Test</b>");
});
});
</script>
I want to get all comment id's in js dynamically, so that on clicking each row link, it changes to text "Test"...As I have written the js code manually...how we obtain all the comment_id's dynamically in js..I hope you got the idea what I am trying to do...
There's no point in assigning unique ids to each of your elements. Why not do something like:
<tr>
<td>...</td>
<td><a href="#" onclick="toggle(this, <?php echo $id ?>)">Unapproved</td>
</tr>
then something like
function toggle(node, id) {
node.parentNode.innerHTML = '<b>test</b>';
... do something with "id" value? ...
}
No need for getElementById, assigning a massive pile of repetitive ids, etc.. just a single function call and a bit of DOM tree traversal.
Try to add a class to your status TD, like <td class="status" data-id="<?php echo $row['comment_id'] ?>">// your inital value</td>.
Using jQuery you can easily listen for events which are attached to a an event listener:
$(document).on('click', '.status', function() {
var id = $(this).attr('data-id');
$(this).html('<strong>Test</strong>');
// maybe to something with ajax?
$.ajax({
url: 'yourfile.php?call=doSomething&id=' + id,
type: 'post'
}).done(function(response) {
// console.log(response);
});
});
You dont appear to actually use the ids.
All you need to do is ascertain the clicked element, which use can do using this
html:
<div class="status">Unapproved</div>
js:
$(document).ready(function(){
$('.status').click(function(){
$(this).html("<b>Test</b>");
});
});
My idea is to get connectivity status of available servers in database on a php page.
<tbody>
<?php foreach ($data['servers'] as $server) { ?>
<tr>
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"><?php if (is_dir($server->base_path)){ echo 'Pass';} else { echo 'Fail' } ?></td>
</tr>
<?php } ?>
</tbody>
I want to do this just after page load using ajax like this page screenshot
How do I call ajax to get each value of this dynamically generated table. So far, I have tried the following code
<?php foreach ($data['servers'] as $server) { ?>
<tr>
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"></td>
<td class="server_status_loading"></td>
</tr>
<?php } ?>
JS
$(function(){
$(".server_status").hide();
$(".server_status_loading").show();
$.ajax({
url: 'get-server-status'
})
.error(function(){
alert('Error!');
})
.done(function(response){
$(".server_status_loading").hide();
$(".server_status").show();
$(".server_status").html(response);
});
get-server-status function:
public function getStatus() {
$basep = $this->_serverModel->getBasePath(2);
if (is_dir($basep)) {
echo 'Pass'; exit;
}
else {
echo 'Fail'; exit;
}
}
Thanks in advance!
first add id to your <tr>.
<?php foreach ($data['servers'] as $server) { ?>
<tr id="echo database id here.">
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"></td>
<td class="server_status_loading"></td>
</tr>
then check this link to handle the ajax on page load and this link to handle the ajax on click.Rest everything is provided there.
In link you can replace status to server_status_loading
try like this
$(document).ready(function(){
var hTable = document.getElementById('table2');
var iRowCount = hTable.rows.length;
for(var i=1; i<iRowCount; i++){
basepath= hTable.rows[i].cells[2].childNodes[1].value;
$.ajax({
url: 'get-server-status',
data :basepath
})
.error(function(){
alert('Error!');
})
.done(function(response){
hTable.rows[i].cells[2].childNodes[3].value=response;
});
}
}