I want to allow the user to click on the link (fa fa-pencil - acts as an edit row link) which is available at the end of each row, (and the rows are entered by the user, therefore have only written HTML code for the headings). When the user clicks on this only that particular row should be made editable to the user
and then clicking enter on the keyboard should change it back to non editable again. I am unsure how to write the JavaScript for this, my HTML is below
<div class = "Data">
<div class ="searchBar">
<input type = "search" name = "search" id = "search">
<i class = "fa fa-search"></i>
<button id = "delete">Delete Selected</button>
</div>
<table style ="width:95%" class = "Info">
<thead>
<tr>
<th>Select </th>
<th>Name</th>
<th>Number</th>
<th>Date of Birth</th>
<th><i class = "fa fa-pencil"></i></th>
</tr>
</thead>
</table>
</div>
Please help, would be highly appreciated.
You should find out more about html attribute contenteditable=true. So you can do like that: $('your_th').attr('contenteditable','true');
Find out more about it here: http://www.w3schools.com/tags/att_global_contenteditable.asp
Related
I have a HTML table for which i have delete button for each row.
Clicking on the delete button, it goes to javascript and I remove the row using below code . When I try to submit the table content back to the controller using the submit (Ajax.beginform), it is sending back the data only above the deleted row, and nothing below the deleted row. Even though in the UI, it is still showing all the rows above and below the deleted row.
Example: Lets say if I upload 3 documents, and delete the middle one, it will remove the row from the table but when I click on the Upload button, I get only the first row.
But if I delete the last row, 3rd document, then I am getting back above 2 documents properly in my Upload button action.
Thanks in advance for your help
javascript code:
function removeDocument(selector) {
$(selector).closest('tr').remove();
}
HTML code:
#using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions { HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" }))
{
<table class="table table-bordered" id="DocumentTable">
<thead>
<tr>
<th><span class="reqAsterisk">* </span>Document Title</th>
<th></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td style="width: 50%; display:none" class="nr" >
#Html.TextAreaFor(m => Model.FileName, htmlAttributes: new { #class = "form-control dmm-autoresize", #rows = "1" })
</td>
<td>
<a style="color:red; cursor:pointer" onclick="removeDocument(this)">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
<input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/>
}
This is after deleting the row
This is before deleting the row
if you are using form then you have refresh your form, you can also try to name the input types name with array like username[].
I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >
I have an inventory page that also contains a password field.
I would like to hide the password when the page is loaded, best would be to have points displayed **** and after click password is shown or a pop up.
JS
var get_cert = function () {
$http.get($scope.url.cert_list).then(
function (response) {
$scope.certs = response.data;
}
);
}
// execute get function
get_cert();
HTML
<div class="panel panel-default">
<table class="table table-striped valign_middle">
<tr class="table_header">
<td>Name</td>
<td>Pass</td>
</tr>
<tr ng-repeat="cert in certs | filter:search | orderBy:['name']">
<td>{{cert.name}}</td>
<td>
<button class="w3-btn w3-black w3-hover-green w3-ripple" ng-click="get_cert()">Show</button>
<span ng-show="get_cert()">{{cert.password}}</span>
</td>
</tr>
</table>
<button ng-show="!cert.showPw" class="w3-btn w3-black w3-hover-green w3-ripple" ng-click="cert.showPw = true">Show</button>
<span ng-show="cert.showPw">{{cert.password}}</span>
You can use ng-click to do cert.showPw = true, which will append a property called showPw (a boolean) to the object. Combined with ng-show, you can easily switch between the two.
This way you'll keep your controller free of any additional logic needed. You may include ng-click on the span which holds the password which will set showPw = false to switch it back to a button.
See my JSFiddle for full example.
Create a input
<input type="password" name="???">
Then you can change its type to "text" with
$("#idOfInout")type = 'text';
I am having a table with so many rows which is also having a button in each row , so I put its Id dynamically like id=#gunDetails.SerialNo(for each row its different) and its name I gave as name="popoverselect" So now I want to get this dynamic Id . How can i get it I need the Id in my popup which will open when I click on that button.
I have tried `
var getVal = $('[name="popoverselect"]').attr(id);
but its not working, any help will be appreciated.
Edit
<td class="text-center">
<div class="btn-group">
<i class="fa fa-pencil"></i>
</div>
</td>
This is my button which will show the popover so when I am trying
var getVal = $('[name="popoverselect"]').attr("id");
I am only getting the id of my first row
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button id="1593" onclick="alert($(this).attr('id'))">Button 1</button>
</td>
</tr>
<tr>
<td>
<button id="1678" onclick="alert($(this).attr('id'))">Button 2</button>
</td>
</tr>
</table>
You can select element by name like this
$("[name='popoverselect']");//select all elements with name equal to 'popoverselect'
$("[name*='popoverselect']");//select all elements with name contains 'popoverselect'
$("[name^='popoverselect']");//select all elements with name start with 'popoverselect'
And to get id use $("[name='popoverselect']").attr("id");
so for your example .attr(id) JQuery will look to id as variable witch not defined
var id = "id";
$("[name='popoverselect']").attr(id);//this will work
I'm trying to use jQuery to capture the value of two cells from a table. My table looks like this:
<table id="searchByLocationResults" class="table table-hover table-striped" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">View Detail</th>
<th scope="col">Quantity</th>
<th scope="col" style="display:none;">Location ID</th>
<th scope="col" style="display:none;">Item Type ID</th>
</tr>
#For Each item In Model
Dim currentItem = item
#<tr>
<td><a class="btn btn-default btn-sm" onclick="viewDetails(this)">View Detail</a></td>
<td>
#Html.DisplayFor(Function(modelItem) currentItem.COUNT)
</td>
<td style="display:none;" class="locationID">
#Html.DisplayFor(Function(modelItem) currentItem.Unique_Location_ID)
</td>
<td style="display:none;" class="itemType">
#Html.DisplayFor(Function(modelItem) currentItem.Item_Type_Identifier)
</td>
</tr>
Next
</tbody>
</table>
As you can see there is a 'view details' button on each row. What I need to do is capture the display:none values in the cells with class=locationID and class=itemType when the button is clicked, only for the row that the button is clicked on. I have seen multiple solutions on stack over flow here, here and quite a few others. Most of these are dealing with capturing an entire row of values.
I have tried a few different scripts:
function viewDetails(clickedRow) {
var locationID = $(this).find(".selected td:.locationID").val();
alert(locationID);
and:
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").val();
alert(locationID);
as well as a few others.
How do you capture the values of the cells locationID and itemType for the row that 'View Details' is clicked on?
I would say to try the index. This only works if the buttons and text areas have unique classes so the count works correctly. Then once you have the index use the eq() to get the data.
var index = $(".btn-sm").index();
var locationId = $(".locationID").eq(index).text();
You are almost there. You just need to use the .text() method in Jquery
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").text();
alert(locationID);