I am trying to get the value or text which is inside td tag i have tried with custom attribute but failed . I am working for past two hours but I am getting undefined error.
here is the php code
$id=$row["id"];
$name=$row["name"];
echo "<tr class='inner'>";
echo "<td class='tdtext'check='$id' contenteditable='true'>".$row["name"]."</td>";
echo "<td><Button class='btn btn-primary buttonclass' tayyab='$id'>edit</Button>
echo "</tr>";
this is the j Query code
$(".buttonclass").click(function(){
var edit=$(this).attr("tayyab");
var abc = $(this).siblings(".tdtext").html();
alert(abc);
});
You want to find the closest parent TD, then the previous TD
$(".buttonclass").click(function(){
var edit = $(this).attr("tayyab");
var abc = $(this).closest('td').prev(".tdtext").html();
alert(abc);
});
Note that tayyab is an invalid attribute, and it should be data-tayyab
Related
I am trying to show and hide multiple elements in my table when a button is clicked. The table is generated using a PHP for loop
echo "<tr> ";
echo "<td style='text-align:center'>$stock_date</td>";
echo "<td style='text-align:center'>$store_name</td>";
echo "<td style='text-align:center'>$store_city</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($opening_stock,2)." <br/> </td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($wastage,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($purchases,2)." <br/>";
echo "<span id='averages' style='visibility:hidden;'>$global_currency_sign ".number_format($avg_purch,2)."</span></td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($sales,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($closing_stock,2)."</td>";
Then I have the jQuery doing the following
$('#show_averages').click(function(event){
if(document.getElementById("averages").style.visibility == 'hidden')
{
document.getElementById("averages").style.visibility = 'visible';
}
else if(document.getElementById("averages").style.visibility == 'visible')
{
document.getElementById("averages").style.visibility = 'hidden';
}
});
However it only works for the first id="averages" that it finds. How can I make it so that it shows all the elements with id="averages"?
IDs (#) are used to identify elements on the page that only occur ONCE. As soon as you have a duplicate, you can press F12 to open developer console and you should see an error saying it found two or more elements with the same ID. When you want to have multiple instances of something with the same properties, you can give it a CLASS (.)
Instead of using an id selector (#), change your td elements to have be classed together like this:
echo "<tr> ";
echo "<td style='text-align:center'>$stock_date</td>";
echo "<td style='text-align:center'>$store_name</td>";
echo "<td style='text-align:center'>$store_city</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($opening_stock,2)." <br/> </td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($wastage,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($purchases,2)." <br/>";
echo "<span class='averages' style='visibility:hidden;'>$global_currency_sign ".number_format($avg_purch,2)."</span></td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($sales,2)."</td>";
echo "<td style='text-align:center'>$global_currency_sign ".number_format($closing_stock,2)."</td>";
Then select your elements like this:
$('#show_averages').on('click', function(){
//your code here
})
Note that you'll likely have to change your jQuery (or raw JS in your case) to select by classname, as they no longer have the ID from before. You'll have to use something like this in your code, if you're choosing to use vanilla JS:
Document.getElementsByClassName('averages')
Otherwise, you can select all of these elements with
var myAverages = $('.averages');
myAverages.each(function(){
//this will loop through each of the average td elements and perform whatever code youd like here. You can reference each element with
$(this).whatever....
})
Because ID of element should be always unique. You repeated the same ID again and again through a loop but when you selected it through jQuery it selects only only first occurrence with the ID. The solution to this is you should always prefer using class instead of ID when you're getting data through looping
I followed some solutions founded around and most of them was working but I'm having an issue of duplicating the SELECTED id record not only the structure of HTML.
foreach ($pdo->query($sql) as $row) {
echo '<tr id="myrow">';
echo '<td>'. $row['id'] . '</td>';
echo '<td>'. $row['finishing'] . '</td>';
echo '<td>'. $row['price'] . '</td>';
echo '<td width=250>';
echo '<a class="btn btn-warning" onclick=duplicate()>Duplicate</a>';
}
when i click the DUPLICATE button I want to duplicate the entire row with regard of the selected id.
That my duplicate implementation:
var i = 1;
$("table tr:first").clone().find("tr").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().appendTo("table");
i++;
});
UPDATE: Another Try for duplication:
document.getElementById('duplicateid').onclick = addMoreFields;
var newRow = document.getElementById('myrow').cloneNode(true),
myTable = document.getElementById('myTable');
function addMoreFields() {
myTable.appendChild(newRow.cloneNode(true));
}
You need to add the function duplicate() with quotation marks. onclick="duplicate()"
echo '<a class="btn btn-warning" onclick="duplicate()">Duplicate</a>';
EDIT:
Every row has the same ID (myrow), this is incorrect so Im going to change it to a class. Give each row a new attribute, like data-id.
Since Im sure the ID is a integer Im not giving it the attribute ID since ID's cant start with a integer.
echo '<tr class="myrow" data-id="'.$row['id'].'">';
and then send the ID to the duplicate function.
echo '<a class="btn btn-warning" onclick="duplicate(\''.$row['id'].'\')">Duplicate</a>';
And then duplicate the row and append it to the table.
function duplicate(id){
$("#themeTable tr[data-id='"+id+"']").clone().appendTo($("#themeTable"));
}
I don't understand completly what you want. Is this it? Append the row to the end of the table on click?
I am drawing all my information from my sql database and displaying it in a table in html. I want to be able to click on a button at the end of each row, or somewhere on the row, and display another set of things relating to the uniqueID in that row. However at the moment, the value does not change for each dynamically created button.
$sql = "SELECT * FROM Hybrid";
$result = mysqli_query($link, $sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Timestamp</th><th>Rate</th><th>Fiat</th><th>BTC</th><th>BTCadd</th><th>Contact</th><th>PaymentMethod</th><th>Bank</th><th>localprofile</th><th>BTname</th><th>uniqID</th><th>Confirm2</th><th>Paymentmade</th><th>Paymenttime</th></tr>";
// output data of each row
while ($row = $result-> fetch_assoc()) {
echo "<tr><td>".$row["ID"].
"</td><td>".date('d-m H:i', strtotime($row["Timestamp"])).
"</td><td>".$row["Rate"].
"</td><td>".$row["Fiat"].
"</td><td>".$row["BTC"].
"</td><td>".$row["BTCadd"].
"</td><td>".$row["Contact"].
"</td><td>".$row["PaymentMethod"].
"</td><td>".$row["Bank"].
"</td><td>".$row["localprofile"].
"</td><td>".$row["BTname"].
"</td><td>".$row["uniqID"].
"</td><td>".$row["Confirm2"].
"</td><td>".$row["Paymentmade"].
"</td><td>".date('d-m H:i', $row["Paymenttime"]).
"</td><td>".
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>".
"</td></tr>";
}
echo "</table>";
}
This bit is the button:
<td>" . "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>" . "</td>
and $row['uniqID'] displays all the different uniqIDs on my table in html, however, when I try this in javascript:
<script>
var id = document.getElementById("view").value;
function dropdown() {
alert(id);
};
</script>
It only alerts the first $row['uniqID'] regardless of which button I press, instead of the one corresponding to the row.
I need the value of the button to correspond to the uniqueID for that row, so I can use it in the button function, maybe there is another way?
I am stuck as to how to do this, I thought it might be something to do with the 'infamous javascript loop issue' but I am not sure if it applies, or if it does quite how to fix it?
id is to be unique, but you have n number of id='view'. So since there should only be 1 id='view' javascript will find the first one only. You could add this.value to the function call -
"<td>" .
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown(this.value);' >View</button>" .
"</td>"
and then use that in your function
<script>
function dropdown(id){
alert(id);
}
</script>
First of all, I would like to calculate the remaining QTY (quantity) between two fields in a form; in other words I have the actual QTY input text field as a read-only where its value is obtained from mysql table AND there is the user QTY input text field is taken from the user input. All I want is to decrement the actual QTY based on what the user input in the user QTY.
I have the following code as follows :
$query2 = "SELECT * from store_00";
$result2 = mysql_query($query2);
$n = array();
while($row2 = mysql_fetch_assoc($result2)){
echo "<td align=center>".$row2['item_no']."</td><td align=center>";
?>
<input type="text" id="fname" value="<?php echo $row2['qty'] ?>" readonly="readonly"/>
<?php
echo "</td>";
for($i=0;$i<$num;$i++){
echo "<td align=center>"; ?><input autofocus="autofocus" onchange="myFunction(this.value);" type="text" name="n[]" value=""/><?php echo "</td>";
}
echo "</tr>";
}
And the Javascript code :
function myFunction(v)
{
var x=document.getElementById("fname");
x.value = x.value - v;
}
The above will output in the actual QTY correctly for the first time, but when user changes the value back to 0 , it will decrements from the new actual QTY value which gives a false remaining...So there must be a way to have a temporary actual QTY value saved somewhere.
Anyways I know the code looks awful, I'm still new to JS and not sure how to just create a simple relation and remaining calculation between two fields.
As you don't use jQuery and your question is about javascript, i've changed some things to do what you want easily. Also, the id should be unique while classes don't need to be unique. As you have ids with the same values that creates a problem, also as you stated, you don't store your original value, and this is your main problem. There are many methods for this but i prefer this as it's easy to understand i guess.
$n = array();
echo "<table>";
while($row2 = mysql_fetch_assoc($result2)){
echo "<tr class='inputs'>";
echo "<td align=center> ".$row2['item_no']." </td><td align=center>";
echo "<input class='original' type='text' id='c".$row2['item_no']."' value='".$row2['qty']."' readonly='readonly'/>";
echo "</td>";
for($i=0;$i<$num;$i++){
echo "<td align=center>";
echo "<input class='d".$row2['item_no']."' data-goto='c".$row2['item_no']."' data-original = '".$row2['qty']."' autofocus='autofocus' onchange='myFunction(this);' type='text' name='n[]' value='0'/>";
echo "</td>";
}
echo "</tr>";
}
echo "</table>";
With the html5, you can define custom tags with the data- prefix, and you can reach them with getAttribute method for that object.
<script>
function myFunction(v){
var minus = 0;
var mutualInputs = document.getElementsByClassName(v.className);
for (var i = 0; i < mutualInputs.length; ++i) {
var item = mutualInputs[i];
minus = minus + parseInt(item.value);
}
var original = v.getAttribute('data-original');
var x = document.getElementById(v.getAttribute('data-goto'));
x.value = original - minus;
}
</script>
ps: your item_no's must be unique in this example.
On my site, it displays a table of data.
I've got a link that will load another table of data from a URL.
$("#another").click(function() {
var newGeneration = $('<p />').load('another.php?cycle=' + i);
$('tbody').append(newGeneration);
i++;
});
Is there a way to get it so that it doesn't add a p tag and just directly load the file into the tbody? I tried changing it to tr, but that just made trs inside of trs.
The code that displays another result
echo "<tr>";
echo "<td>" . $keys[$k] . "</td>";
echo "<td>" . $jobs[$k] . "</td>";
echo "</tr>";
What I don't want to happen (like it is now)
I think its better to send a get request instead of complicating the use of load.
$("#another").click(function() {
$.get('another.php', { 'cycle' : i }, function(data) {
$('tbody').append(data);
});
});
Try to get the html() from the element :
$("#another").click(function() {
var newGeneration = $('<p />').load('another.php?cycle=' + i);
$('tbody').append(newGeneration.html());
i++;
});