I am trying to remove a class to a parent td from a child button element thru jQuery. I can remove the class when the outer tr element is clicked with no problem but when trying to add the class back to the parent td it doesn't do anything. When debugging it seems to work. I am trying to do it without reloading the page hence the preventDefault method on the button click. Any ideas on what might be causing the issue?
My html is this:
<div class="panel panel-default">
<table id="order" class="table table-hover table-bordered">
<thead class="table-header">
<tr>
<th class="text-center">
Order Number
</th>
<th class="text-center">
Project Number
</th>
</tr>
</thead>
<tbody>
<tr class="click">
<td id="orderNumber">
1313
</td>
<td>
50
</td>
<td id="td1313" class="hidden">
<div class="verify-box">
<div class="window">
<button class="close">
X
</button>
<span class="title">
Verify Order
</span>
<div class="panel panel-default">
<table class="table table-hover table-bordered">
<thead class="table-header">
<tr>
<th>
Item Number
</th>
<th>
Item Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
123456
</td>
<td class="text-center">
Description
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" type="button" onclick="window.print()">
Print
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Here is the javascript:
$('.click').on('click', function() {
var $td = $(this).find('#orderNumber');
var td = "#td" + $td.text().trim();
$(td).removeClass('hidden');
});
// Closes verification window
$('.close').on('click', function(e) {
e.preventDefault();
var $td = $(this).closest('td');
$td.addClass('hidden');
});
I have also including fiddle
https://jsfiddle.net/tspuq9vo/3/
You've set the click class on the tr causing it to get fired straight after the click event for the close button.
As a quick fix you can stop the click event from propagating by using
$('.click').on('click', function() {
var $td = $(this).find('#orderNumber');
var td = "#td" + $td.text().trim();
$(td).removeClass('hidden');
});
// Closes verification window
$('.close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $td = $(this).closest('td');
$td.addClass('hidden');
});
Otherwise you should really only target the clickable td-s directly
Related
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'm trying to come up with the best way to use jQuery to delete all the rows except for the one selected. I've done some searching and I've seen several posts about deleting all records or all records except the first or last row but nothing on deleting all but the one selected.
The scenario would be searching for a list of employees which would return maybe 5 records. Then there would be a "Select" button and when you click on that button it would remove all <tbody> rows except for that one. Actually from there my idea is to not only remove the rows but then to hide the "Select" button and display a text box as well as displaying a "Add" button below the table to add the employees with the item entered in the textbox.
I've thought about putting a hidden field on each row that has an row #, pass that row index to a jQuery function and then loop through all of the Tbody.Tr and remove if it doesn't match the row index passed in?
Another thought would be to put an Onclick on each of the "Select" buttons and then in the function use "this" to for reference to the row but then I don't know how to effectively say "remove all but $this row".
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.listEmployee)
{
<tr>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button id="btnSelect" class="btn btn-sm">Select</button>
<input id="txtCaseNo" type="text" style="display:none;" />
</td>
</tr>
}
</tbody>
</table>
First ids need to be singular so id="btnSelect" is not going to work. Make it a class or name.
So select the TR and select the siblings and you can remove it.
$("tbody").on("click", "button", function() { //bind the click to the buttons
var button = $(this) //get what was clicked
$(this).closest("tr") //select the TR
.siblings() //get the other TRS
.remove() // um, remove them
button.hide() //hide your button
button.siblings().removeAttr('hidden') //show the input
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>A#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>B#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>C#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>D#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
</tbody>
</table>
Why not filter on your Model.listEmployee on the id of the selected row? This is assuming your current set up is reactive.
Ie:
const new_list = old_list.filter(item => item.id !== selected_id)
I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.
Table:
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
Panel with text box:
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" id="groupname" class="form-control" value="Name"/>
</div>
</div>
</div>
</div>
Script that autofills selected row's td into textbox:
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
}
})();
Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.
var row = null;
$("#data-table tr td").click(function() {
$("#groupname").val($(this).text());
row = $(this);
});
$("#updateBtn").click(function() {
if (row != null) {
row.text($("#groupname").val());
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
<div class="panel-body">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="groupname" class="form-control" value="" />
<span class="input-group-btn">
<button id="updateBtn" class="btn btn-default" type="button">
Update
</button>
</span>
</div>
</div>
</div>
</div>
I have a table with some rows and each tow has an data-key value. Now I select one of those rows and want to click on a button in order to forward this data-key value as an GET value. I don't really know how to capture this selected data-key. Kindly asking for help.
Here is a fiddle: fiddle
Below is my snippet so far.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row" data-key="12">
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr class="clickable-row" data-key="13">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
You could try to implement this code.
I will add modified version of your code, but I will mark out where I modified it.
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr onclick="test(this);"> // MODIFIED, This line would be added onto all your rows that you want clickable.
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr onclick="test(this);">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
Now I will show you the implementation of the function test.
function test(element){
console.log(element.innerHTML);
}
Now, you could do anything with this element callback. For example, you could store it in a variable and send that to a PHP page using AJAX, when you press a button.
Edit 1
First, I want to point out that you cannot use <button> as a link.
First, there are a few modifications to the HTML.
<button id="submitButton" class="btn btn-sm btn-secondary" onclick="addEvent();" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
Here we added an id, "submitButton" and an onclickEvent which will call the function addEvent.
This is the function addEvent:
function addEvent(){
if(currentRow == undefined){
alert("Select a row");
return;
}
var link = "events.phtml?TableID="+currentRow.cells[0].innerHTML;
}
This link variable can easily be implemented using an AJAX call with jQuery or just plain javascript.
Sidenote
The function test has also been edited.
function test(element){
currentRow = element;
}
I recommend editing the name on the function test so that the code will look more organised.
Edit 2
If I have understood what you want out of this, this will be the new fix.
So you will have to edit the HTML again.
<div class="container-fluid">
<div class="form-horizontal" style="margin-top:5em;">
<div class="input-group">
<input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
<button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" onclick="addEvent();" style="margin-left:1em; font-size:12px;">Add Event</button>
</div>
<div id="Table">
<table class="table table-sm">
<thead>
<tr>
<th>ID</th>
<th>Event Name</th>
</tr>
</thead>
<tbody>
<tr onclick="test(this);" data-key="12"> // MODIFIED, This line would be added onto all your rows that you want clickable.
<td>12</td>
<td>Test Event 12</td>
</tr>
<tr onclick="test(this);" data-key="13">
<td>13</td>
<td>Test Event 13</td>
</tr>
</tbody>
</table>
</div>
</div>
You will need to make a slight change to the javascript as well.
function addEvent(){
if(currentRow == undefined){
alert("Select a row");
return;
}
var link = "events.phtml?TableID="+currentRow.getAttribute("data-key");
}
You still use this address for anything you like, for example an AJAX request.
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