I want to apend a child ( <tr> ) to a table, after a specific row. because the rows get added by while mysqli_fetch_array()
I made a fiddle to show the problem. When you clic on add the text "abc" gets adedd. but behind the table, not as a new <tr> under the original row.
Fiddle
How can this be solved.
jsFiddle Demo
You are inserting a child of the table row with append Child. That is why the placement seems to be "not in the right place". It is however, right where you asked it to be placed. Instead, you can use insertBeforeMDN like this:
ct.parentNode.insertBefore(tr,ct.nextSibling);
This will look at the parent of the row (<tbody>) and then insert the new row before the next row of the selected button. Essentially this is "insertAfter", but that feature was never implemented for whatever reason.
As to the claim that insertBefore is somehow slow and should be avoided or that appendChild is preferred, it would seem that is not the case.
Related
I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]
Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.
I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance
Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.
I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});
I've with me the feature of adding new rows to an existing table via the "Add Row" button using plain old javascript. This code was written by someone else and now I'm required to add something more to the existing functionality.
For that reason I need to be able to target the dynamically added rows too but for some reason whenever I do (after adding 2-3 new rows and clicking "Submit" button)
console.log($('table#tableid tbody tr').length);
it is only retuning the number of rows which were loaded during the page load and skipping the new rows that were added dynamically.
Here's the Fiddle to get you started. It's baffling really because I thought I knew jQuery well enough to be stumped by this....
You add new row to tfoot.
Try this:
var tbl = document.getElementById('tblSample').getElementsByTagName('tbody')[0];
At page Load you are having rows in tbody.while the rows you are adding dynamically are adding in .while on button click you are selecting only those rows that are coming in tbody section.
I have a button in each row, when pressed that row is removed from one table, and added to another table:
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
and at first it appears to work perfectly, the row is removed from one table and added to another, but when I force a re-draw (by changing the sorting of one of the columns, for example) all the rows are back as they were, and the buttons no longer work. This is the case for both the removed rows, and the rows added to the other table.
Is this because I'm using a .jsp table as a data-source? Would this work correctly if I dynamically added all the rows to the table using JavaScript at load-time, or if I used a modelMap collection as a data-source?
Thanks a lot for any advice.
Solution for future googlers - I have no idea how my google-Fu did not find the answer, I had all the right keywords!
In short:
I was doing this to add:
$('.my-other-table-class').append(row);
And this to remove:
var row = $(this).closest("tr").remove().clone()
but I should've been doing this add:
$('.my-other-table-class').dataTable().fnAddData([$(this).attr("data-val1"), "var2"]);
And this to remove:
$('.my-table').dataTable().fnDeleteRow($(this).closest('tr')[0]);
With more detail:
What I am really doing here is modifying the DOM with JQuery (well duh, but I'm really new at this, remember...) - I figured the DOM was the data-source for my table, so that made sense? The table is redrawn, it rereads the DOM and updates? Well not really.
In order to be dynamic, if you use DOM (in other words HTML, or in my case .jsp rendered as HTML) as your data-source, upon initialization, datatables will copy all that information into a JavaScript array.... so rather then my original thought:
"The DOM is not updating correctly, and that issues is propogating up in to my table... because HTML is static...or something?"
it turns out the actual problem was:
"I was updating the DOM, but the real data source was a JavaScript array I wasn't seeing. So upon redraw, this array was overwriting the DOM and my changes were being lost."
TL;DR: Use the Data-tables API and don't modify the data-source directly, unless you need to.
If the event handlers are one of the issues, it may help to set up your event handler like this:
$("#myTable").on("click", "button.moveMe", function(e) {
e.preventDefault();
var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);
});
This will set a handler on the table that has id="myTable". The handler will look for click events on buttons with the "moveMe" class. It will catch the event on rows that are added later, as well as the rows that exist when this hook is created.
Reference: http://api.jquery.com/on/
I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?
This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.
Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});
jsFiddle Example
Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.
Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
Updated jsFiddle Example