I have an editable table It works fine, but i have to hide editable row and show that on button click
for example. how I can do this?
<td contenteditable='true'>
<label class="text">
<input type="text" ng-model="medication.description" ng-change="editMedication(medication)"/>
{{medication.description}}
</td>
<td>
<label for="edit">
<input type="button" id = "edit" ng-model="medication" ng-change="editMedication(medication)" >
</label>
</td>
</tr>
</table>
you should use angular-xeditable, using this you will be able to create table Editable column, Editable row and Editable table
Related
Using angularjs here.
I have a table where using adds dynamic rows consisting of 2 inputs text on clicking the(+) button. Once they are done adding rows on the Done (submit) button I want to validate the inputs. I do see my validation is firing fine but its not highlighting the row which has error. Here is my code:
<table class="table table-borderless" ng-if="options.length>0">
<thead>
<tr>
<td class="bold">Key</td>
<td class="bold">Value</td>
</tr>
</thead>
<tbody style="border: none;">
<tr ng-repeat="m in options">
<td ng-class="{ 'has-error': paramForm['ctrlKey_' + {{$index}}].$invalid && (paramForm['ctrlValue_' + {{$index}}].$touched || paramForm.$submitted) }">
<input type="text" name="ctrlKey_{{$index}}" class="form-control" ng-model="m.optionText" required />
</td>
<td>
<input type="text" class="form-control" ng-model="m.optionValue" required />
</td>
<td>
<a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
I thought adding the below line would make my TD highlight to red but this does not work.
ng-class="{ 'has-error': paramForm['ctrlKey_' + {{$index}}].$invalid && (paramForm['ctrlValue_' + {{$index}}].$touched || paramForm.$submitted) }"
Anything missing here?
Updated:
I have created a jsfiddle: http://jsfiddle.net/aman1981/uk21soj6/11/
First move your buttons inside your form.
Secondly the name of the input you defined does not match to the one used in the TD ng-class
Correct these and let know.
They added a new feature to HTML5 that does input validation. You simply add the following to any input tag:
<input required>
Documentation and Example
https://www.wufoo.com/html5/required-attribute/
HTML:
<tr>
<td>
<div class="input">
<p>Room 1: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room1rev" size="1" placeholder="0">
</div>
</td>
<td>
<button id="btn-del-rev" class="btn-del">-</button>
</td>
</tr>
<tr>
<td>
<div class="input">
<p>Room 2: </p>
</div>
</td>
<td >
<div class="revenue-input">
<input type="number" min="0" id="room2rev" size="1" placeholder="0">
</div>
</td>
<td>
<button id="btn-del-rev" class="btn-del">-</button>
</td>
</tr>
jQuery:
<!-- Delete Element -->
<script>
$(document).ready(function() {
$("#btn-del-rev").click(function() {
$(this).parent().parent().remove()
});
});
</script>
When the button with the #btn-del-rev id is clicked it removes the entire tr structure (parent, etc.) However, clicking the same button on the next row doesn't remove the next tr.
I understand that it's a problem with reusing an id, but I'm having a hard time figuring out how to have the button work across all tr that I want deleted without creating a unique id, and redundant jQuery code.
Any help is appreciated!
An ID must be unique !
Change or remove the ID attribute in your HTML
<button class="btn-del">-</button>
And use the .class attribute instead
$(".btn-del").click(function() {
By the way, instead of .parent().parent(), you should use .closest()
$(this).closest('tr').remove()
get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
jQuery Closest documentation
ID's can't be repeated in a page, they are unique by definition.
You need to change that to a class instead
You're using IDs and for multiple buttons you should use CLASS names. So you better transform that btn-del-rev to a class.
The IDs must be unique, so you may change them to class.
In order to remove only the parent div you need to change this line:
$(this).parent().parent().remove()
to:
$(this).closest('tr').find('div.revenue-input').remove()
The .closest('tr') selects the parent row, while the find selects the div.
The snippet:
$(document).ready(function () {
$(".btn-del-rev").click(function () {
$(this).closest('tr').find('div.revenue-input').remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<div class="input">
<p>Room 1: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room1rev" size="1" placeholder="0">
</div>
</td>
<td>
<button class="btn-del-rev btn-del">-</button>
</td>
</tr>
<tr>
<td>
<div class="input">
<p>Room 2: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room2rev" size="1" placeholder="0">
</div>
</td>
<td>
<button class="btn-del-rev btn-del">-</button>
</td>
</tr>
</tbody>
</table>
Make the id a class
<button class="btn-del-rev btn-del">-</button>
Use the class, then get closest row
$(document).ready(function() {
$(".btn-del-rev").on('click',function() {
$(this).closest("tr").remove();
});
});
OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)
Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>
I have table rendered by Apex code in salesfoce.
<div id="wrap" style=""><fieldset style="border: none;"><table role="presentation" style="">
<tbody><tr>
<td>
<input type="radio"value="Casual"><label for="j_id0:j_id2:j_id4:j_id112:0"> CASUAL</label></td>
<td>
<input type="radio" value="BUSINESS CASUAL"><label for="j_id0:j_id2:j_id4:j_id112:1"> BUSINESS CASUAL</label></td>
<td>
<input type="radio" value="Semi-Formal"><label for="j_id0:j_id2:j_id4:j_id112:2"> SEMI-FORMAL</label></td>
<td>
<input type="radio" value="Formal"><label for="j_id0:j_id2:j_id4:j_id112:3"> FORMAL</label></td>
<td>
<input type="radio" value="Costume"><label for="j_id0:j_id2:j_id4:j_id112:4"> COSTUME</label></td>
<td>
<input type="radio" value="Other"><label for="j_id0:j_id2:j_id4:j_id112:5"> OTHER</label></td>
</tr>
</tbody></table></fieldset>
</div>
I need to break the row after third label . which means three inputs/labels in one row.
I can use jQuery. I have tried everything like injecting closing </tr> tag after third input via innerHTML etc . But nothing seems to work .
Try to manipulate the DOM a little bit,
$('<tr>').append($('tr td:gt(2)')).appendTo('tbody');
DEMO
currently I'm learning the AngularJS. I have a problem in autofocusing an element.
My idea is:
If a span element is clicked, it is hid and it triggers the input element to appear (with autofocus).
Here is the code that I've made so far:
<table>
<thead>
<tr>
<th>Words</th>
</tr>
</thead>
<tr>
<td ng-if="!edit" class="animate-if">
<span ng-click="$parent.edit = true" style="border: none;"> Some words </span>
</td>
<td ng-if="edit" class="animate-if">
<input type="text" value="Some words" ng-blur="$parent.edit = false" style="background: #d7d7d7;">
</td>
</tr>
</table>
I have it working, but the input text element is not automatically focused immediately after it appears. I've read some reference in show/hide and autofocusing input text element using directive. But they don't really helpful for me.
Thanks for your response.
try this
<input type="text" value="Some words" ng-focus="$parent.edit = true" ng-show="$parent.edit = true" style="background: #d7d7d7;">