Monday, August 01, 2005
HTML Table Delete Row
Add rows and delete specific rows dynamically from an HTML table.
Update: 2005-08-16
version 1.0
Stuck with the basic structure of BETA-3.
Update: 2005-08-10
version: BETA-3
I've rewritten the code. The delete row script is still in beta, but I like the current version better than previous versions, so it's basically what I plan on releasing as version 1.0. The current version, BETA-3, addresses the question in Mark's comment below. Existing rows with delete buttons/checkboxes can be loaded now.
posted by Keith [8/01/2005 04:48:00 AM] - permalink - 71 comments
71 comment(s):
wrote:
this is an awesome script and I am usign it to create a cook book web app for my wife where she can add/delete ingredients and cooking steps... Very cool so far...
One question though, once I get all the inout I want, I am writing it to a DB... How can I get that list of ingredients out of the DB in such a way that they are in a table where I can delete ingredients and add more???
I tried dynamically creating the initial table from the DB data, but the delete buttons don't seem to work...
I hope that makes sense...
Thanks,
Mark
Posted [8/06/2005 10:13:00 AM]
Keith wrote:
Mark,
I boiled down your question into a simple objective. To have rows on the page when the it loads, and for those rows to have the same functionality as the dynamic rows.
You said that you "tried dynamically creating the initial table from the DB data" so does that mean you placed the DB data into HTML tags, or that you called addRowToTable?
If the former, then I found many problems with that approach. Hopefully you didn't already try the latter, because that's the way I suggest doing it.
First a brief summary of what I found with the HTML tag approach. In your case you'd have server side data in between HTML tags, but all I needed to test this were the tags and data hard-coded into the source. The main problem is Mozilla browsers treat any whitespace between tags as an element of type [object Text], which throws off the reordering code, because of its relative DOM navigation. One solution could be to eliminate the white space, but that's too flimsy a solution. Everything else I tried got way too complicated. I thought about going back to the ID approach (all rows would have an id), but I wanted to avoid that.
So I decided to load the initial rows dynamically.
Until I get the changes up, here's the basic idea. The normal addRowToTable function can be tweaked to take optional arguments (the DB data) and then it can be called repeatedly from another function, which is triggered on the page load. It's in that other function that you would put the DB values.
Posted [8/07/2005 09:22:00 PM]
Keith wrote:
This comment has been removed by a blog administrator.
Posted [8/07/2005 09:34:00 PM]
wrote:
hi, thankx for the amazing code first. well.. i have implemented it in my project but i have some problems in IE
1. IE doesn't set style with 'setAttribute' ...
2. I'm not able to set an 'onClick' event in a '< input type=button >', it works fine in other browsers but not in IE...
Code looks like this:
var cellLeft = row.insertCell(0);
var e = document.createElement('input');
e.setAttribute('type', 'button');
e.setAttribute('name', 'pop');
e.setAttribute('value', 'UP');
e.setAttribute('onclick' , "popUp('pop_parts_factura.php?camp="+iteration+"')" );
cellLeft.appendChild(e);
my email is batperfect@gmail.com if you have any ideas
Posted [8/11/2005 03:44:00 AM]
Keith wrote:
One way of getting around the event problem is by avoiding setAttribute and using the technique in tabledeleterow.js (BETA-4 as of this writing).
Refer to the line:
btnEl.onclick = function () {deleteCurrentRow(this)};
In your example, you include a variable in the scope of your setAttribute.
I rearranged my code to do the same thing, and the following works in IE, Firefox, and Opera.
btnEl.onclick = new Function('deleteCurrentRow(this,"' + someVar + '")');
As for style, I'd recommend using a style sheet. If you have to change style for each element, then try the following:
btnEl.style.backgroundColor = 'blue';
btnEl.style.color = 'white';
If you're wondering why I'm avoiding using setAttribute, it's because setAttribute obviously has problems setting things other than simple attributes.
Posted [8/12/2005 03:43:00 AM]
wrote:
i already used the same workarounds i see you sugested.
-i used a function for 'onClick'
-i set up classes for every cell and when i wrote rows with JS code loked like:
el.className="filed3class";
and it worked. i had also a litle trouble with reorderRows() when i made a 5 cols row, but i realised i don't need to reorder rows, and put a return; in the function...
anyway, great script. thanks again.
Posted [8/12/2005 05:05:00 AM]
wrote:
hi!
i'd just like to ask how you can access/get the data on the textbox and label. you see, i'm using C# and in my code behind file (.cs) i directly called the table using gcriteria.rows[i].myRow.two.value (gcriteria is my table id) but it gives me an error that the rows are inaccessible due to its protection level even though i already set everything to public. please... really need help on this one. thanks!
Posted [8/13/2005 12:30:00 AM]
Keith wrote:
Andy,
My first reaction to your question is that your problem is convoluted by your use of C#.
In my tabledeleterow.html page, the script does exactly what you're asking about. It references the text box values just fine.
When you start throwing server side code into the equation you have to make sure you understand what's being executed server-side and what's being executed client-side.
Could you provide more information?
I'll also talk your question over with Eric, mredkj.com's .NET guy.
Posted [8/13/2005 01:25:00 PM]
wrote:
I would like to post the values stored in the table to another php page. How would I get the values in each input field?
Please help!
Posted [10/23/2005 02:47:00 PM]
Keith wrote:
To answer the question about posting the values to another PHP page, it should be fairly straightforward. Then I looked at my code in tabledeleterow.js, and realized it was confusing.
Refer to function fillInRows. In there I make calls such as
addRowToTable();
You can pass in an argument, but in version 1.0, addRowToTable does not do anything with that value. You can easily change the function to use the value.
For example, find this line:
txtInp.setAttribute('value', iteration); // iteration included for debug purposes
And change iteration to val
Then refer again to fillInRows, where you would do your magic to get PHP to put in the posted values. That's beyond the scope of this tutorial, but basically you could loop the values in PHP and echo each so it makes a filled in addRowToTable call in JavaScript once the page is rendered.
Posted [10/23/2005 10:54:00 PM]
wrote:
Hey Keith,
Thanks for the tip!! I will look into it and let you know how it goes. I have another question for you. Whenever, I post the values entered in dynamic table to another page and then if I press the back button on my browser the values are no longer existing and have to be re-inserted because of the window.onload=fillInRows; Is there a way of not erasing them as I would like to have them displayed in case a user wants to change it.
I'm not sure if it's possible or not...would very much appreciate your help over this.
Posted [10/24/2005 09:52:00 AM]
wrote:
Hi Keith,
I would like to know how I could erase the whole table with values if a user clicks on a checkbox. Would very much appreciate your help over this!
Emmanuel
Posted [10/24/2005 04:49:00 PM]
Keith wrote:
As a general message to anyone posting questions, I may not be able to promptly answer every time, so don't take it personally if a question goes unanswered for a while.
Emmanuel, the browser back button is something that complicates web applications. I don't have a good answer for you, but I can think of some vague suggestions. One possiblity is using frames, one hidden and one with the visible content, so the hidden frame never gets refreshed, and store information in the hidden frame. That's just one suggestion, and I haven't tried it, so it may not work the way you want.
Your question is general purpose enough that you might want to ask around some javascript message boards.
Your second question is "I would like to know how I could erase the whole table with values if a user clicks on a checkbox."
Given the code that's already in tabledeleterow.js version 1.0
function clearAll()
{
if (confirm('Do you want to clear all the values?')) {
var tbl = document.getElementById(TABLE_NAME);
for (var i=0; i<tbl.rows.length; i++) {
if (tbl.rows[i].myRow) {
tbl.rows[i].myRow.two.value = '';
}
}
}
}
Posted [10/24/2005 09:39:00 PM]
wrote:
Keith --
I really love your script and I am trying to set up something for my wife’s “Home business”. I have been unsuccessful in trying to get an “onChange()” function to operate properly. What I am attempting to do is when a “QTY” is entered into a text box where the “PRICE” is pre-populated, the “TOTAL” text box is updated with the QTY*PRICE. I have everything working perfectly as far as my database populating the select box and the add/remove/reindex - all work awesome… Please keep in mind that I am a somewhat of an intermediate to novice programmer :( ..
Error = ‘document.invoice.qty1.value’ is null or not an object.
I have tried various ideas:
// cell 1 - input text
var cell1 = row.insertCell(1);
var name_itq = INPUT_NAME_PREFIX_q + iteration;
var name_itp = INPUT_NAME_PREFIX_p + iteration;
var name_itt = INPUT_NAME_PREFIX_t + iteration;
var txtInp1 = document.createElement('input');
txtInp1.setAttribute('type', 'text');
txtInp1.setAttribute('name', INPUT_NAME_PREFIX_q + iteration);
txtInp1.setAttribute('size', '2');
txtInp1.setAttribute('value', iteration); // iteration included for debug purposes
txtInp1.onchange = function() {setPrice(name_itq, name_itp, name_itt)};
cell1.appendChild(txtInp1);
function setPrice(name_itq, name_itp) {
var itq=name_itq;
var itp=name_itp;
var itt=name_itt;
document.invoice.+ itt +.value = (document.invoice.+ itq +.value * document.invoice.+ itp +.value);
//alert ("Value is" +document.invoice.+ itp +.value); // for debug purposes
}
TIA --
#@!dave
Posted [11/13/2005 11:18:00 PM]
Keith wrote:
Dave,
You can try:
document.invoice.elements[itt].value = (document.invoice.elements[itq].value * document.invoice.elements[itp].value);
Also make sure setPrice has name_itt as an argument.
Posted [11/14/2005 12:39:00 AM]
wrote:
Kevin --
Thank you for the quick response.. I did the following test:
Test1:
function setPrice(name_itq, name_itp, name_itt) {
var itq=name_itq;
var itp=name_itp;
alert ("Value is" +document.invoice.elements[itq].value); // for debug purposes
}
Results1: error " ' document.invoice.elements[...].value' is null or not an object.
Test2:
function setPrice(name_itq, name_itp, name_itt) {
var itq=name_itq;
var itp=name_itp;
alert ("Value is" +itq ); // for debug purposes
}
Results2: popup window - "Value is qty1"
Test2 shows the var's are passing through correctly, but seem to have no effect on Test1. Sorry for the trouble, but this is a real stinker :) ..
Any other thoughts?
Thanks!
#@!dave
Posted [11/14/2005 10:20:00 AM]
Keith wrote:
Does your form include name="invoice"
Besides that I can't think of any other suggestions right now, just some general advice. Put debug statements in other parts of your code, like when you're setting up the new row.
Posted [11/14/2005 01:59:00 PM]
wrote:
Keith --
Yeah -- The form name=invoice.
The reason that I gave the test samples that I did is that it removes all the form issues and looks to see the data (test2). Test1 does not "Alert" the data.
It appears since the script is dynamically creating the text boxes that for some reason I am unable to refer back to them or get information from them via JS. Of course if I "POST" the data is available to work with, but that is another step.
Thank you for you time. If I figure it out, I will post the results for all to see.
#@!dave
Posted [11/14/2005 03:02:00 PM]
Keith wrote:
Dave,
Refer to the following temporary page:
http://www.mredkj.com/tutorials/tabledeleterow_dave.html
It basically does what you want (multiplies columns after you leave the first text box of any row).
I'm going to take down the page in about a week.
Posted [11/14/2005 11:02:00 PM]
wrote:
hi there, and I hope if you can help me here!!
I try to do a text 'just readonly??' with a button, now this button a calender button so how to assign it to text?
the code:
// cell 2 - input text
var celltxtDate = row.insertCell(2);
var txtInpDate = document.createElement('input');
txtInpDate.setAttribute('type', 'text');
txtInpDate.setAttribute('readonly');
txtInpDate.setAttribute('name' , 'txtpropNameDate');
txtInpDate.setAttribute('id', 'txtpropName');
txtInpDate.setAttribute('size', '40');
txtInpDate.setAttribute('value', '');
celltxtDate.appendChild(txtInpDate);
// cell 3 - input button
var cellbtnCal = row.insertCell(3);
var btnCal = document.createElement('input');
btnCal.setAttribute('type', 'button');
btnCal.setAttribute('value', 'Calander');
btnCal.onclick = function () {funViewCalender(???)};
cellbtnCal.appendChild(btnCal);
Posted [12/07/2005 05:43:00 AM]
Keith wrote:
I haven't gotten a chance to try out your code, so you'll have to tell me what's not working, and what error it's giving.
A quick answer for the readonly question. (I haven't tested it, so you'll need to try it yourself)
txtInpDate.setAttribute('disabled','disabled');
Your other question isn't clear though, and it seems like you've asked the same thing over in my
HTML Table Add Row tutorial. I have a response over there.
Posted [12/07/2005 09:13:00 AM]
wrote:
hi there, I have a question?
when the user add a new row, how to make the button disabled in the previous row every time?
Posted [12/18/2005 04:15:00 AM]
Keith wrote:
"when the user add a new row, how to make the button disabled in the previous row every time?"
It's possible to do what you're asking, but why overcomplicate things when you can just get rid of the row delete buttons and have a button up top that deletes the last row.
I have a simple example of deleting the last row with one button in Table Basics - Add Rows / Delete Rows. Refer to Example A.
Posted [12/18/2005 02:41:00 PM]
wrote:
Hi,
I've question....
In my table i've like 5 rows and i wanted to insert in row 3...right now i;m using your tabledeleterow..but i've problem with reordering the number...any ideas....????
Thanks,
Poyor7
Posted [1/26/2006 10:36:00 PM]
wrote:
Hi,
I've question....
In my table i've like 5 rows and i wanted to insert in row 3...right now i;m using your tabledeleterow..but i've problem with reordering the number...any ideas....????
Thanks,
Posted [1/26/2006 10:37:00 PM]
Keith wrote:
Poyor7,
Let's say you're using insertRowToTable as a starting point. As a test, if you have 5 rows (plus the header), and want to insert between 2 and 3, add the following at the end: reorderRows(tbl, 3);
Of course you'd need to make that dynamic.
Sometime in the next couple days I'll try to extend the code at mredkj.com to do that.
Posted [1/26/2006 11:07:00 PM]
wrote:
Hi,
Thanks...Keith,I will try it....
Thanks Again
poyor7
Posted [1/27/2006 01:51:00 AM]
wrote:
Hi...Again Keith,
I still have the problem....i mean if i wanna insert into row 3 it should be like insertRow(3) then your suggestion reorderRows(tbl, 3); i should put in function deleteCurrentRow(obj) right...please guide me...
Thanks Again,
Poyor7
Posted [1/27/2006 02:05:00 AM]
Keith wrote:
Version 1.1 of Table Delete Row is up.
It can now insert at a specific row using a new radio button column.
Posted [1/27/2006 06:09:00 AM]
wrote:
Hi Keith,
Thanks for the wonderful script. One question on how to delete a row ...I have a image to delete a row instead of button(< href>img src..)Since there is no click event delete row would fail..any ideas on how to delete row by clicking a image?
Thanks
Asha
Posted [2/04/2006 04:28:00 AM]
wrote:
Keith,
Thanks for your script..
I have add rows fucntionality in my screen.User can add any number of rows by selecting
a value from drop down.
Each time i add row to the table, the row numbers are redefined.
Im calling a onchange validation in text box and after validation , i write the value
back to the text box.
The problem is , when i try to rewrite to the text box,i get "object not found error"
i do something like this
i pass the obj to the validation function
var cell5 = row.insertCell(5);
var txtIncentiveAmtInp = document.createElement('input');
txtIncentiveAmtInp.setAttribute('type', 'text');
txtIncentiveAmtInp.setAttribute('name', INPUT_NAME_INCTV_AMT);
txtIncentiveAmtInp.onchange = function () {validateAmount(this)};
cell5.appendChild(txtIncentiveAmtInp);
function validateAmount(obj){
var fieldName = obj.name;
if(fnAmountvalidation(obj,fieldName)){
//after validation i try to rewrite the value
fmtAdjAmt = eval("document.frmDetailRec."+fieldName);
fmtAdjAmt.value = "newValue";
}
}
Another attempt was to pass the row number and rewrite the value,
this time i could rewrite the value but in different row , not on the row where
onchange event was generated, the problem is each time i add a
row the row number is changed.. ..
any thought on how to reset the row number whenever i add new rows to the table
i tried
index= obj.id..(element id wil be the row number)
tbl.tBodies[0].rows[index].myRow.four.value = fmtIncentiveAmt;
value of i should be the row number, in which i had a problem..
I hope im clear.....
Posted [2/04/2006 08:09:00 AM]
Keith wrote:
Asha,
I'll post one way of making an image clickable in a moment.
Hope22,
I'm not really sure what you're trying to accomplish. My tabledeleterow.js script has an example of rewriting the contents of a text box. Have you tried it that way? I'll give another look at your question, but I may not be able to get you an answer.
Posted [2/04/2006 09:58:00 AM]
Keith wrote:
Asha,
To get an image to delete rows, you could use the onclick event on the image. It's been supported in IE since IE 4, and other major browsers like Firefox and Opera support it. However, it's not the best way to do it.
Instead, you can wrap the image in an anchor tag. In my original tabledeleterow.js code, there's a "cell2" section. For the image click functionality, replace the cell2 code with:
var cell2 = row.insertCell(2);
var aEl = document.createElement('a');
aEl.setAttribute('href', '#');
aEl.onclick = function () {deleteCurrentRow(this)};
var imgEl = document.createElement('img');
imgEl.setAttribute('src', 'yourimg.jpg');
imgEl.style.border = '0px';
aEl.appendChild(imgEl);
cell2.appendChild(aEl);
Posted [2/04/2006 10:04:00 AM]
wrote:
Thanks Keith for your timely response(deleting row using images).
Asha.
Posted [2/10/2006 03:11:00 AM]
wrote:
Keith,
How to reset(alternate row colors) the colors after deleting a row?
I have used styles to alternate colors in row.
Problem is when i delete a row from the table, the colors
are retained but not alternately.
I tired reseting the color in function reorderRows(tbl, startingIndex)
var cell5 = row.insertCell(5);
var txtIncentiveAmtInp = document.createElement('input');
txtIncentiveAmtInp.setAttribute('type', 'text');
txtIncentiveAmtInp.setAttribute('name', INPUT_NAME_INCTV_AMT + elementIndex);
txtIncentiveAmtInp.setAttribute('value', '');
cell5.setAttribute('className', classNme); //used styles
cell5.appendChild(txtIncentiveAmtInp);
alert(tbl.tBodies[0].rows[i].style.color);// this returns an object..but im unable to set color to this..
tbl.tBodies[0].rows[i].style.color = '#ded7e7'; //failing
Thanks
Asha
Posted [2/20/2006 10:16:00 PM]
Keith wrote:
Asha,
If I were going to modify the code (tabledeleterow.js version 1.1) to have alternating background colors, here's how I'd do it.
Before changing the javascript, define the following styles in your HTML:
.classy0 { background-color: #234567; }
.classy1 { background-color: #89abcd; }
In addRowToTable, add:
row.className = 'classy' + (iteration % 2);
In reorderRows, add:
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
I tested add, insert, and delete, and it adjusts the row colors. If you find any bugs, let me know.
Posted [2/21/2006 01:18:00 AM]
Keith wrote:
Just to be specific, after
var row = tbl.tBodies[0].insertRow(num);
add
row.className = 'classy' + (iteration % 2);
And add
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
before
count++;
Posted [2/21/2006 01:24:00 AM]
Keith wrote:
I just put up version 1.2 of tabledeleterow.js, which includes alternate row colors.
Posted [2/21/2006 07:51:00 PM]
wrote:
I tried fetching information to the database but I wasn't able to append the contents of mine into the tables.
Does anyone know how to data fetched by a PHP script?
Posted [4/05/2006 05:33:00 PM]
Keith wrote:
Anonymous said...
Does anyone know how to data fetched by a PHP script?
Not sure what you're asking. Maybe you can find the answer at the php.net mysql page.
Posted [4/05/2006 08:47:00 PM]
wrote:
what i meant actually is i have data fetched from a database by PHP and then i wish to append it in the data to the forms.
Posted [4/06/2006 05:50:00 AM]
Keith wrote:
Bert said...
Im having difficulties on my popup date button or datepicker.
In the btnCal.onclick, whenever I click the button it will appear the calendar window to select a date but never select a date and doesn't close the calendar window.
Sounds to me like a problem with the datepicker code, which you didn't show.
Posted [5/01/2006 08:38:00 AM]
Keith wrote:
Bert,
I don't know if I'll have time to look at the whole program, so here's some advice I can give based on what you've told me already.
Let's say you set up the onclick like
btnCal.onclick = function () {show_calendar('txtDate')};
Then you could reference that text box like:
function show_calendar(x)
{
alert(document.forms['ssss'].elements[x].value);
}
Posted [5/02/2006 11:49:00 PM]
Keith wrote:
Bert,
I now see what you're trying to do. My advice before should probably be ignored.
The basic question you're asking is how to pass in a reference to the text input for the particular row in which the calendar button was clicked. One way to do this is to use the existing structure I set up in my tabledeleterow.js script.
In function myRowObject, if you left that the same, then property "two" will reference the input text. So you could set the event handler for the calendar button like this:
btnCal.onclick = function () {
var theRow = this.parentNode.parentNode;
show_calendar(theRow.myRow.two)
};
As a simple test I wrote show_calendar as this function:
function show_calendar(obj)
{
obj.value = 'test';
}
If your real show_calendar function is expecting the text object, then that should work for you.
If it's not working, then make sure you still have the following line in your code:
row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
Or if you modified that, then you need to at least pass in txtInp, and make sure function myRowObject is set up to save a reference to that object.
Posted [5/03/2006 07:41:00 PM]
Keith wrote:
Ok, nevermind that last post. Here's a simpler way.
btnCal.onclick = function () {
show_calendar(txtDate);
};
I still have a bit of learning to do when it comes to working with events and anonymous functions.
Posted [5/03/2006 07:57:00 PM]
Keith wrote:
The solution I just provided has to do with inner functions having access to variables in their parent function. Read more here
Posted [5/03/2006 08:21:00 PM]
Keith wrote:
If anyone's interested, I just added a new mredkj.com page that modifies the original tabledeleterow script to use a calendar script I had previously written.
tabledeleterow-calendar.html
This is obviously based on the questions that Bert had. Thanks for giving me the idea.
If anyone has any corrections, suggestions or comments, let me know.
Posted [5/04/2006 12:34:00 AM]
wrote:
am not able to select the radio button in the code...can any one help me? I would like to delete the rows.
Posted [5/09/2006 01:16:00 AM]
wrote:
hi frnds,
can any one help me out...with this code am not able to select the radio button and also i need the refrence of each radio button..so tht i can select any of the radio buttn and delete that.not as deleting the last one.kindly help me.this is the code am using which i put in loop to execute.
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
var row=document.createElement("TR");
var cell1 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
inp1.setAttribute("type","radio");
inp1.setAttribute("value","");
cell1.appendChild(inp1);
thanks in advance.
regards,
PBG.
Posted [5/09/2006 01:19:00 AM]
Keith wrote:
Bert wrote:
Next work around is to change the date format into mm/dd/yyyy.
Are you using my calendar script? Keep in mind it's still a work in progress. If you are, here's a bit of a hack. Change these lines in CalendarDisplay2.js:
mysteryNode.href = 'javascript:fillInFields(\'' + this.txtId + '\',' + theYear + ',' + (theMonth + 1) + ',' + dayCount + ')';
document.getElementById(idStr).value = (month < 10 ? '0'+month : month) + '/' + (day < 10 ? '0'+day : day) + '/' + year;
Bert wrote:
Also I need to collect all the entered data in the table to insert or save into the database ... including the Item #
One way of sending the Item # would be to put it into a named hidden input.
I'm not sure what your specific question is about saving the rows into a database, but it sounds beyond the scope of my tutorials.
Posted [5/09/2006 02:26:00 AM]
Keith wrote:
Anonymous wrote:
am not able to select the radio button in the code...can any one help me? I would like to delete the rows.
Anonymous wrote:
with this code am not able to select the radio button and also i need the refrence of each radio button..so tht i can select any of the radio buttn and delete that.not as deleting the last one.
Look at the code in my tabledeleterow script at mredkj (link in the blog entry at the top of the page).
What I did to get the radio buttons working was to use innerHTML for IE and the DOM approach for other browsers. It's a bit of a hack the way I did it. Ideally you shouldn't use a try/catch like this, but I couldn't think of a better way to test the functionality without explicitly testing for IE by using navigator.userAgent. Nowadays I try to avoid testing for browser agents.
try {
raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">');
var failIfNotIE = raEl.name.length;
} catch(ex) {
raEl = document.createElement('input');
raEl.setAttribute('type', 'radio');
raEl.setAttribute('name', RADIO_NAME);
raEl.setAttribute('value', iteration);
}
Posted [5/09/2006 02:43:00 AM]
Keith wrote:
Bert,
When I suggested using a hidden input, I meant:
textNode.type = 'hidden';
That won't show on the page without requiring any special css tricks. It may seem like a misnomer to call it an input.
Posted [5/10/2006 06:08:00 PM]
wrote:
Hi,
Is there any way to use multiple tables in a a single page and pass in the a diffrent table name to the table delete row script so that it knows what table it needs to add a row to?
Posted [5/23/2006 02:01:00 PM]
Keith wrote:
Anonymous wrote:
"...multiple tables in a a single page and pass in the a diffrent table name..."
Are you running into any particular problem?
Should be able to just get rid of the occurrences of var tbl = document.getElementById(TABLE_NAME); and pass in tbl to the functions that use it.
Posted [5/24/2006 01:06:00 AM]
wrote:
This is an awescript!!!
I have a table with multiple rows and I would like to have an insert button on each row. When the insert button is clicked on a given row, a new row should be inserted just below it. Any ideas on how to accomplish this?
Posted [5/24/2006 01:23:00 PM]
Keith wrote:
Anonymous said...
"I have a table with multiple rows and I would like to have an insert button on each row"
That would be a cross between what the delete buttons and the insert radio buttons already do. I've been thinking about doing some quick sub-examples for a new page, so maybe I can do something like what you're asking, but I can't guarantee when I'll have that up.
Posted [5/25/2006 09:54:00 PM]
Keith wrote:
Shakir,
To append to a particular row, you can start with the code that's up there in insertRowToTable
Posted [6/02/2006 06:36:00 PM]
wrote:
Hello everyone, this is a fantastic script!
I'm trying to create a pulldown using this script...
I'm able to create the select but how do i populate it with options ?
Thanks in advance for any time and help. haptiK [at] gmail [dot] com if anyone has a way of doing this! :)
Posted [8/24/2006 08:39:00 AM]
Keith wrote:
Anonymous wrote:
I'm able to create the select but how do i populate it with options ?
Try looking at the "select cell" section of the code in my Table Add Row page.
Posted [8/24/2006 10:38:00 AM]
wrote:
Thanks alot keith for your expeditious response! I'll have a look now.
Kind regards, and fantastic work!
Jonathan
Posted [8/24/2006 10:44:00 AM]
wrote:
Keith,
Sure enough. It's there as plain as day. And very straight forward.
Thanks again!
Jonathan
Posted [8/24/2006 10:47:00 AM]
wrote:
Hi Keith,
Thanks again for your script, has helped me a lot with my recent project.
I still have some hickups, though with reordering the rows, inserting a row at a certain point and copying a row.
I must have a row loaded when the page loads, as there are four db dependent selects in it and creating them with innerHTML didn't work; there is a popup calendar in each row, as well.
At the end of the explanation you make a "Note: This script will not work with rows coded in the HTML, because the script won't have any references to those rows' objects. "
I 'translated' your code to my situation, got an image with an anchor deleting the current row, the addRowToTable() function works, too;
This is my row object:
[code]
function myRowObject(textNode, awidth, sel_ord_by, avalue, sel_product, dia, sel_core, eta_cal, sel_final_dest, shp_no, selected_item, aDelete)
{
this.textNode = textNode;
this.awidth = awidth;
this.sel_ord_by = sel_ord_by;
this.avalue = avalue;
this.sel_product = sel_product;
this.dia = dia;
this.sel_core = sel_core;
this.eta_cal = eta_cal;
this.sel_final_dest = sel_final_dest;
this.shp_no = shp_no;
this.selected_item = selected_item;
this.aDelete = aDelete;
}
[/code]
Would you please help me with the following:
1. reorderRows(tbl, startingIndex)
If for example I delete row no 2 (index 1), the rows don't get reordered (1, 3, etc)
If I start adding rows, the numbering goes like this: 1, 3, 3, 4, 5, etc.
[code]
function insertRowToTable()
{
var tbl = document.getElementById('items');
var rowToInsertAt = tbl.rows.length;
for (var i=0; i < tbl.rows.length; i++) {
if (tbl.rows[i].myRow && tbl.rows[i].myRow.selected_item.getAttribute('type') == 'radio' && tbl.rows[i].myRow.selected_item.checked) {
rowToInsertAt = i;
break;
}
}
addRowToTable(rowToInsertAt);
reorderRows(tbl, rowToInsertAt);//
}
[/code]
2. copyCurrentRow(obj)
Don't know how to reference the id of the element in current row (newbie). I use cloneNode(true) to recreate the cells. It only appends a copy of the first row (coded into the HTML) as that's what I have in document.getElementById.
I tried creating a new row and replacing the innerHTML of the cells in one go, but I do need a unique ID for each calendar to work.
The code is quite long, but I have pasted a part of it
[code]
function copyRow(obj)
{
var tbl = document.getElementById('items');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// itemNo
var cellItemNo = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellItemNo.appendChild(textNode);
// aWidth
var cellAWidth = row.insertCell(1);
var awidth = document.getElementById('awidth').cloneNode(true);
awidth.setAttribute('name', 'awidth' + iteration);
awidth.setAttribute('id', 'awidth' + iteration);
cellAWidth.appendChild(awidth);
.
.
.
row.myRow = new myRowObject(textNode, awidth, sel_ord_by, avalue, sel_product, dia, sel_core,
eta_cal, sel_final_dest, shp_no, selected_item, aDelete);
}
[/code]
3. insertRowToTable()
It appends a row to the end of the table, instead of inserting at the selected point.
[code]
function insertRowToTable()
{
var tbl = document.getElementById('items');
var rowToInsertAt = tbl.rows.length;
for (var i=0; i < tbl.rows.length; i++) {
if (tbl.rows[i].myRow && tbl.rows[i].myRow.selected_item.getAttribute('type') == 'radio' && tbl.rows[i].myRow.selected_item.checked) {
rowToInsertAt = i;
break;
}
}
addRowToTable(rowToInsertAt);
reorderRows(tbl, rowToInsertAt);//
}
[/code]
I would appreciate any help. Thanks in advance.
Babi
Posted [9/05/2006 07:54:00 PM]
Keith wrote:
Babi,
I haven't had time to look into your questions, but you may want to try to isolate the problems you're having. For example, with the reordering problem, you can try out your code on a simpler version of the page, maybe by not including the prefilled-in rows. Then debug from there.
Posted [9/07/2006 06:47:00 PM]
wrote:
var cell1 = row.insertCell(1);
var Sel1 = document.createElement('select');
Sel1.name = 'Sel1';
Sel1.options[0] = new Option('A', 'value0');
Sel1.options[1] = new Option('B', 'value1');
Sel1.options[2] = new Option('C', 'value2');
cell1.appendChild(Sel1);
i have use code above to generate a drop down list, is that anyway to get data from database and addin to database
Posted [9/14/2006 05:17:00 AM]
Keith wrote:
Updating a database is beyond the scope of this tutorial. You might want to refer to the documentation for whatever server side language you're using. For example, if it's PHP (and MySQL for a database), refer to http://www.php.net/manual/en/ref.mysql.php
Posted [9/19/2006 09:58:00 AM]
wrote:
Hi Keith,
Thanks for the wonderful script. I am new to programming in general and Javascript in particular and this script has been a lifeline for me. Presently using it for a project I'm working on. I have a row of dynamic text fields and 2 buttons (Add and Delete).
I also have a Save button (not dynamic) which calls on a PHP script to save data input to my database. However, this only saves data in the last row. I was wondering if there was a way to save data to the database in each row once the Add button is click and also delete the data once the Delete button is clicked.
Posted [9/22/2006 08:32:00 AM]
Keith wrote:
anonymous wrote: However, this only saves data in the last row
The javascript should name the input fields to have unique names, and you should be able to account for that in your PHP code. Or if you want, you can name a group of inputs the same thing and add a [] to the name. Refer to my brief tutorial at mredkj.
Your question about making updates on the fly would probably best handled by using an AJAX approach. Currently I don't have a tutorial to do that, and am not sure when I'd be able to.
Posted [9/26/2006 03:45:00 AM]
wrote:
The javascript should name the input fields to have unique names, and you should be able to account for that in your PHP code.
Keith,
Thanks a lot ... I figured it out.
M
Posted [9/27/2006 07:38:00 AM]
wrote:
So where does myRow attribute come from? It is not an attribute fo HTMLTableRowElement.
Posted [10/11/2006 04:50:00 PM]
Keith wrote:
Anonymous wrote:
So where does myRow attribute come from? It is not an attribute fo HTMLTableRowElement.
Good question. myRow is not part of the DOM or HTML standard. It's a custom javascript property. I just added a brief note about this in the mredkj.com page.
Posted [10/11/2006 07:52:00 PM]
wrote:
This script is the best script;
I love it;
I use it alot in alot of my applications. I've also been able to tie AJAX to it; using the events calling a function;
If anyone needs help let me know.
-Serge
