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();
});
Related
Angular 1.6.2
Try to iterate over elements of collection inputted by user and then check their validity and enable submit action if validation passes.
I try to use ng-form for this purpose and have two approach but each of them has side-effect.
First approach (ng-form at the table level):
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40%>
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach submit is disabled until all input are in set ranges but validation messages don't appear.
Second approach (ng-form at the table column level):
<table class="datatable table table-stripped table-responsive">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40% ng-form="form">
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach validation messages appear but submit button is always enabled.
Could you tell me what I did wrong?
Give the inputs different names:
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column{{$index}}" width=40%>
̶<̶i̶n̶p̶u̶t̶ ̶i̶d̶=̶"̶p̶r̶o̶p̶o̶s̶e̶d̶-̶l̶d̶-̶i̶n̶p̶u̶t̶"̶ ̶n̶a̶m̶e̶=̶"̶i̶n̶p̶u̶t̶"̶
<input id="proposed-ld-input{{$index}}" name="input{{$index}}"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" ng-show="form['input'+$index].$error.required">
Message required
</div>
<div class="error" ng-show="form['input'+$index].$error.max">
Message max
</div>
<div class="error" ng-show="form['input'+$index].$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
The ng-repeat creates multiple inputs. They need to be assigned different names for the error messages to be correct.
Im having trouble getting data from a html table all the other tutorials have text inside the td tag but I have a textfield and a textarea which I want to get the value of
I have tried
<script>
$(document).ready(function() {
//click on table body
$(".rubric_table tbody tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $.trim($(this).text());
}).get();
var td = tableData[0]+'*'+tableData[1]+'*'+tableData[2]+'*'+tableData[3]+'*'+tableData[4];
})
})
</script>
And this is my table
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I expected that my code would alert the values of the textfield and textarea but it doesn't.
Thanks
If you wan to get the values of the input, you can:
$(".rubric_table>tbody>tr") you have to use this selector in
adding click event. You have a table inside the table (I dont think
is ideal). To make sure you are only adding event on the direct tr
of .rubric_table
You have to loop thru each input of th and get their values.
$(".rubric_table>tbody>tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $(this).find('input').map(function() {
return this.value;
}).get();
}).get();
console.log(tableData);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I want to get the value of first <td> of the row that the clicked element exist in it. here is the code I use:
The result is "undefined" when function is triggered. where do i wrong?
function verifyOfflinepayment() {
$("#verifying").show();
alert($(this).closest('tr').find('td').eq(0).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>$paymentId</td>
<td>
<a href='#modal$i'>مشاهده رسید</a>
</td>
<td onclick='verifyOfflinepayment()'>
$persian_date
</td>
<td>
<div class='pretty p-icon p-round p-pulse'>
<input type='checkbox' />
<div class='state p-success'>
<i class='icon mdi mdi-check'></i>
<label>تایید</label>
</div>
</div>
</td>
</tr>
</table>
try this
function verifyOfflinepayment(event) {
$("#verifying").show();
alert($(event).parent().find('td').eq(0).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>$paymentId</td>
<td>
<a href='#modal$i'>مشاهده رسید</a>
</td>
<td onclick='verifyOfflinepayment(this)'>
$persian_date
</td>
<td>
<div class='pretty p-icon p-round p-pulse'>
<input type='checkbox' />
<div class='state p-success'>
<i class='icon mdi mdi-check'></i>
<label>تایید</label>
</div>
</div>
</td>
</tr>
</table>
You need to pass the reference of the clicked element in the verifyOfflinepayment function like verifyOfflinepayment(this). Currently $(this) references your window object so you are getting undefined.
function verifyOfflinepayment(elem) {
$("#verifying").show();
alert($(elem).closest('tr').find('td:eq(0)').html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>$paymentId</td>
<td>
<a href='#modal$i'>مشاهده رسید</a>
</td>
<td onclick='verifyOfflinepayment(this)'>
$persian_date
</td>
<td>
<div class='pretty p-icon p-round p-pulse'>
<input type='checkbox' />
<div class='state p-success' >
<i class='icon mdi mdi-check' ></i>
<label>تایید</label>
</div>
</div>
</td>
</tr>
</table>
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);
});
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();