CloneNode And AppendChild Problem In Adding Table Row
Jul 20, 2005
This is a shortened version of my problem. Below I am cloning the first
data row and appending it to create a new row. If you make selections/add
values and then press Add Row, the text box value is carried to the new
row's text element also (the select doesn't retain it's selected value).
How can I create a new row with the form elements in the original no value
state? I tried cloning the Node on page load, but then it only allows me to
add one row. Is there a way to clone the row and retain it to add as many
rows as I like. I know I can clear all the values of the row after I create
it, but that seems like a long way around especially since I have many
fields in my actual code. Code:
I'm playing around with some AJAX-ish stuff and encountered some problem in the JS side of the universe. Maybe someone here can suggest an alternative that works.
I have developed a simple ASP.NET application with a web page that should display a list of users. This list page is designed to start with an empty table (with columns defined), and, onload, send an XmlHttp request to a server component (a.k.a. ListServer). This ListServer is currently simulating a long-running operation. So, it sleeps for 3 seconds, and then grabs a list of 4 users from an xml file. It applies an xsl transformation and returns the result.
The xslt is designed to take the xml data and convert it to a <ListChunkroot element containing a <trfor each user in the XML data. Each row contains 4 columns (Id, Login, Password, Name). The javascript in the list page grabs the responseXML from the XmlHttp object and should, for each <trin it, create a copy of the row coming from the server and adding it to the list on the client.
I actually got all that to work quite fine. The js snipplet dealing with copying the row coming from the server and adding it to the table on the client is: Code:
The problems I am having are with trying to get IE to successfully clone a referenced node from one frame and inport it (with all form values etc) to another frame. Moz works fine with
I have tried iterating the specified node and using createElement to create a copy in the desired place, which works fine with simple input type text or hidden. The first snag comes when trying the same with textareas. The cloned form doesn't submit the values :(
I am working on a sortable table (full code in attachment). I solved all the intermediate steps till the end when, to my surprise, appenChild() method inserts some previous cloneNodes in looped rows in a peculiar mode, by leaving the end tags </tr> at the end of the table. So far:
1.- build the cloneNodes of the rows as an array, and each index as a paralel array:
//some needed variables on later t=document.getElementById('tab'); nr=t.rows; nc=t.rows[0].cells;
//array of rows and rows indexes var oRows = new Array() var iRows = new Array() for(var i=1;i<nr.length;i++){ oRows[i]=t.rows[i].cloneNode(true); iRows[i]=t.rows[i].rowIndex; //so far so good, alert shows me what i needed alert(oRows[i].innerHTML) }
2. - build an array with the content of the correspondent cells on column and sort this array. The array is double and keep the genuine row's index for later use as each second element. Code:
I'm developing an AJAX toolkit in which I needed a way to write a subset of a markup language to modify the running copy of the document. When implementing part of the append parser I came against a problem. What I'm basically doing is reading the append XML tag, looking where it says It has to add code and then clone the nodes inside that tag and attempt to insert them in the document. The problem comes when I'm trying to append, it seems like all my cloned nodes lose all it's style properties, for example several <li> items would come one next to the other instead of one below the other with the round bullet separation, or an image won't load the actual image. Code:
I have a table where the user can press an "add more" button which duplicates the row and displays it on the next line. I use this for my site to have the user input stock prices which may be split in multiple orders after they execute them. Here is my JS code:[code]I am submitting this with a form I need each cell id to have its own unique identifier. The way the code is now, the cloned cell has the same id as the original and only the data for one gets submitted.
I have a table where the user can press an "add more" button which duplicates the row and displays it on the next line. I use this for my site to have the user input stock prices which may be split in multiple orders after they execute them. Here is my JS code:
Code: <script> function insert(button) {var cell, newRow, row, sect; if((cell = button.parentNode) && (row = cell.parentNode) && row.cloneNode && (sect = row.parentNode) && sect.insertBefore){ newRow = row.cloneNode(true); /* If you need to alter the new row * or its contents, do it here. */ sect.insertBefore(newRow, row.nextSibling); }} </script>
This works fine. However, since I am submitting this with a form I need each cell id to have its own unique identifier. The way the code is now, the cloned cell has the same id as the original and only the data for one gets submitted.
var oSelect = document.createElement('select'); oSelect.name = 'Year[]' for (var i=1950; i<=2005; i++) { var oOption = document.createElement("option"); oOption.text = i; oOption.value = i; oSelect.appendChild(oOption); }
oSelect.add(oOption); works in IE but doesnt in FF. Although, its mentioned here that appendChild applies to OPTION too. How do I get this working on both browsers ?
I am making a form that has 4 inputs per item (item #, price, quantity, extended price). I am formatting the form in a table and I want to be able to add another row of inputs when the user clicks the button. it is working in ie but not ff. I realize that i need to change the inputs to innerHTML but nothing is appearing in ff even when i try to append the <p>
function addRow() { var row = document.createElement('p'); row.appendChild(document.createTextNode("hi"));
I have a table with 3 columns and I'm adding values to 2 of the columns from javascript using dom.
The problem is that the <br> is only being applied once for some reason instead of applying each time I'm using the document.createElement("br") [code]...
I know maybe this is basic stuff; but I'm in the middle of something with it. The question is that I need to add a row to an existing table, with four cells and in each cell I need to add different input types, In fact they are: One select, two text inputs [In separates cell] and an anchor in the last cell, except the anchor I need to give to every input an unique iterative id, starting with the last in the table plus one :-) I have this code, but I can't figure it out to create the elements, nor adding more cells [<td>]. $("#roomsTable").find('tbody')
Of course I don't want to add an image, is only to test it and it works fine, but as soon I replace the <img> with a $('input'), it just add all the inputs around !! :-S So I've been trying all day, and couldn't do it :-( I want to add four cells, and a select in the first [Wich I need to populate of course from the server], an input in the second and the third, and an anchor on the fourth
I have an existing table with a form in it and am using the createElement function to create new input fields. The problem is that I dont know how to put the new row into the middle of the table...
I have this fairly horrible table that I need to add rows to onclick. I can get it to do it easily enough by setting the tbody id to "tbodyid" and using this simple JS:
Code Javascript: var rowcount = 0; function addrow(){ rowcount++; document.getElementById("tbodyid").innerHTML += '<tr>...</tr>'; }
Works beautifully, but the problem that I've got is that if I put any text in any inputs in the new rows, when I add an extra field they all blank themselves again, which is a bit annoying.
In my attempt to understand the workings of the code at: [URL].. I modified it a bit. My question is: What am i doing wrong with the 'testContents()' function? The rows of the table see to be added to the display, but I can not confirm that fact with the test function.
I am finding that when I use the cloneNode method to copy an HTML element that contains a <script> tag, the contents of the <script> tag, (ie. the javascript) are removed.
If I do this: var form1 = document.getElementById(sID).firstChild.cloneNode( true); alert(form1.outerHTML);
I can see the empty <script> tags. I am wondering if there is a reasonable workaround for this, because I need the script tag with its javascript content.
I am working on some JavaScript that dynamically adds rows to a table in response to a button click. A new row does appear on the screen when the button is clicked. However, that table to which a row has been added is itself contained within an outer table (to handle the desired screen layout). That outer table does not properly grow to contain the new size of the table to which the row was added. (More specifically, I have sporadically seen the outer table grow correctly, but then most of the time it does not grow as desired.) Is there something that needs to be done in the code that will make the right thing happen? (This phenomena appears in Netscape 7.1 -- things work correctly under Internet Explorer 6.0)
A second anomoly concerns a button that appears in the newly added row. An "onClick" event is associated with that dynamically added button. The newly added button works correctly under Netscape 7.1 but fails to work under Internet Explorer 6.0. (It is like Explorer will not honor an event that is set in place by code that is dynamically created after the page is loaded.) Shown below is an excerpt of the code that is attempting to set up the desired button. Is there something apecial that must be done in the code to get Explorer to handle this properly (I have tried spelling things as both "onclick" and also "onClick")?
tbldata = document.createElement("TD"); item = document.createElement("BUTTON"); v = 'doaction("Edit",' + n +')' item.setAttribute("name","Edit"); item.setAttribute("onclick",v); textitem = document.createTextNode("Edit"); item.appendChild(textitem); tbldata.appendChild(item);
Do you know if you can clone() and then appendTo() a <tr>. [URL]. I want to something like: $("#second").clone().appendTo('#second'); It works, but it doesn't render like I want it to. I want it to be a NEW row.
i'm trying to add a row to a table with form elements in the table. It almost works but instead of seeing my text field, i see the code of my text field. Here's my code :
var counter = 1; function addInput(tableName) { var tbody = document.getElementById(tableName).getElementsByTagName("TBODY")[0]; var row = document.createElement("TR"); var td1 = document.createElement("TD"); td1.appendChild(document.createTextNode("<input type='text' name='myInputs[]'>")); [Code]...
I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs.So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current oneHere is my code..
You see it doesn't want to output the I have specified. The actual script is a lot more complex and so unfortunately manually adding each using an appendChild or similar function would be far too time consuming and probably rather resource intensive. Is there anyway I can just add a 'chunk of html' to this table row and in this chunk define the table columns?
I'm trying to add a certain number of row in one click via javascript. So far I could manage to add one row but is there a way to add multiple row in one click? Also can I add colspan to it?
Heres my code:
<html> <head> <title>Example of Problem</title> <meta content="Microsoft Visual Studio 7.0" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE">
i am having a table with some rows, which are shown under some categories. how can i dynamically add some rows to the table. there is a '>>' symbol infront of each category names. when i click on that symbol, i want to enlarge this category by adding more no of rows under this. And the symbol must turn to '<<'. when click on this, the reverse thing, ie, remove some rows and shows the initial rows.
