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?
Related
I want rest the value in the text box when the rest button click in dynamical created table .how do i do it?
$table .='<tbody><tr>';
$table .='<td>' . $row["emp_id"] . '</td>';
$table .='<td>' . $row["emp_name"] . '</td>';
$table .='<td>' . $row["date"] . '</td>';
$table .='<td><input type="text" name="firstname" class="form-control" value="'.$row["ot_hour"] .'" size="4"></td>';
$table .='<td><button type="button" name="ot_approval_rset" class="btn btn-primary btn-sm ot_approval_rset" " id="'.$row["emp_id"].'">Reset</button></td>';
$currentMonth= date('Y-m');
$query01 ="SELECT SEC_TO_TIME( SUM( TIME_TO_SEC( `ot_hour` ) ) ) AS timeSum
FROM otresquest
WHERE emp_id ='".$row["emp_id"]."' AND date LIKE '$currentMonth%' AND overtime_status=6";
$statement = $connect->prepare($query01);
if($statement->execute())
{
$result = $statement->fetchAll();
foreach($result as $row){
$table .='<td>' . $row["timeSum"] . '</td>';
}
}
$table .='</tr></tbody>';
java script code
$(document).on('click', '.ot_approval_rset', function() {
emp_id = $(this).attr('id');
//i need write code here to reset (00:00:00) value of ot_approval_rset input box
});
when click the reset button particular row ot hours should 00:00:00 .
Let try this code
$(document).on('click', '.ot_approval_rset', function() {
var otherInput = $(this).closest('tr').find('input').val('00:00:00');
});
It may be help to you
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
So, I have a table emitting data from database table.
//Display the simplex table
echo "<div id='simptable'>";
$sqlGet = "SELECT * FROM simplex_list";
//Grab data from database
$sqlSimplex = mysqli_query($connect , $sqlGet)or die("Error retrieving data!");
//Loop to display all records on webpage in a table
echo "<table>";
echo "<tr><th>Product Code</th><th>Description</th><th>Quantity</th></tr>";
while ($row = mysqli_fetch_array($sqlSimplex , MYSQLI_ASSOC)) {
echo "<tr><td>";
echo "<input type='text' id='sim' value='".$row['s_code']."' readonly>";
echo "</td><td>";
echo $row['description'];
echo "</td>";
echo "<input type='hidden' id='com' name='complexcode' value='$newProductID'>";
echo "<td>";
echo "<input type='text' size='7' id='userqty'>";
echo "</td><td>";
echo "<input type='button' onclick='addthis()' value='Add!'>";
echo "</td></tr>";
}
echo "</table>";
echo "</div>";
And I try to alert the 'Product Code' here when the user clicks 'Add' button....
function addthis() {
var scode = $('#sim').val();
alert(scode);
}
The problem is it only alerts the first Product Code in the table. That from row 1.
Example:
Product code Name More
123 Toy 'Add'
321 Food 'Add'
555 Pen 'Add'
So if I click on 'Add' for food or pen it will still alert 123..
Any ideas?
ID must be unique.
You can do something like following. Add parameter in onclick function. Which will be ID of row.
echo "<input type='button' onclick='addthis(".$row['s_code'].")' value='Add!'>";
^^^
Parameter added in above code. Now javascript function can be:
function addthis(scope) {
alert(scode);
}
As I stated in comments, the ID of your input must be unique. You're currently assigning 'sim' as the ID to every input in your loop over the data results.
One approach to fix this:
$i = 0;
echo "<input type='text' id='sim" . $i ."' value='".$row['s_code']."' readonly>";
And then add a unqiue id to your button using the same incrementor:
echo "<input type='button' id='btn" . $i . "' value='Add!'>";
$i++; //then increment
Notice that the button and the input have the same number at the end of their id. You can use this to parse the id of the button and use it to find the input.
Tie the click event with:
$(document).on('click', '[id^="btn"]', function() {
var id = $(this).attr('id').split('btn')[1];
var val = $('#sim' + id).val();
console.log(val);
//do other stuff
});
UPDATE: JSFiddle
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>
I have a dynamically generated table that takes attendance for students. The rows will expand with additional information about the student, if any part of the row is clicked. My problem is that if the attendance button (red x) is clicked, then the row expands, but the attendance is marked just fine.
I found a way to disable the last column (by giving all cells on the last column the same name and using some jquery to make it unclickable), but when doing that the buttons got disabled too.
Javascript/jQuery
$(function () {
//This is the line I used to disable the last column, but is affecting the buttons
$('td[name="attend"]').click(function () {
return false;
});
//the rest of the code is used for expanding each row
$("td[colspan=7]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
I have named all the cells in the last column "attend". Any help is much appreciated!
Upon Request, here is the code for each button. Each button is it's own form that is inside the last cell of every row.
php
echo "<td style=\"min-width:75px;\" name=\"attend\">";
echo "<form method=\"POST\" onSubmit=\"return new_user(this);\" >";
echo "<input type=\"hidden\" value=\"" . $row2['status'] . "\" name=\"astatus\" />";
echo "<input type=\"hidden\" value=\"" . $row2['cancel_key'] . "\" name=\"mark_attend\" />";
echo "<input type=\"image\" src=\"$image\" name=\"pic\" />";
echo "</form>";
echo "</td>";
Examine the target tag name like so:
alert($target.prop('tagName'));
It will be "TD" (or SPAN, or whatever is in the cell), or your button.