I'm writing an script extension for a website for Greasemonkey (or Tempermonkey). The problem occurred when I wanted to autofocus (or even autoclick) the button that contains no id, but rather data- attribute.
<div id="wrapper_container">
<form id="form1" action="/?module=Action" method="post">
<table class="thinline" align="center">
<tbody>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="184">Go</button></td>
</tr>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="185">Go</button></td>
</tr>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="186">Go</button></td>
</tr>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="187">Go</button></td>
</tr>
</tbody>
</table>
</div>
</div>
Already tried numerous of times but got me nowhere and wondering why this is not working:
$("#wrapper_container button:eq(4)").focus();
tried to select 4th (or in future nth) button in div, but got unlucky.
I want, for example, button with data-value "186" to be either focused or clicked on pageload. Since I got more entries than displayed, I'd like to do so for every nth button that I'd choose.
Thanks in advance.
If your need just focus in static way button with data-value = 186, use this:
$("#wrapper_container button:eq(2)").focus();
Look this example with more control, just pass the value of you want:
$('#wrapper_container button').each(function() {
var dataValue = $(this).data("value");
if (dataValue == 186) {
$(this).focus();
}
});
button:focus {
background: limegreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="wrapper_container">
<form id="form1" action="/?module=Action" method="post">
<table class="thinline" align="center">
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>Surname</td>
<td>E-mail</td>
<td>Phone Number</td>
<td>Contact</td>
<td>
<button class="btn btn-small" data-info="contact" data-value="184">
Go
</button>
</td>
</tr>
<tr>
<td>1</td>
<td>Name</td>
<td>Surname</td>
<td>E-mail</td>
<td>Phone Number</td>
<td>Contact</td>
<td>
<button class="btn btn-small" data-info="contact" data-value="185">
Go
</button>
</td>
</tr>
<tr>
<td>1</td>
<td>Name</td>
<td>Surname</td>
<td>E-mail</td>
<td>Phone Number</td>
<td>Contact</td>
<td>
<button class="btn btn-small" data-info="contact" data-value="186">
Go
</button>
</td>
</tr>
<tr>
<td>1</td>
<td>Name</td>
<td>Surname</td>
<td>E-mail</td>
<td>Phone Number</td>
<td>Contact</td>
<td>
<button class="btn btn-small" data-info="contact" data-value="187">
Go
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
To get the 4th one, you need eq(3) as it is a zero-indexed array.
Here are some examples that should get you on your way:
$(function(){
// extra bit of code to 'prove' each button is beaing clicked
$('#wrapper_container button').on('click', function(e) {
console.info('Button clicked, I am button with data value: ' + $(this).attr('data-value'));
});
// You know the IDs of the buttons, you could do:
let IDs = [186, 187];
IDs.forEach(ID => {
console.info('Clicking button with data-value = ' + ID);
$('[data-value=' + ID + ']').click();
});
// You just need a single ID:
let ID = 187;
console.info('Clicking single button with data-value = ' + ID);
$('[data-value=' + ID + ']').click();
// Select nth button in your container,
// as you are trying the 4th button, we use 3, because it is a zero-indexed array, starting at 0 of course:
let btn = $('#wrapper_container').find('button:eq(3)');
console.info('Clicking 4th button in #wrapper_container');
btn.click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper_container">
<form id="form1" action="/?module=Action" method="post" onsubmit="return false">
<table class="thinline" align="center">
<tbody>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="184">Go</button></td>
</tr>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="185">Go</button></td>
</tr>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="186">Go</button></td>
</tr>
<tr>
<td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
<td><button class="btn btn-small" data-info="contact" data-value="187">Go</button></td>
</tr>
</tbody>
</table>
</form>
</div>
Related
I have a page with a table containing customer data like customer name, quantity, price, and status. The Table looks like this:
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I want to hide the Update button based on condition. Let's say the status is "Delivered", then the Update button does not appear. So I create a jQuery file like this:
$(".status-order").each(function() {
const status = $(this).text()
if (status == "Delivered"){
$(".update").hide()
console.log(true)
} else {
$(".update").show()
console.log(false)
}
})
After I try to refresh the page to see the result, the update button in each rows are hide. I know my jQuery that i create it's wrong, can you give me correct answer how to fix this? Thank you.
$(".update").hide() or $(".update").show() will both iterate through all elements matching .update and hide or show them. You only want to hide or show the .update that's in the current table row.
The .status-order you're iterating over is in a prior <td>, so use .next() to get to the next <td>, and then use .find('.update') on that to get to the descendant.
$(".status-order").each(function() {
const status = $(this).text();
const update = $(this).next().find('.update');
if (status == "Delivered") {
update.hide()
} else {
update.show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I have a dynamic table and I want to be able to replace an entire row with data from another page.
I want to be able to replace the data over and over again without refreshing the page. I have made a fiddle here but can't understand why $("#rowid").replaceWith(newdata);does not seem work. If I change this to $("#2").replaceWith(newdata); then row 2 with id=2 gets replaced as expected.
What have I got wrong? Many thanks.
html
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
Jquery
$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>'; //Data to be replaced
alert(rowid);
$("#rowid").replaceWith(newdata); //Replace clicked row with data
});
It's because "#rowid" is a string literal.
Try: $("#"+rowid)
You need to access your variable.
The immediate issue is because rowid is a variable, yet you are using it as a string literal. You need to fix this by concatenating the value of the variable to the selector:
$('#' + rowid).replaceWith(newdata);
$('#data_table').on("click", "tr", function() {
var btnid = $(this).attr("id"); //Find button ID
var rowid = $(this).closest('tr').attr("id"); //Find row ID
var newdata = '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
$('#' + rowid).replaceWith(newdata);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="table" id="1">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" id="btn3" class="add-row">Replace Row</button></td>
</tr>
</tbody>
</table>
</div>
That being said, the pattern of using incremental id attributes on each and every tr is not a good idea. For a start it makes the HTML harder to maintain and the JS needlessly complex.
A much better approach is to use DOM traversal to find the tr related to the clicked button. You can also place the HTML content to be used as the source within the DOM so that the HTML and JS are not coupled too closely. With those points in mind, try this:
$('#data_table').on("click", ".add-row", function() {
var $newdata = $('#data_table tr.clone').clone().removeClass('clone');
$(this).closest('tr').replaceWith($newdata);
});
.clone {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table">
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="clone">
<td></td>
<td class="prod">10</td>
<td class="prod">11</td>
<td class="prod">12</td>
<td><button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">First cell</td>
<td class="prod">Second cell</td>
<td class="prod">Third Cell</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Fourth Cell</td>
<td class="prod">Fifth cell</td>
<td class="prod">Sixth Cell</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
<tr class="table">
<td></td>
<td class="prod">Seventh</td>
<td class="prod">Eighth</td>
<td class="prod">Ninth</td>
<td> <button type="button" class="add-row">Replace Row</button></td>
</tr>
</tbody>
</table>
</div>
Instead of $("#rowid") you need to use $("#"+rowid) since rowid is the variable not a selector.
/* Latest compiled and minified JavaScript included as External Resource */$('#data_table').on("click", "tr",function(){
var btnid= $(this).attr("id");//Find button ID
var rowid= $(this).closest('tr').attr("id");//Find row ID
var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>';
//alert(rowid);
$("#"+rowid).replaceWith(newdata);
});
//$("#"+btn).click(function(){
// });
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
<tbody>
</table>
</div>
I want to change a row from a table to another but I want to replace the addBtn for a removeBtn.
dataTableTeamMembers is the other table
$('.addBtn').click(function() {
var row = $(this).closest('tr');
console.log(row[1]);
$('#dataTableTeamMembers tbody').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="text-center hover-table odd" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
update your js code with this.
$('.addBtn').click(function () {
var row = $(this).closest('tr');
console.log(row[0]);
$('#dataTableTeamMembers tbody').append(row[0].innerHTML);
});
$('.addBtn').click(function() {
var row = $(".tbl .tbltr").html();
console.log(row[1]);
$('.tbl').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='tbl'>
<tr class="text-center hover-table odd tbltr" role="row">
<td class="sorting_1"><img class="avatarImage" src="data:image/jpg;base64,iVBORw"></td>
<td>johns</td>
<td>John Smith</td>
<td>Member</td>
<td>
<button type="button" class="btn btn-primary addBtn"> Add</button>
</td>
</tr>
</table>
I am working on a project and have an idea but not sure how to accomplish (new to PHP/JS).
Basically, I have a table within a form with one row being a checkbox. I would like to check the box(es) and when the form is submitted it sends the values of each column in the selected rows.
For example:
1 - Domain | MatchedTo | Percentage | Checkbox
2 - Domain | MatchedTo | Percentage | Checkbox
If row 1 is checked I would like the submit to POST the domain, matchedto and percentage values.
Here is what I have so far:
<script type="text/javascript">
$('#test-form').submit(function(event) {
event.preventDefault();
var buttonAction = event.originalEvent.explicitOriginalTarget.value;
var formData = $(this).serialize();
var varData = formData + "&action=" + buttonAction;
$.ajax({
type: 'POST',
url: 'test_submit.php',
data: varData,
success: function() {
window.location.reload(true);
console.log("Form posted successfully.", varData);
}
})
});
</script>
<form method="POST" id="test-form">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Ratio</th>
<th>Domain</th>
<th>Matched</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="6" role="row" class="odd">
<td>50</td>
<td class="sorting_1">www.test.com</td>
<td class="sorting_1">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test.com" type="checkbox"></td>
</tr>
<tr id="6" role="row" class="odd">
<td>50</td>
<td class="sorting_1">www.test2.com</td>
<td class="sorting_1">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test2.com" type="checkbox"></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
<button class="btn btn-danger" type="submit" value="delete"><span class="fa fa-times">Delete Selected</span></button>
<button class="btn btn-warning" type="reset" value="reset"><span class="fa fa-times">Clear Selected</span></button>
</form>
I am assuming I need to create an input field for each column? How do I go about POSTing all of these fields when a box is checked?
Thank you for any assistance.
If you're going to submit via ajax, you'll probably want to create the string you'll be submitting. Something like the following may be a starting-point, if I understand what you're trying to do.
Note that this doesn't address actually sending the data, it's simply about how to hijack the form and create the format you're looking for.
// First, I'm stopping the default behaviors
$("button").on("click", function(event){
event.stopPropagation();
event.preventDefault();
})
// Now, when we click save, I want to format
// a string.
$("button[value='save']").on("click", function(){
var returnString = "";
// The following selector gets all the rows
// that have a CHECKED checkbox. Note I
// don't get the checkbox, simply the row.
var rowEls = $("#test-form").find("tr:has(input[type='checkbox']:checked) ");
// For every row, we'll add to our string...
rowEls.each(function(){
var rowEl = $(this);
// First, a row id
returnString += rowEl.attr("id")+" - ";
var cells = rowEl.children("td");
// Next the contents of each cell THAT
// HAS A data-content ATTRIBUTE. This
// way, we don't get the remove/keep.
cells.each(function(){
if($(this).data("content")){
returnString += $(this).data("content")+"="+$(this).text();
if($(this).not(":last"))
returnString += " | ";
}
})
returnString += " ";
})
console.log(returnString);
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="test-form">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Ratio</th>
<th>Domain</th>
<th>Matched</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="6" role="row" class="odd">
<td data-content="ratio">50</td>
<td class="sorting_1" data-content="domain">www.test.com</td>
<td class="sorting_1" data-content="matched">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test.com" type="checkbox"></td>
</tr>
<tr id="6" role="row" class="odd">
<td data-content="ratio">50</td>
<td class="sorting_1" data-content="domain">www.test2.com</td>
<td class="sorting_1" data-content="matched">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test2.com" type="checkbox"></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
<button class="btn btn-danger" type="submit" value="delete" disabled><span class="fa fa-times">Delete Selected</span></button>
<button class="btn btn-warning" type="reset" value="reset" disabled><span class="fa fa-times">Clear Selected</span></button>
</form>
I have a table structured as below, I want the user onclick on view details button to get the value of the order id and the value of the selected option from the combobox in an array to use it in ajax to update the database, how can this be done?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
</tr>
</tbody>
</tr>
</table>
in html:
onclick="ViewDetails(this)"
js:
function ViewDetails(_el){
var orders_id=$(_el).parent().parent().find("td:first").html();
alert(orders_id);
////////...........
}
This might be what you're looking for. This will get the id and the selected value of the select from the row of witch the pressed button.
function ViewDetails(obj) {
var $obj = $(obj);
var id, option;
id = $obj.closest("tr").find("td:eq(0)").text();
option = $obj.closest("tr").find("td:eq(2) select").val();
console.log(id + " | " + option)
}
Please note that I added this to onclick="ViewDetails()", onclick="ViewDetails(this)"
Demo
function ViewDetails(obj) {
var $obj = $(obj);
var id, option;
id = $obj.closest("tr").find("td:eq(0)").text();
option = $obj.closest("tr").find("td:eq(2) select").val();
console.log(id + " | " + option)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
</tr>
</tbody>
</tr>
Add a common class to each of the td containing orderId and a common class to each of the select element. Then use jquery to find the parent tr & use find method to to get the values
function viewDetails(elem) {
// finding parent tr and then the td for orderId
var orderId = $(elem).parent().parent().find('.odId').text().trim();
// get selected option from dropdown
var selectedOption = $(elem).parent().parent().find('.selected').val();
console.log(orderId, selectedOption)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="odId">4</td>
<td>Jack</td>
<td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails_1" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
</tr>
<tr>
<td class="odId">5</td>
<td>Adel</td>
<td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails_2" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
</tr>
<tr>
<td class="odId">6</td>
<td>Aly</td>
<td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails_3" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
</tr>
</tbody>
</table>
Try this
$(document).on('click', '.view_details', function(){
p = $(this).parents("tr")
order_id = p.find("td:first").html()
select_value = p.find("select").val()
alert("order_id:"+order_id+" selected:"+select_value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
</tr>
</tbody>
</tr>
Change onclick="ViewDetails()" to onclick="ViewDetails(this)", this way you'll pass DOM element to your function.
Now your function:
function ViewDetails(buttonEl) {
var row = buttonEl.closest('tr'); // here you'll get your row
var orderId = row.getElementsByTagName('td')[0].textContent; //order id
var status = row.getElementsByTagName('select')[0].value; //status
}
function ViewDetails(buttonEl) {
var row = buttonEl.closest('tr'); // here you'll get your row
var orderId = row.getElementsByTagName('td')[0].textContent; //order id
var status = row.getElementsByTagName('select')[0].value; //status
console.log(orderId + ' ' + status);
}
<table>
<tr>
<thead>
<tr>
<th>Order No.</th>
<th>Customer Name</th>
<th>Order Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Jack</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
</tr>
<tr>
<td>5</td>
<td>Adel</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
</tr>
<tr>
<td>6</td>
<td>Aly</td>
<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
</tr>
</tbody>
</tr>