|
HTML - Adding Table Fields Dynamically
Hello, 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 one. Here is my code.. HTML Code: <img src="images/add.png" width="15" height="15" align="right" >
<div class="open">
<table width="200" border="0">
<tr>
<td class="propertyCol">Input: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
<table width="200" border="0">
<tr>
<td class="propertyCol">Output: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
</div
Similar TutorialsI have a simple web page which consists of one column of cells, five rows down. I would like to have some sort of hierarchical structure that allows me to click a link in the top-most cell to bring up a set of links in the second row, then click on one of these links to bring up some more links in the third row etc. Clicking on a different link in the top-most cell will then bring up a different set of links in the second row, and so on. Can anyone suggest a method to do this? I've been looking into frames but i've read that this isn't best practise. Thanks. I've a table with table header and table body. Each row in the table body has a delete button. On click of the delete button the whole row is made invisible by a javascript function. Now if the last row of the table body is deleted I want the whole table to be made invisible. Could someone please help me in acheiving the following goal. - To check the visibility of each row in table body. (The row is made invisible by setting display = none). Hey... I am working on a site for me and my friends, and I have a question. See this website. As you can see I have used imagemapping to link the area where home is written, to bring you back to the frontpage. I would like to know how i could put a textbox or table inside the white square, or possibly a frame linked to the other sites. Code: Here is my HTML coding:<HTML> <HEAD> <TITLE>Calypto Productions Website</TITLE> </HEAD> <BODY bgcolor= "#000000"> <style type="text/css"> </style> <img src="http://calypto-productions.webs.com/atomicfrsteutkastdz0.png" usemap = #example border=0> <map name=example> <area shape=Rect Coords="262, 125 , 406, 170" Href="http://calypto-productions.webs.com/alt.htm/"> </map> </BODY> Hello, For ages I have been trying to figure out how to add sides to my table, however I can not figure it out, please help. Basically I want side added to the table on this page of my host. - If anyone could help me that would be great. Thanks. Hello, I've been trying to fix this table problem for hours... I must be missing something simple. I have a table with a bunch of images - the logo and top navigation. For some reason, each column is adding in extra pixels. I've defined the height of each image, and tried dozens of things with column height & stylesheets to get this stuff to align properly, with no luck. When I inspect the element in chrome, I see that the table & columns within have a greater height than the images within. Can anyone provide me with a bit of guidance? Here's the table code: HTML Code: <table id="mast" class="mast" width="770" cellpadding="0" cellspacing="0" border="0"> <tr> <td rowspan="2" height="88"><img src="images/Mast_Smile.png" width="182" height="88" alt="" /></td> <td colspan="9" height="52"><img src="images/Mast_Top.png" width="588" height="52" alt="" /></td> </tr> <tr> <td height="36"><img src="images/Mast_Button_Book.png" width="88" height="36" alt="The Book!" /></td> <td height="36"><img src="images/Mast_Space_1.png" width="24" height="36" alt="" /></td> <td height="36"><img src="images/Mast_Button_Who.png" width="57" height="36" alt="Who?" /></td> <td height="36"><img src="images/Mast_Space_2.png" width="16" height="36" alt="" /></td> <td height="36"><img src="images/Mast_Button_Media.png" width="102" height="36" alt="ATTN: Media" /></td> <td height="36"><img src="images/Mast_Space_3.png" width="28" height="36" alt="" /></td> <td height="36"><img src="images/Mast_Button_Purchase.png" width="112" height="36" alt="For Purchase" /></td> <td height="36"><img src="images/Mast_Space_4.png" width="21" height="36" alt="" /></td> <td height="36"><img src="images/Mast_Cart.png" width="140" height="36" alt="" /></td> </tr> <tr> <td colspan="10" height="6"><img src="images/Mast_Bottom.png" width="770" height="6" alt="" /></td> </tr> </table> You can see it on my server he http://mmm-hmm.com/_test/index.php Thanks so much for any help! Denis how can i make the user add his own url to a table in the site? Hello everyone, I am trying to partially hide an image in a table cell. In other words, I don't want the part that is supposed to be hidden to show on the adjacent cells. How do I do that Any help would be greatly appreciated. I need two cells to be next to each other. One is a label and the other is a drop down menu. The following code just shows the options next to each other as text. This is also being done in VB.net Code: "<td class=select <option>Fresh Milk</option> <option>Butter</option> </select></td>" & _ Nevermind, got it fixed! Hello, I have a table (with one cell). The table can be quite big (200 items) so I would like the user to be able to scroll it up and down... and I want the user to be able to add and delete an item. I have done something with javascript but it is not complete.. the delete does not work correctly ... the scroll up and down shown the same table. I don't have a clue on how to do the add button. Could you help me please? Here is what I have done so far.... Code: <html>
<head>
<title>Insert/Delete Table Row using DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/ccs">
<!--
form {border:1px solid blue;}
div {border:1px solid red; width:150px; overflow:auto;}
.selectBox { font-size:xx-small;overflow:auto;}
#tblSample td,th {padding:0.5em;}
.classy0 { background-color: #234567; color:#89abcd;}
.classy1 {background-color: #89abcd; color:@234567;}
-->
</style>
<%@ include file="javascriptLib.html" %>
<script language="JavaScript" type="text/JavaScript">
<!--- oculta el script para navegadores antiguos
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var TABLE_NAME = 'items_list'; // this should be named in the HTML
var LABEL_NAME = 'label_list';
var ROW_BASE = 1; // first number (for display)
var MAXLENGTH=5;
function myRowObject(one,two)
{
this.one = one; // text object
this.two = two; // input text object
}
function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
function deleteRows(rowObjArray)
{
for (var i=0; i<rowObjArray.length; i++)
{
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
function reorderRows(tbl, startingIndex)
{
if (tbl.tBodies[0].rows[startingIndex])
{
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++)
{
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count;
var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' ');
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
count++;
}
}
}
function clearTable(option)
{
var tbl = document.getElementById(TABLE_NAME);
if (option != 0)
tbl= document.getElementById(LABEL_NAME);
//var lastRow = tbl.tBodies[0].rows.length;
var lastRow = tbl.rows.length;
var i=lastRow-1;
while (i>=0)
{
tbl.deleteRow(i);
i--;
}
}
function showRow (val)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
//var nextRow=tbl.rows.length;
var iteration = nextRow + ROW_BASE;
var row = tbl.tBodies[0].insertRow(nextRow);
row.className = 'classy' + (iteration % 2);
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '77');
txtInp.setAttribute('value', val);
txtInp.readOnly = true;
cell1.appendChild(txtInp);
}
function addRowToTable(val,num)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + ROW_BASE;
if (num == null) // appends to the end of the table
{
num = nextRow;
}
else // Insert at row num
{
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - index
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '62');
txtInp.setAttribute('value', val); // iteration included for debug purposes
txtInp.readOnly = true;
cell1.appendChild(txtInp);
// cell 2 - delete button
//-----------------------
var cell2 = row.insertCell(2);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Delete');
btnEl.onclick = function () {deleteCurrentRow(this)};
cell2.appendChild(btnEl);
// Store the myRow object in each row
row.myRow = new myRowObject(textNode,txtInp);
}
function paintTable(index)
{
var maxLine=index+MAXLENGTH;
clearTable(0);
// add Row with delete and insert options
//----------------------------------------
services=document.forms[0].items.value;
if ((services != null) && (services != ""))
{
var services_array=services.split("|");
sLength=services_array.length ;
if (services_array.length < maxLine)
maxLine=sLength;
// add Row with delete options
//-----------------------------
for (var i=index; i < maxLine; i++)
{
val=services_array[i];
//showRow(1,val);
addRowToTable(val);
}
showLabel(index,sLength);
}
}
function showLabel(index,max)
{
clearTable(1);
next_val=index+MAXLENGTH;
prev_val=index-MAXLENGTH;
var tbl = document.getElementById(LABEL_NAME);
var nextRow = tbl.tBodies[0].rows.length;
// add Previous and/or Next buttons
//---------------------------------
var row = tbl.tBodies[0].insertRow(nextRow);
var celNo=0;
if (index !=0)
{
var cell0 = row.insertCell(celNo);
var btnEl0 = document.createElement('input');
btnEl0.setAttribute('type', 'button');
btnEl0.setAttribute('value', 'Previous');
btnEl0.onclick = function () {paintTable(prev_val)};
cell0.appendChild(btnEl0);
celNo++;
}
if (next_val <= max)
{
var cell1 = row.insertCell(celNo);
var btnEl1 = document.createElement('input');
btnEl1.setAttribute('type', 'button');
btnEl1.setAttribute('value', 'Next');
btnEl1.onclick = function () {paintTable(next_val)};
cell1.appendChild(btnEl1);
}
}
// end hiding from old browsers -->
</script>
</script>
</head>
<body onLoad=paintTable(0)>
<form onSubmit="return false" method="post" name="my_form" action="">
<table border= "2" cellspacing="0" id="items_list" >
<tbody></tbody>
<input type=hidden name="items" value="1|2|3|4|5|6|7|8|9|10|11">
</table>
<P><P><table border="1" id="label_list">
<tbody></tbody>
</form>
</body>
</html>
Please, help me! Thanks Ok, so this is probably a pretty obvious question... But I'm not finding an answer via google... How can I dynamically reposition the footer and enlarge the sandbox so that I don't have to make a new css for every page on the site. This way I can put different amounts of content in the sand box... http://wessell.net/david/project/newdesign/index.php Thanks David! http://www.dynamicdrive.com/dynamici...iframessi2.htm This is the tutorial I followed. I did everything it said to do and it worked on my index page where the iframe is located. The only problem is when I try to load a new page into that iframe the iframe doesn't extend and scroll bars appear. On the tutorial there is an example of what i'm talking about. Does anybody know why the other page doesn't extend? Here is an exmaple: http://www.dejavulifestyle.com/dvsite/example.html It's the video page that i'm trying to open in the iframe. Edit: I meant to type dynamically in the title. i hav to take an user input in terms of drop down box... n dependin on it the same page shud display certain other drop down boxes or else direct text input . how can it be done ??? as in the user input shudnt hit the server for reloadin the page. I have a input form i.e: Code: <tr> <td>Enter Salary:</td> <td><input type="text" name="text1" /></td> </tr><tr><td> <input type="button" name="button1" value="Submit" onClick="func(this.form)" /> </td></tr> This takes a input,and user clicks submit and it does some processing.... But I want to take multiple entries from the user before he clicks the submit button.But I dont know how many times he will enter data..so how to display the text field multiple times dynamically???? I have a table grid whose contents are vast insomuch a horizontal scrollbar is displayed to see the entirety of the text. This text resides in <td> tags. Now, what I want to do is not clip the text inside the <td> tags but word wrap. I thought maybe I could use table-layout:fixed and set the width of the <td> tags. It eliminates the scrollbar, but it clips the text. Is there a way I can word wrap text inside <td> tags? I tried using overflow, but that didn't work. Any help would be really appreciated. Hi, I am creating a multilingual website and would like to know how I can assign name to sumbit button dynamically rather than hard-coding it in the html page. <input type='submit' value=' MyButton '> Is there a way I can assign the value of the button in a javascript variable and call that from html page. (or) Is there a way I can call a javascript method that can assign a value to this button. Hello, I am using this script http://www.frontiernet.net/~bambam00.../tooltip_e.htm to have some text appear on top of my images at: http://www.greekconcierge.com/group.php I need a function which can correctly calculate the coordinates in the "FIX" element of that script so that the tooltips are positioned correctly for different screen resolutions. I suppose the function will need to find the center of the screen and then use relative positioning. any ideas? thanks, Andy I have a html form drop down menu, and I wanted to increase the line height dynamically on load of drop down. How can I achive this? Thanks in advance. I'm trying to make a little secret santa auto-emailer thing for my family. I've run into a bit of a problem with some html. I'm trying to superimpose each persons christmas list over the image of a scroll, so it's like it's written on the scroll. (Corny, I know, but it's christmas!) The problem is when people have wishlists that are too long. Attached are two images to illustrated: This is how it should look: Good. but this is what happens when their list is too long: Bad. I'm using tables to do it right now, but I'm open to whatever (except maybe CSS. If it's easy I could, but otherwise I'm a noob). My current approach was to divide the image into 9 sections, put each section into a cell in the table, and superimpose the text over the top of the center cell. (I know I could've divided it into fewer images, 3 probably, I will if I have to reupload the images). Here's the code I'm using right now: Code: <table border="0" cellpadding="0" cellspacing="0">
<TR><TH><img src="http://img380.imageshack.us/img380/9459/101zx7.png"> <!--top left image-->
<TH><img src="http://img208.imageshack.us/img208/9360/102xj5.png"><!--top center image-->
<TH><img src="http://img368.imageshack.us/img368/3449/103xh4.png"><!--top right image-->
<TR height="446"><TH><img src="http://img368.imageshack.us/img368/5594/104du5.png"><!--middle left image-->
<TH width="311" background="http://img368.imageshack.us/img368/5290/105ql2.png"><!--center image-->
{The Christmas List Goes Here}
<TH><img src="http://img368.imageshack.us/img368/3397/106iv7.png"><!--middle right mage-->
<TR><TH><img src="http://img201.imageshack.us/img201/5362/107xc4.png"><!--bottom left image-->
<TH><img src="http://img224.imageshack.us/img224/1498/108jd6.png"><!--bottom center image-->
<TH><img src="http://img526.imageshack.us/img526/8285/109br7.png"><!--bottom right image-->
</table>
I don't need anyone to code it exactly for me, just point me in the right direction. I'm fine with modifying the images so there's a section that can be repeated without looking bad. I'm just not sure how to dynamically "grow" the scroll as the list gets longer. Can anyone help me? hi guys, im new here, and by no means a web designer/coder. however i do dabble in some HTML to save time & money. at present, customers sign up on our website, the form sends that data to our database. (for this we use the pure360.com API) upon submission, a trigger email is sent to that customers email with a voucher, the voucher says to Ryan (ryan@email.com) etc. which is fine. however we would prefer it to be online instead of via email. so customers sign up, data is sent from pure360 form to our database then the success URL shows the voucher on screen with their data pre populated into the fields. could anybody help me with the code to do this? i have attached the basic signup form coding. thanks in advance, Ryan |
|||||||