adding to input and cloning results - javascript

I am trying to clone and also add values to results:
http://jsfiddle.net/QNP3r/175/
It is working so-so' on the table element.
But what I want to do is to make it work on a div element rather than table.
How can this be solve?
...Because when I do:
$('#mtable2 section').append($("#mtable2 section:first").clone());
...It clones and doubles everytime you do it....I just want to do one row like the Table's Tbody TRs...
Lastly I would like to clone it only if all forms are added...kind got it working on the else statement.
Any thoughts?
Thanks

Try this:
$("#irowb").click(function(){
$('#mtable2 section:last').after($("#mtable2 section:first").clone());
});
Your first problem is you do an append which inserts the code into the section and not after that and your second problem is you append it after each section, not only the last one
Edit:
$('#mtable2 section:first').before($("#mtable2 section:last").clone());
$("#mtable2 section:first").find("#test-a").html($('#row3').val());
$("#mtable2 section:first").find("#test-b").html($('#row4').val());

Related

How do I use SHIFT() method in js?

I try to delete the first element by using the shift() method. But it did not work. How do I use to correct this function?
`// id="delete-first" in HTML
// the element into the array displayed in HTML
// I want to delete the first element
$("#delete-first").click(function(){
$("#list-student").shift(); // I have issue this line
// $("list-student").first().remove(); // this code is not working too.
});`
Please, fix it to help me.
Sincerely.
Since you did not post your HTML snippet this is based on the assumption that the list items are actually the children in the #list-student element. So the only thing that you're missing is the # as mentioned in the comment, and also getting the children elements before using .first()
$("#delete-first").click(function(){
$("#list-student").children().first().remove();
});
If you are actually having all the list items with the same ID of #list-student (which is not advisable), then you can do
$("#delete-first").click(function(){
$("[id=list-student]:first").remove();
});
You're trying to remove the first occurrence of the #list-student item - just select it and use remove:
$("#list-student").remove();
You don't need to select the first element because IDs are unique.

Insert a div-like element inside a table without applying table layout

I have a table (render by datatable) and I need to dymatically append some new elements inside the table like :
The dark grey area is a new dom elements that I need to dynamically insert.
The first row is a title that is NOT align with the th/td, which now becomes a problem to be solved
I tried inserting a div that wrap the title inside the table, but the table seems to treat it as a td:
We can see that the first row is apparently become much wider , which is not I want.
Is there a simple way to insert something inside but without treat it as td?
Here is a fiddle to demonstrate what I am faced with :http://code.hcharts.cn/jaskey/hhhGXD
Not able to update your fiddle, try this code
$(function () {
$('#btn').off('click').on('click',function(){
console.log('click');
$('#table').find('tr:first-child').after('<tr><td colspan="5"><div>Here I insert a din just after the th, which will be consided as a td ,which breaks the existing layout</div></td></tr>')
});
});
also ensure that you have given specific width to td's or tr if you don't want them to spread out.

Select a div insinde another div with jQuery

So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div
The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.
Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector
use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});
You need to use .find() or .children() or the like.
The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page
You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]
One another solution is:
$("#Stage_game_page1 div[id='cube0']")

jQuery replace entire table elements

I have this table
<table><tbody><tr><th><br></th></tr></tbody></table>
on multimple pages, and I can't remove them from database.
So I want to remove this entire line with jquery. I can't add a class or id to remove it like that.
This is why I need a replace this table with nothing, like
var elem = elem.replace('table...','');
any help please? thanks.
can't you just use one of:
$('table').remove(); // remove from dom
or
$('table').hide(); // hide the table, but stays in dom

How do I maintain (or reapply) jQuery binds on new elements after using jQuery "clone()"?

I have a form with which I use jQuery ".clone()" to add new rows. Everything looks great, however I have a binding problem. Basically, on initialization, I use the jQuery ".datepicker()" function for one field (based on class). If I use ".clone()" by itself I don't get any of the ".datepicker()" functionality with the new item. If I use ".clone(true)" I get the functionality, but for cloned rows it fills the date of the row it was cloned from, not the actual row clicked.
I've tried unbinding/rebinding, but none of this works. So, how do I append new rows to a form while still getting all of the jQuery funness to work properly?
Best
EDIT 1 (jQuery):
function addLineItem(){
$('#charges_table tr:last').clone(true).insertAfter('#charges_table tr:last');
}
$(function(){
$('.date_pick').datepicker({"numberOfMonths": 2});
$("#add_line_item").bind('click',function(event){
event.preventDefault();
addLineItem();
$('.date_pick').datepicker('destroy');
$('.date_pick').datepicker();
})
})
FYI, I'm only binding on class, and the HTML elements aren't using an ID to speak of.
When you .clone(), are you changing the ID of the element before you insert it back into the DOM? If not, your ID would be duplicated, and that could be the source of your trouble.
First, as written, your method addLineItem is always going to clone whatever the last row of the table is: $('#charges_table tr:last'). It sounds like you want to clone the table row within which the click occurred. If that is the case, then something like this should do the trick:
function addLineItem(row){
$(row).clone(true).insertAfter('#charges_table tr:last');
}
$(function(){
$('.date_pick').datepicker({"numberOfMonths": 2});
$("#add_line_item").bind('click',function(event){
event.preventDefault();
// Pass the closest 'tr' element to the element clicked.
addLineItem($(this).closest('tr'));
});
});
I haven't tested this code, but it is based on similar table row cloning code in one of my projects.

Categories

Resources