Delete <tr> using jQuery - javascript

<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

Related

How to disable specific href link through buttonclick event

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,

How to get event target default value JavaScript

I need to be able to get my target's default value. However, it returns undefined, even though it returns my edited text content.
Table
<table class="data table-bordered table table-striped" id="ui" method="POST">
<tr style="background-color:blue;color:white;">
<td width="25%">Device-imei</td>
<td>Device-Model</td>
<td>device-nickname</td>
</tr>
<tr>
<td>"111111"</td>
<td>"Model"</td>
<td>
<div class="device-name" contenteditable>"Name"</div>
</td>
</tr>
<tr>
<td>"11121341"</td>
<td>"asdf"</td>
<td>
<div class="device-name" contenteditable>"Name"</div>
</td>
</tr>
</table>
Javascript
$('.device-name').on('blur', function(event) {
alert(event.target.defaultValue);
alert(event.target.textContent);
});
EDIT
Found a way around my code
I added data value into my div and used the getAttribute to get my data
HTML
<table class="data table-bordered table table-striped" id="ui" method="POST">
<tr style="background-color:blue;color:white;">
<td width="25%">Device-imei</td>
<td>Device-Model</td>
<td>device-nickname</td>
</tr>
<tr>
<td>"111111"</td>
<td>"Model"</td>
<td>
<div class="device-name" contenteditable data-value="Name">"Name"</div>
</td>
</tr>
<tr>
<td>"11121341"</td>
<td>"asdf"</td>
<td>
<div class="device-name" contenteditable data-value="Name">"Name"</div>
</td>
</tr>
</table>
JavaScript
$('.device-name').on('blur', function(event){
alert(event.target.getAttribute('data-value'));
alert(event.target.textContent);
})
The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.
source
So in your case it is the same as you would do
$('.device-name').on('blur', function(event) {
alert(this.defaultValue);
alert(this.textContent);
});
There is no such thing as defaultValue
Solution
If you want to store the value you can assign it to element attribute and retrive it using jQuery function attr() or data() or javascript function getAttribute()
$('.device-name').on('blur', function(event) {
alert(event.target.getAttribute('data-default'));
alert($(event.target).attr('data-default'));
alert($(event.target).data('default'));
alert(event.target.textContent);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="data table-bordered table table-striped" id="ui" method="POST">
<tr style="background-color:blue;color:white;">
<td width="25%">Device-imei</td>
<td>Device-Model</td>
<td>device-nickname</td>
</tr>
<tr>
<td>"111111"</td>
<td>"Model"</td>
<td>
<div class="device-name" contenteditable data-default="Name">"Name"</div>
</td>
</tr>
<tr>
<td>"11121341"</td>
<td>"asdf"</td>
<td>
<div class="device-name" contenteditable data-default="Name">"Name"</div>
</td>
</tr>
</table>

Return the elements of a table row

I want to return the content from the row () if I click on any of the of .
<table id="dataTable" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Email</th>
<th>Empresa</th>
<th>Criado</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td id="id-cliente-14">14</td>
<td>Name here</td>
<td>contato#test.com</td>
<td>sdfsf</td>
<td>2017-03-13 11:31:58</td>
<td>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
With this code:
$("i.fa.fa-pencil").on( "click", function() {
console.log( $(this).parent().parent().parent().text() );
});
I get this result on the console:
14Name herecontato#test.comsdfsf2017-03-13 11:31:58
I can't work with this, I need to get the ID alone, and if this is not hard get all the others alone too.
I can put css class or and id in the or another tag if this could make it more easy.
You are currently selecting <tbody> as it is the parent's parent's parent. If you want the first <td> you could select the parent's first sibling or the grandparent's first child, such as:
$("i.fa.fa-pencil").on( "click", function() {
console.log( $(this).closest("tr").children(":first").text() );
});
$("i.fa.fa-pencil").on("click", function(e) {
e.preventDefault();
console.log("Id of first td "+$(this).closest("tr").find("td:nth-child(1)").attr("id"));
console.log("Text of first td "+$(this).closest("tr").find("td:nth-child(1)").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Email</th>
<th>Empresa</th>
<th>Criado</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td id="id-cliente-14">14</td>
<td>Name here</td>
<td>contato#test.com</td>
<td>sdfsf</td>
<td>2017-03-13 11:31:58</td>
<td>
<i class="fa fa-pencil" aria-hidden="true">pencil</i>
<i class="fa fa-trash" aria-hidden="true">trash</i>
</td>
</tr>
</tbody>
</table>
Use .closest()
Did you Try SomeThing like that?
$("#id-cliente-14").on( "click", function() {
console.log( "ID: "+ $(this).parents('tr').find('td')[0].innerText);
console.log( "NAM: "+ $(this).parents('tr').find('td')[1].innerText);
});
--EDIT
I got it
I think its works:
$(".pencil").on( "click", function(e) {
console.log( "ID: "+ $(this).parents('tr').find('td')[0].innerText);
console.log( "NAM: "+ $(this).parents('tr').find('td')[1].innerText);
e.preventDefault();
});

Sort column by value other than cell content

I'm using jQuery DataTables and I have one column that looks like shown below:
<td><span class="badge"> 123 </span> <span> customer name </span></td>
i.e, I put first some number (ID), then the actual name which I want to sort by.
How can I tell jQuery DataTables to sort correctly by customer name?
Use data-order attribute on td element as shown in this example.
<td data-order="customer name">
<span class="badge"> 123 </span>
<span> customer name </span>
</td>
You can do this with jQuery.
<table id="example" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td data-search>Paul</td>
</tr>
<tr>
<td>13</td>
<td data-search>Nickson</td>
</tr>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
You have to add jquery.dataTables.min.js after including the jquery. You can find more about this here

Can't focus on a <td> element in my table on click event

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>

Categories