I have a table like this:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center" style="width: 30%">Name</th>
<th class="hidden-480 center" style="width: 40%">URI</th>
<th class="hidden-phone center" style="width: 30%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Admin_Agency
</td>
<td class="uri">
/admin/agency
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
<tr>
<td class="name">
System_Log
</td>
<td class="uri">
/admin/syslog
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
</tbody>
</table>
When click on Edit < a href="#modalEdit"> , I want to get the the data from the 2 sibling td , that is the < td class="name"> , < td class="uri"> .
I add an onclick event on < a href="#modalEdit"> to parse data to the model when fire event click :
var name = $(this).parent().siblings(".name").html()
var uri = $(this).parent().siblings(".uri").html()
The code does not run.
Is there any suggestion for me?
THanks
you have to use closest() to get its parent tr and then use find() to get td with via class selector, and the use text() to get the text between the opening and closing tag of td.
Like this:
var name = $(this).closest("tr").find(".name").text();
var uri = $(this).closest("tr").find(".uri").text();
FIDDLE EXAMPLE
Related
I have a table that contains 2 Date type inputs, a span and 2 clickable icons for edit and save. What I am aiming for is to enable the input type date in my td's "onClick" on Edit Icon. But I don't know how to access the element in the td, to alter the disabled attribute. On edit the disabled attribute should be False, and after alteration if he clicks the save icon, the disabled attribute should go back to True. A plus would be for me, if I can make the save icon disabled(not clickable) by default, if the edit button was not clicked first, and after save it goes back to being disabled.
This is my HTML code:
<table class="table table-striped" id="pageNbr">
<thead>
<tr class="header">
<th>Begin Date</th>
<th>End Date</th>
<th>School Year</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
<i class="far fa-save Icon-save"></i>
<a href="#">
<i class="far fa-edit Icon-edit"></i></a>
</td>
</tr>
</tbody>
</table>
My jQuery so far is:
$('.Icon-edit').click(function() {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function() {
$(this).prop();
});
});
$('.Icon-save').click(function() {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function() {
$(this).prop();
});
});
you can assign a class to your row, then get its child td by index:
<tr class="myclass">
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
<i class="far fa-save Icon-save"></i>
<a href="#">
<i class="far fa-edit Icon-edit"></i></a>
</td>
</tr>
$(".myClass").find("td:eq(4)");
Related Link: Get second td of tr using jquery
You can do this in one event listener and check the class of the one that was clicked to determine disable/enable.
I added classes to the <a> rather than using the <i> and added css to hide the "save" by default then use hide/show to toggle display on the buttons
$('.date-toggle').click(function() {
const $btn = $(this);
const disable = $btn.hasClass('save');
$btn.closest('tr').find('.BeginDate, .EndDate').prop('disabled', disable);
$btn.hide().siblings('.date-toggle').show()
});
.date-toggle.save{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="pageNbr">
<thead>
<tr class="header">
<th>Begin Date</th>
<th>End Date</th>
<th>School Year</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
Save</i>
<a href="#" class="date-toggle edit">
<i class="far fa-edit Icon-edit">Edit</i></a>
</td>
</tr>
</tbody>
</table>
$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2
I have multiple tables wher each row is defined by an ID and a class. The words in each row are actually href links. I have one button with id testbuttonba. If testbuttonba is clicked, I want the following to occur:
1) href for ID table1 to be disable.
2) href for ID table2 and table3 to still be enabled.
My code below does not work (all links are still enabled after clicking):
HTML
<body>
<button class="btnba" id="testbtnba" onclick="function2()">BA</button>
/* 1st Table */
<table>
<tr>
<th><font size="1">Capability Group</font></th>
</tr>
<tbody id="table1">
<tr>
<td><font size="1"><strong>A. Organisational Content</strong></font></td>
</tr>
</table>
/* 2nd Table */
<table>
<tr>
<th><font size="1">Capability Group</font></th>
</tr>
<tbody id="table2">
<tr>
<td><font size="1"><strong>B. Basic Requirements</strong></font></td>
</tr>
</table>
/* 3rd Table */
<table>
<tr>
<th><font size="1">Capability Group</font></th>
</tr>
<tbody id="table3">
<tr>
<td><font size="1"><strong>C. Rules and Regulations</strong></font></td>
</tr>
</table>
JavaScript
<script>
/*diasble the first link - not working*/
function function2() {
document.getElementById("table1").href = "#";
}
return false;
</script>
Your script is grabbing the wrong element. document.getElementById("table1") returns a tbody element, which does not have an hrefattribute on it.
You need to add an id to the a element, like: <a id="some-id">
Then, use it to grab the link and change the href: document.getElementById("some-id").href = "#";
please change the function
function function2() {
document.getElementById("table1").getElementsByTagName('a')[0].href = "#";
}
result of this code document.getElementById("table1") is tbody tag and then you should find the tag a in this tag then disable the href .
i hope my answer give you an idea .
You have to find the anchor tag in element with id table1, and disable it like below.
function function2() {
var a = document.querySelector('#table1 a');
a.setAttribute('href','#');
}
You shouldn't remove the href on the <a/> (at least without storing in some way). You can create a toggle that will determine whether or not Event.preventDefault() will be called when the button is clicked.
This will do the trick:
let linkActive = false;
disableToggle = () => {
linkActive = !linkActive;
}
document.querySelector('#table1 tr td a').onclick = ev => {
if (linkActive) {
ev.preventDefault('sd');
}
};
.smallFont {
font-size: 10px;
}
<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table1">
<tr>
<td>
<a href="showdoc.html">
<span class="smallFont"><strong>A. Organisational Content</strong></span>
</a>
</td>
</tr>
</table>
/* 2nd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table2">
<tr>
<td>
<a href="showpdf.html">
<span class="smallFont"><strong>B. Basic Requirements</strong></span>
</a>
</td>
</tr>
</table>
/* 3rd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table3">
<tr>
<td>
<a href="showexcel.html">
<span class="smallFont"><strong>C. Rules and Regulations</strong></span>
</a>
</td>
</tr>
</table>
The reason it does not work in your snippet above is only because your selector doesn't select the <a/> element, doing this will rectify that:
function function2() {
document.querySelector("#table1 tr td a").setAttribute('href', '#');
}
.smallFont {
font-size: 10px;
}
<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table1">
<tr>
<td>
<a href="showdoc.html">
<span class="smallFont"><strong>A. Organisational Content</strong></span>
</a>
</td>
</tr>
</table>
/* 2nd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table2">
<tr>
<td>
<a href="showpdf.html">
<span class="smallFont"><strong>B. Basic Requirements</strong></span>
</a>
</td>
</tr>
</table>
/* 3rd Table */
<table>
<tr>
<th>
<span class="smallFont">Capability Group</span>
</th>
</tr>
<tbody id="table3">
<tr>
<td>
<a href="showexcel.html">
<span class="smallFont"><strong>C. Rules and Regulations</strong></span>
</a>
</td>
</tr>
</table>
Keep in mind, that there is no way to re-enable the link using the code in this way :o
Update: Replaced the <font/> tags with some CSS. The <font/> element is obsolete.
Hope that helps,
I have a table and when I click on a button I want to set the contenteditable to true, which I do, and then put focus on the td element so the client sees a cursor blinking in the cell.
I can't seem to get the focus to work on the LicenseName cell. I know the 'tableData' variable contains the correct element, I've checked it in the browser debugger.
Here is what I've tried.
editLicensesDetails = function (e) {
var tableRow = $(e.target).parent().parent();
$(tableRow).css('background-color', '#dff0d8');
$(tableRow).children('[contenteditable]').attr("contenteditable", "true");
var tableData = $(tableRow).children('[contenteditable]')[0];
$(tableData).focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableLicenseDetails" style="width:100%;">
<tr>
<th>Edit</th>
<th>Delete</th>
<th>Name</th>
<th>Description</th>
<th>Product</th>
<th>Unit Of Measure</th>
<th>Variable Rate</th>
</tr>
<tr>
<td style="display:none;">#license.LicenseId</td>
<td>
<i class="fa fa-pencil" aria-hidden="true"></i>
</td>
<td>
<i class="fa fa-trash" aria-hidden="true"></i>
</td>
<td contenteditable="false">#license.LicenseName</td>
<td contenteditable="false">#license.LicenseDescription</td>
<td>#license.TradePulseProductName</td>
<td>#license.LicenseUnitOfMeasureTypeName</td>
<td>#license.IsVariableRate</td>
</tr>
</table>
Your code is working correctly. That means something is wrong when you calling the editLicensesDetails function
var tableRow = $('tr');
$(tableRow).css('background-color', '#dff0d8');
$(tableRow).children('[contenteditable]').attr("contenteditable", "true");
var tableData = $(tableRow).children('[contenteditable]')[0];
$(tableData).focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td contenteditable="false">LicenseName</td>
<td contenteditable="false">LicenseDescription</td>
</tr>
</table>
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
Javascript code:
var service = {
removeRow:function(id){
/* alert(id) == [object HTMLTableRowElement]*/
$("#"+id).remove();
}
}
Console Error:
Error: Syntax error, unrecognized expression: #[object
HTMLTableRowElement]
I want to delete table row, please help.
You are passing identifiers not strings.
Consequently, the horrible IE4ism that has somehow made it into HTML which causes every element with an id to create a global JS variable with the same ID is giving you the <tr> elements themselves.
When you "#"+id you convert the HTML Element object into a string, which is [object HTMLTableRowElement]
Put quotes around the IDs you are passing.
service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82')
You need to quote the IDs when you have them in your html like that:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
or better yet, don't inline your event handlers and do it all in JS:
$('#fieldList a').on('click', function (e) {
$(this).closest('tr').remove();
});
which has the side effect of neater html:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td> <i class="fa fa-delete"></i>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td> <i class="fa fa-delete"></i></td>
</tr>
</tbody>
</table>
You can simplify your code by referencing the parent tr, not directly, but starting from the child td using jQuery closest.
HTML:
<td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
Code:
var service = {
removeRow:function(el){
$(el).closest('tr').remove();
}
}
In this way you can avoid to hard code its id.
Demo: http://jsfiddle.net/IrvinDominin/keLnN/
If you want to delete the row, where is the button, the better way is to use "this", not hardcoded the Row's IDs, because if ID is different - you need to change the function.
Set all a-tags to be:
<a onclick="service.removeRow(this);" href="javascript:void(0);">
then, the function will be:
var service = {
removeRow:function(td){
$(td).closest("tr").remove();
}
}
change the mark up like this...
onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');
hope it solves!
Try this:
$('"#'+id+'"').remove();
Create <a> tags like below
<a class="removeRow" href="javascript:void(0);">
then in Jquery
$(document).ready(function(){
$('.removeRow').click(function(){
$(this).closest('tr').remove();
});
});
You need to remove a child from its parent node so here is a small example
<!DOCTYPE html>
<html>
<body>
<table id="table1" border="2">
<tr id="tr1" >
<td id="td1"><p id="p1">This is a paragraph.</p></td>
<td id="td1"><p id="p2">This is another paragraph.</p></td>
</tr>
</table>
<script>
var parent=document.getElementById("table1");
var child = document.getElementById("tr1");
child.parentNode.removeChild(child);
</script>
</body>
</html>
Actually here i have a table with a id of table1 as you can see...
in script i defined a variable with the name of child ...
now in last line child.parentNode.removeChild(child); child is the name of variable that we define earlier... after then parentNode will search for its parent node of child that is table and after then the removeCHILD will remove the child...
hope you understood! thanks