Develop Reference

How to remove class to row-id?

I want to remove class only selected row because in a laravel foreach loop I have multiple rows like this:
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
I wanted it so that if the user clicks on first row only, its class should be removed so I tried this:
$('.remove-d-none').on('click', function(){
$('.menu').removeClass('d-none');
});
But it doesn't seem to work. Does somebody know how to help?

$('.remove-d-none').on('click', function() {
$(this).siblings(".manue").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
</table>

Can you generate a CSV file from a HTML Table, and simultaneously upload that CSV file to an input type = "file" field. Without prompting a download

Basically i have an interactive table below setup on my website which i would like to be able to generate a CSV file from the table on a button click, and have simultaneously upload that CSV file to an input type = "file" field. Without prompting a download on the browser.
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Title</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
<tr>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
<td>
<div contenteditable> </div>
</td>
</tr>
</tbody>
</table>

open msg td on click event with slideup and slidedown

I want to open a another <tr> tag when first <tr> is click.
The code is :
<tr class="msg_inner">
<td><label>some text</label></td>
<tr id="full_msg" style="display:none">
<td><label>Hey There.....</label></td>
</tr>
</tr>
script
$('.msg_inner').click(function(){
$('#full_msg_'+no+'').toggle("slow");
});
it display block but all is open at same time. I want to display that block after <tr> is click.

Don't use another <tr>.
Just add a <div> in your td and simply show him like that
HTML :
<table>
<tr class="line">
<td>
Hi there !!
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
</table>
CSS
.detail{
display:none;
}
JQuery
$(".line").click(function(){
$(this).find(".detail").toggle();
});
Working Fiddle here

you can try this one:
var x=0;
$(".line").click(function(){
if((x%2)==0)
{
$(this).find(".detail").show();
}
else
{
$(this).find(".detail").hide();
}
x++;
});
DEMO HERE
Or
Toogle Method
$(".line").click(function(){
$(this).find(".detail").toggle(1000);
});
DEMO HERE

jQuery .toggle() to not show/hide all within .on 'click'?

I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>

You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.

I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!

JavaScript insertAfter and insertBefore

I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.

to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})