I have a prblem with fetching the right value from a Td element. I can get the first element in the table when im clicking on that element but no other row is working. My code is looking like this:
<div id="Users">
<table id="UserTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th name="id">ID</th>
<th name="UserName">Användarnamn</th>
<th>Installation</th>
<th>Säljföretag</th>
</tr>
</thead>
<tbody>
#foreach (var users in Model.AdminUsers)
{
<tr>
<td id="userId">#users.Id</td>
<td id="userName" >
<a id="userIds"href="#backdropreport" class="">#users.UserName </a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
</tbody>
</table>
</div>
And my Jquery code:
$("#userName").click(function () {
var id = $("#userId").text();
$("#user").val(id);
});
Model content dialog
<div id="backdropreport">
<div class="modal-content">
<div class="header">
<h3>Återställ lösenord</h3>
</div>
#using (Html.BeginForm("ResetPassword", "Users", FormMethod.Post))
{
<div class="copy">
<div class="form-group">
<div class="m-form-item">
För att återställa lösenordet så tryck på återställ så kommer ett mail skickas med ett nytt lösenord
</div>
<div style="clear: both;">
</div>
<div class="m-form-item">
<input type="submit" id="reset" value="Återställ" class="btn btn-primary" />
<a id="close" href="#" class="btn btn-grey">Stäng</a>
</div>
<div class="m-form-item">
</div>
</div>
<input type="text" id="user" name="user" />
</div>
}
</div>
<div class="overlay"></div>
The thing i want to do is to fetch the id of a specific td element when a user is clicking on the username. At the moment just the first element in the table is working. Any suggestions?
Html attribute "id" should be unique, but when you're doing foreach loop, then in all rows < td > element has id="userId". I would recommend you adding userId to html id attribute:
<tbody>
#foreach (var users in Model.AdminUsers)
{
<tr>
<td id="userId_#users.Id">#users.Id</td>
<td id="userName_#users.Id" >
<a id="userIds"href="#backdropreport" class="">#users.UserName </a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
</tbody>
An id is supposed to be unique through the whole DOM document. You can use classes instead, and use the .class selector.
#foreach (var users in Model.AdminUsers) {
<tr>
<td class="userId">#users.Id</td>
<td class="userName">
<a class="userIds" href="#backdropreport">#users.UserName</a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
$(".userName").click(function() {
var userId = $(this).siblings(".userId").text();
alert(userId);
});
Related
how do I display my array "employee" to this table?
the idea is to display each name with on button on the side.
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<tr class="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-list" width="70%">{employees}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01"
data-clear-btn="false"
style="background: #006b54; color:white !important ;"
id="{id}-inspectSelected">
</button>
</td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closePopup()">Close</button>
</div>
</div>
js
var employees = ['usera', 'userb', 'userc'];
Check out these lessons by W3 Schools:
Creating elements: https://www.w3schools.com/jsref/met_document_createelement.asp
Changing Inner Html: https://www.w3schools.com/jsref/prop_html_innerhtml.asp
well i have a html table, and a button next to it, i try to get the id from the table when the user click that button.
This is the HTML
<table id="table_domExtra2_pro" class="col m12 bordered striped centered ">
<thead>
<tr>
<th>No.</th>
<th>PROPIETARIO DEL INMUEBLE</th>
<th>REGIMEN DE PROPIEDAD</th>
<th>COMO SE ACREDITA LA <br>POSESION DE LA PROPIEDAD</th>
<th>SUPERFICIE DE <br>LA UNIDAD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="count">
</td>
<td>
<input name="propietario" id="propietario" type="text" class="validate" required>
</td>
<td>
<input name="reg_propiedad" id="reg_propiedad" type="text" class="validate" required>
</td>
<td>
<input name="pose_propiedad" id="pose_propiedad" type="text" class="validate" required>
</td>
<td>
<input name="sup_unidad" id="sup_unidad" type="text" class="validate" required>
</td>
</tr>
</tbody>
</table>
<div class="add_icon col s1 m6 ">
<a id="btn_agregar_pro" class="btn waves-effect red">Agregar</a>
</div>
<div class="add_icon col s1 m6 ">
<a id="btn_eliminar_pro" class="btn waves-effect red">Eliminar</a>
</div>
This is the js
$('#btn_eliminar_pro').on("click", function(){
var idTable3 = $(this).parent().closest("table").attr("id");
var trs4 = $("#"+idTable3+" tr").length;
if(trs4 > 2){
$("#table_domData_pro tr:last").remove();
$("#table_domExtra_pro tr:last").remove();
$("#table_domExtra2_pro tr:last").remove();
}
});
I try with .prev() to, but Im really lost, i have other tables in the document and the js just select other table, not the one previus to the button, thanks a lot for your help :D
Use siblings() of the div to find the closest table. The below gets the id of the table. I have just added siblings() to your existing code.
var idTable3 = $(this).parent().siblings().closest("table").attr("id");
I would like to implement the live search through my table but I'm not using datatable in here. I copied the js that I've found in the internet and when I tried to search something, it doesnt return any result. Why? Can anyone help me?
My view
#extends('layout.default')
#section('content')
<br><br>
<br><br>
<div class="container">
<h4>Live Search using Laravel</h4>
<div class="col-md-6 col-lg-6 pull-right" >
<p class="pull-right">Click on the zip logo to download the file:<p>
<a href="/live_search_laravel.zip" download="live-search(laravel).zip">
<br><br>
<img border="0" src="/images/ziplogo.png" class="pull-right" alt="AngularJS" width="50" height="42">
</a>
</div>
</div>
<br>
<div class="col-md-7 col-lg-6 pull-right">
<input type="text" class = "form-control" id="search" placeholder="Live Search"></input>
</div>
<br><br>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_content">
<table class="table table-hover">
<thead>
<tr>
<th>
Change File Name
</th>
<th>
Original File Name
</th>
<th>
File Extension
</th>
<th>
Category
</th>
</tr>
</thead>
<tbody>
#foreach($data as $filename)
<tr>
<td>
{{ $filename->rs_filename }}
</td>
<td>
{{ $filename->original_filename }}
</td>
<td>
{{ $filename->file_extension }}
</td>
<td>
#if($filename->category=="1")
{{ "Laravel" }}
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
#stop
#section('select2_js')
<script type="text/javascript" src="/js/live_search_laravel/select2.js"></script>
#stop
My JS
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("th:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
I want to delete a table row when i click on delete.
For this i have placed a <a> in the table row.
So onclick of that the row needs to be deleted.
I have it working for one set of rows but not for another set.
DeleteRow function:
function DeleteRow(e) {
$(e).closest(".CollectionItem").remove()
}
Works for:
<div class="collapsible-header"><i class="material-icons">place</i>Items</div>
<div class="collapsible-body" style="margin:15px">
<div id="ItemArea">
#if (Model != null)
{
foreach (var Item in Model.Items)
{
<div class="card CollectionItem">
<div class="row" style="margin:15px">
<div class="col s10">
<input placeholder="Item" id="" name="" type="text" class="validate ItemInput" value="#Item">
</div>
<div class="col s2" style="padding-top:10px">
<a class="waves-effect waves-light btn light-blue darken-3 deleteRow valign" id="DeleteItem" onclick="DeleteRow(this)">Delete</a>
</div>
</div>
</div>
}
}
</div>
<div>
Add Item
</div>
</div>
Doesn't work for:
<table id="BuildDefinitionTable">
<thead>
<tr>
<th>Team Project</th>
<th>Build Definition</th>
<th>Drop Build</th>
</tr>
</thead>
<tbody>
#if(Model != null)
{
foreach (var BuildDefinition in Model.BuildDefinitions)
{
<tr class="CollectionItem">
<td><input type='text' readonly value="#BuildDefinition.TeamProject" style="border-bottom:none"/></td>
<td><input type='text' readonly value="#BuildDefinition.Name" style="border-bottom:none"/></td>
<td><input type='text' readonly value="#BuildDefinition.IsDropBuild.ToString()" style='border-bottom:none'/></td>
<td><a class="waves-effect waves-light btn light-blue darken-3 deleteRow valign" id="DeleteItem" onclick="DeleteRow(this)">Delete</a></td>
</tr>
}
}
</tbody>
</table>
Can anyone see why this is, I cant get the delete button to even link to another page by using href.
Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});
See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.
There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});
try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});
If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});