I am wondering about one thing.
Have a UI html table with two records and would like to click on a record only with exact value.
Something like for instance:
SELECT record WHERE tr data-user LIKE "testuser1"
Is it possible to do that in some simple way ?
<table class="table table-striped">
<thead>
<tr>
<th>
<input type="checkbox" disabled="">
</th>
<th data-sort="status">Status
<i class="fa fa-sort-"></i>
</th>
<th data-sort="name">Name
<i class="fa fa-sort-"></i>
</th>
<th data-sort="position">Position
<i class="fa fa-sort-"></i>
</th>
<th data-sort="userCode">ID
<i class="fa fa-sort-asc"></i>
</th>
<th data-sort="email">e-mail
<i class="fa fa-sort-"></i>
</th>
</tr>
</thead>
<tbody>
<tr data-user="testuser1">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.anpilov" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
</tr>
<tr data-user="testuser2">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.puchaujara" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
</tr>
</tbody>
</table>
Tried to do it like that:
getDriver().findElement(By.xpath("//div[#id='content'//div[#class='container'//table[#class='table table-striped'//following::tbody//tr[#data-user='testuser1']")).click();
but did not work ... :(
Maybe you can use xpath expression using value attribute. For example, to select certain element with id and value and click on it:
driver.findElement(By.xpath("//*[#id='" + yourId + "' and #value='" + yourValue + "']")).click();
Or a td whith a text inside (be aware that td tag has no value, it has a text inside):
driver.findElement(By.xpath("//td[text()='" + yourTdText + "']")).click();
If you can build an unique xpath to identify what you are looking for this should be your best option even if you don't know the id or the tag type.
Subject to close.
Final solution:
getDriver().findElement(By.xpath("//tr[#data-user='testuser1']")).click();
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm trying to add some text to an array that's dynamically outputted by my database. However, with the way my function is set up currently, it adds each value to it's own separate array. I need them to be pushed to the same array because I need to get the sum of all the numbers that are outputted.
This is my function to convert the text to a number and then push them to an array.
$(".sumCosts").each(function(){
let valuesArray = [];
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
console.log(valuesArray);
})
This is the HTML output. I'm interested in the <td> with class sumCosts, marked with *.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">analysts</td>
***<td class="text-end sumCosts">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">materials</td>
***<td class="text-end sumCosts">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">annual</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is what is logged to the console
[4091]
[6282]
[2873]
[1185]
[313]
I need to be able to put them into the same array so that I can get a sum of all the numbers. Any advice on how to achieve this is greatly appreciated! Thanks!
You had to just move valuesArray Outside the function nothing more !
Using vanilla js
JS
let ele = document.querySelectorAll(".sumCosts")
let ar = Array.from(ele)
let valuesArray = [];
ar.forEach(ele => {
let values = parseInt(ele.innerText.replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
jQuery
let valuesArray = [];
$(".sumCosts").each(function() {
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
I have following dataTable which has 6 columns.
After rendering the table I am initializing .DataTable(). But getting the error:
'mData' of undefined TypeError: Cannot read property 'mData' of undefined
As mentioned in few of the posts , I have added tfoot but still have the error.
$(document).ready(function() {
$('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>
You had 6 ths but had 7 tds in both of the rows. The number of th must match with the number of td. Adding a hidden th fixed it
$(document).ready(function() {
$('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th style="display:none"></th>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>
Number of headers thead tr th and number of cells in the tbody tr td should be same in each row(Same with the footer too). Once you do this this error will be removed.
'<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
<th>Some Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
<th>Some Heading</th>
</tr>
</tfoot>
'
How to iterate through multiple dropdowns in a grid in AngularJS for
selected value.Below is my code.Attached the sample grid UI .I wants to
iterate through each of the row values and form a array of objects.I have separate model for each dropdowns key and value pair.But not sure how to read those through iteration
<table class="filtertable" ng-show="FilterOptions">
<thead>
<th>And/Or</th>
<th>Field</th>
<th>Operator</th>
<th>Value</th>
</thead>
Here iterating through and binding drop downs
<tbody ng-repeat="m in FilterOptions">
<tr>
Here we are biding the drop downs
<td><select ng-model="AndOrmodel" ng-show="m.AndOr" ng-options="option for option in m.AndOr"></select></td>
<td> <select ng-model="Fieldsmodel" ng-options="o as o for o in m.Fields"></select></td>
<td> <select ng-model="Operatorsmodel" ng-options="Operator.OperatorName for Operator in m.Operators track by Operator.OperatorId"></select></td>
<td>
<select ng-model="OperFieldsmodel" ng-if="Operatorsmodel.indexOf('Field') > -1" ng-options="o as o for o in m.Fields"></select>
<input type="text" ng-if="Operatorsmodel.indexOf('Field') == -1 || Operatorsmodel==undefined" ng-model="m.SearchValue" />
</td>
<td>
<p>
<a href="#" ng-click="Add($index)" title="Add">
<span class="glyphicon glyphicon-plus"
style="color:green;"></span>
</a>
</p>
</td>
<td>
<a href="#" ng-click="Remove($index)" title="Remove
this filter line">
<span class="glyphicon glyphicon-minus"
style="color:red"></span>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<p>
<a href="#" ng-click="Add()" title="Add">
<span class="glyphicon glyphicon-plus" style="color:green"></span>Add new clasue
</a>
</p>
</td>
<td>
<input type="button" value="Save" ng-
click="SaveMasterSearch()" />
</td>
</tr>
</tfoot>
</table>
I have a form presented in a table and each row has two input fields and in the last row it has two buttons "add-more" and "submit"
<form>
<table>
<tbody>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="1">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="2">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="3">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="4">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
<td class="text-left" style="vertical-align: middle;">
<i class="fa fa-times"></i>
</td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td colspan="3">
<div class="widget_box_footer_section">
<i class="fa fa-plus"></i> Add More
<button type="submit" class="button meduim submit_button place-right" id="operator_submit" tabindex="7">
<i class="fa fa-paper-plane"></i> Submit
</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
when i click on add-more it adds the new row(there can be many rows, i have not included that javascript here i have hard-coded the form with two input rows) with two fields and a cross icon to remove that field.
and to remove that field i have a javascript function as
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').first().remove();
});
It is successfully removing that row, but i dont know where the focus is going , i want to fix this focus issue that when we remove the particular row, focus must go to the previous row's first input field
You need to use:
$(document).on('click','a.remove-operator-code',function() {
vat prevtr = $(this).closest('tr').prev();
if(prevtr.length)
prevtr.find('input:first').focus()
$(this).closest('tr').remove();
});
This will help you..
Demo:http://jsfiddle.net/ajnf988s/
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').prev('tr').find('input[type=text]:first').focus();
$(this).parents('tr').remove();
});
Can you please take a look at this example and let me know how I can use jquery to enable all inputs existing in the same row as Clicked "Edit" button .btn-edit class?
js:
$(".btn-edit").on("click", function(){
$(this).attr("disabled", true);
});
and HTML
<div class="container">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th>
Col 1
</th>
<th>
Col 2
</th>
<th>
Col 4
</th>
<th>
Col 4
</th>
<th>
Col 5
</th>
<th>
Col 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<button type="button" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-refresh"></span> Update
</button>
</td>
<td>
<button type="button" class="btn btn-danger" disabled="disabled">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
<td>
<button type="button" class="btn btn-warning btn-edit">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<button type="button" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-refresh"></span> Update
</button>
</td>
<td>
<button type="button" class="btn btn-danger" disabled="disabled">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
<td>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<button type="button" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-refresh"></span> Update
</button>
</td>
<td>
<button type="button" class="btn btn-danger" disabled="disabled">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
<td>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
</tbody>
</table>
You need to traverse to closest tr element, find inputs and buttons in it and set property disabled as false for them:
$(".btn-edit").on("click", function(){
$(this).closest('tr').find('input,button').prop('disabled', false);
});
Working Demo
you need this:
$(".btn-edit").on("click", function(){
$(this).closest('tr').find(':input').filter(':disabled').prop("disabled", false);
});
You can use .closest() to traverse up to the tr then find all the inputs with :input and filter them not to select the button elements which are enabled by default.
You can use .closest() to traverse upwards to tr then use .find() to find all inputs using :input.
Use
$(".btn-edit").on("click", function() {
$(this)
.closest('tr') //Travese to parent tr
.find(':input') //Find all input
.prop("disabled", false); //set diabled false
});
Try this
$(".btn-edit").on("click", function(){
$(this).closest('tr').find('input,button').prop('disabled', false);
});