Removing the table row using jquery - javascript

Here I have a program which dynamically generating the rows in the table. I have very little control over these rows. As you can see below only the first cell contain the unique id for the row. I have to remove the row from DOM based on that id.
<tr class="odd">
<td class="sorting_1">
<a id="strategy_4555" class="linkable" href="/strategy/4555"> Something</a>
</td>
<td>Public</td>
<td>10,000.00</td>
<td>10,000.00</td>
<td>0</td>
<td>10,000.00</td>
<td>
<a onclick="deleteStrategy(4555)" class="btn no-radius color-red"><b>X</b></a>
</td>
</tr>
The only close answer I can think of is:
$("tr #strategy_"+id).remove();
but this will only delete the content from that cell, not the complete row. How can I do this use jquery.

Just do
$("#strategy_" + id).closest("tr").remove();

Related

Hide all Table Rows expect one selected

I have a table within my Spring MVC web application that uses JSP to serve up the data, the table is a dynamically loaded list of jobs to be worked on, what I am trying to do is when the table row is selected change the color of the Row to red and hide all other rows in the table.
The rows are getting highlighted but when I try to hide the rows I have no success, any ideas or help is much appreciated , please she what I have tried below with table structure. Thank You
What happens when table data link is pressed is a form is opened with table data passed to form
Table:
<table class="table table-hover" id="no-more-tables" style="margin-bottom: 0px;">
<thead>
<tr>
<th>Service Id</th>
<th>Vehicle</th>
<th>Due date</th>
<th>ServiceType</th>
<th>Last update</th>
<th>Frequency</th>
<th>Start</th>
</tr>
</thead>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id2" class="">
<td data-title="Service Id">2</td>
<td data-title="Vehicle">vehicle two</td>
<td data-title="Due date">2018-02-14</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-14</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=2' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id3" class="">
<td data-title="Service Id">3</td>
<td data-title="Vehicle">VAN1</td>
<td data-title="Due date">2018-02-20</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-20</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=3' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
</tbody>
</table>
Jquery code:
$(document).ready(function() {
$(window).on('load',function(){
var service_id = $('#service_id').val();
if(service_id){
$('#serviceRow').toggle();
$('#table_row_id'+service_id).addClass('danger');
$('#table_row_id'+service_id).siblings().hide();
}
});
});
Other way I approached:
$(document).ready(function(){
$(window).on('load',function(){
$( "table tbody tr" ).siblings( ".danger" ).hide();
});
});
I have researched solutions on SO and on-line with no joy including this one:
How to hide all tr from table except clicked one
Please if you decide to down-vote my question please provide a reason as to why and we can try rectify the issue, thanks for your time, let me know if need anything else. Jason
There are a few issues with your code.
1. You are not attaching click event handler for the table row. You are writing the logic inside window onload event which won't trigger when you click on a row.
2. You do not have any element with id service_id. I assume you are trying to get the content of the cell with data-title="Service Id"
3. val() is used to get the value of input, select or textarea elements. To get content of cell, you need to use text() or .html(). See jquery documentation to understand the difference.
4. You have wrapped each row in a tbody tag. As such, calling sibling() on the row elements will return empty collection.
Here is the working plunker: https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info

Adding <td> to one row of table but not all changes row position

I have a table like this
<table>
<tr>example1</tr>
<tr>example2</tr>
<tr>example3</tr>
</table>
and it works fine but if I add <td> to the first row and not the others it goes straight to the bottom - http://jsfiddle.net/sLd1L92t/1/
<table>
<tr><td>example1</td></tr>
<tr>example2</tr>
<tr>example3</tr>
</table>
Is there any way I can have the <td> in just one row and not have that row repositioned?
Add a <td> to each row, like so:
<div>
<table border="1">
<tr><td>example1</td></tr>
<tr><td>example2</td></tr>
<tr><td>example3</td></tr>
</table>
</div>
(I added a border to make it clear where the cell boundaries are)
And if you want the second two rows to fill the width of the table, then use colspan which tells the row to span multiple columns:
<div>
<table border="1">
<tr><td>exampleA</td><td>exampleB</td></tr>
<tr><td colspan="2">example2</td></tr>
<tr><td colspan="2">example3</td></tr>
</table>
</div>
Adding in the <td> is correct HTML, so I don't believe there is a way to do what you want.
Why are you trying to write the table that way? You can probably make it work using <div> tags instead.

jQuery.after won't accept </tr> to end an element after starting one

I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.
jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')
You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.
You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.

select elements in memory-object jquery

I'm working with a memory object where I store almost 2,000 <tr> elements. I select certain elements from this object and add them to the page according to the user.
the structure is almost like this but with more <td>s:
<tr attribute1="value" attribute2="value">
<td class="class1">something</td>
<td class="class1">something</td>
<td class="class2">something</td>
<td>
<div class="class1">
somthing
</div>
</td>
</tr>
So I select rows on certain attributes and then want to .show() or .hide() some of the <td>
I tried to use the following:
$(myObject).find("[attribute1=value]").clone().find(".class1").show();
but this statement only returns the <td>s or <div>s that satisfy the class condition.
If these rows where not in memory I could easily use a select statement which will work perfectly:
$(".class1").hide/show()
How can I achieve that in my situation

DIV and tables - multiple rows

I am trying to put a div inside of a table however, it will not go across multiple rows.
Here is the code I am using:
<table>
<tr>
<td><div id="test"></td>
</tr>
<tr>
<td>row 2 stuff</td></td>
</div>
</table>
I have multiple rows that are dynamically added on a button click. I would like each group of dynamically added rows to be inside of a div for easy removal.
The problem is FireFox is automatically closing the div tag in the same cell. At the very end, it is moving my closing to the end of the first cell.
Latest tag opened should be closed first to get the perfect result.
Your code should look somehow like this:
<table>
<tr>
<td><div id="test"></div></td>
</tr>
<tr>
<td>row 2 stuff</td>
</tr>
</table>
You cannot wrap a <div> tag around table elements like that. If you would like to keep an easy reference to each row, consider keeping references to all of the newly-added rows, or add a class to them for later access.
Your markup does not abide by html standards in the sense that you are imporperly nesting. If you want to add a row use the following formation
<table>
<div id="test">
<tr>
<td></td>
</tr>
<tr>
<td>row 2 stuff</td></td>
</tr>
</div>
</table>
If you notice, I grouped the two rows within one div. Even this is ill advised as you are nesting a div within a table. A more convenient solution would be to assign a class to the divs you want to group together like so:
<table>
<tr class="test">
<td></td>
</tr>
<tr class="test">
<td>row 2 stuff</td></td>
</tr>
</table>
Here the rows I want to group together are assigned a common class. So if I were to select them with say Jquery, I would do :
$("tr.test")
Hope that helps!
Html tags must be strictly within another tag. The following markup is therefore not allowed:
<b>this <i>is a</b> test</i>
Your markup breaks the same rule.

Categories

Resources