|
JavaScript - Adding New Table To Existing Table
hi all,
i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function reformatMe() {
var divObj = document.getElementById('reformatMe');
var numRows = document.getElementsByTagName("tr");
var z = "1";
for (i = 0; i < numRows.length; i++) {
if (numRows[i].childNodes[0].innerHTML == "2") {
var markStart = numRows[i];
alert(markStart.nextSibling);
var closeTable = document.createElement("/table");
var addTable = document.createElement("table");
//var tbody = document.createElement("tbody");
//addTable.appendChild(tbody);
addTable.setAttribute("id", "subOptionID" + z);
if(numRows[i+1] != null){
numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
}
z++;
}
}
alert(divObj.innerHTML);
}
</script>
</head>
<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">
<tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr>
</table>
</div>
</body>
</html>
Similar TutorialsHi, I am trying to use the onmouseover on a table element (table/row/cell) when creating the table using HTML everything is ok. Code: <TABLE border="2" >
<TR >
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
<TD>24N</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
However when I am trying to do the same using javascript it is not working. I can see the correct table data and background color but it doesnt change on mouse over. Code: function test_table(srcHolder)
{
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "black";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<3; i++)
{
tmpRow = srcTable.insertRow()
for(j=0; j<3; j++)
{
tmpCell = tmpRow.insertCell()
tmpCell.innerText = j;
tmpCell.bgColor ="red"
tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
tmpCell=null;
}
tmpRow = null;
}
}
can someone explain to me what's wrong? 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.. 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
Hey. so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that. Here is what I have so far: Code: function add_new_proj(){
new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
var projectID=table.insertCell(0);
var ProjectName=table.insertCell(1);
var Client=table.insertCell(2);
var ClientProjectID=table.insertCell(3);
var delete_cell=table.insertCell(4);
projectID.innerHTML = new_proj_id;
ProjectName.innerHTML ="";
Client.innerHTML = "";
ClientProjectID.innerHTML = "";
delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
}
this is an example of what the cells look like (the ones that already exist, generated via PHP code): PHP Code: echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event. any help would be great! thanks I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell. Thanks in advance for any help, Cyber-guys Here is the code: [CODE] <html> <head> <style> body{ background-repeat: no-repeat; background-position: 200 100;} </style> <script language="JavaScript"> <!-- // (C) 2006 CodeLifter.com var speed = 3000; var crossFadeDuration = 2; var Pic = new Array(); Pic[0] = 'slideshow1_1.jpg'; Pic[1] = 'slideshow1_2.jpg'; Pic[2] = 'slideshow1_3.jpg'; Pic[3] = 'slideshow1_4.jpg'; Pic[4] = 'slideshow1_5.jpg'; var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.body.style.filter="blendTrans(duration=crossFadeDuration)"; document.body.filters.blendTrans.Apply(); document.body.filters.blendTrans.Play();} if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed)} } //--> </script> <title> CodeLifter.com :: Background Image Slideshow With Crossfade </title> </head> <body onload="runSlideShow()" bgcolor="#000000"> <table border="0" width="444" cellpadding="0" cellspacing="0"> <tr> <td> <font size="2" face="Verdana,Arial" color="#FFFFFF"> Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer... </font> </td> </tr> </table> </body> </html> Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers. My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon. I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated. Here is the existing function which tells a link to be active or selected: Code: var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code: Code: <ul class="topnav"> <li><a href="#">Home</a></li> <li><a onclick="CngClass(this);" href="#">Top Link 2</a> <ul> <li><a onclick="CngClass(this);" href="#">Cookies</a></li> <li><a onclick="CngClass(this);" href="#">Events</a></li> <li><a onclick="CngClass(this);" href="#">Forms</a></li> <li><a onclick="CngClass(this);" href="#">Games</a></li> <li><a onclick="CngClass(this);" href="#">Images</a></li> <li><a onclick="CngClass(this);" href="#">Navigations</a> <ul> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">JQuery</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tutorials</a> <ul> <li><a onclick="CngClass(this);" href="#">HTML</a></li> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">Java</a> <ul> <li><a onclick="CngClass(this);" href="#">JSP</a></li> <li><a onclick="CngClass(this);" href="#">JSF</a></li> <li><a onclick="CngClass(this);" href="#">JPA</a></li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> <li><a onclick="CngClass(this);" href="#">Upload script</a></li> </ul> Thanks for any help or advice. My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. hi guys i having some problems with jquery plugin table sorter on a dynamic table. if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code:
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script>
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script type="text/javascript"/>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<form id="form1" name="form1" method="post" action="">
<label for="Position">Position</label>
<select name="Position" id="Position">
<option>QB</option>
<option>HB</option>
<option>FB</option>
<option>WR</option>
<option>TE</option>
<option>RG</option>
<option>RT</option>
<option>C</option>
<option>LG</option>
<option>LT</option>
<option>CB</option>
<option>LB</option>
<option>SS</option>
<option>FS</option>
<option>DE</option>
<option>DT</option>
<option>P</option>
<option>K</option>
</select>
<input type="submit" name="Summit" id="Summit" value="Submit" />
</form>
<p> </p>
<p> </p>
<table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
<thead>
<tr>
<th bgcolor="#FF0000">id</th>
<th bgcolor="#FF0000">Team</th>
<th bgcolor="#FF0000">FirstName</th>
<th bgcolor="#FF0000">LastName</th>
<th bgcolor="#FF0000">Position</th>
<th bgcolor="#FF0000">Year</th>
<th bgcolor="#FF0000">Overall</th>
<th bgcolor="#FF0000">Speed</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
</tr>
</tbody>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on I've tried using this to do it, but it isn't working... string.replace(/(<table([^>]+)table>)/ig,""); I have a master page with a table that contains main content and side bar content. The main content is where the different pages of the site are shown, and the side bar content has stuff like email and friends lists. The mail list is on a model popup and when opened will ajax populate the table with rows containing image, subject, sender, time, all in different td's. When I click a row, the message pops up. From the message I can choose to reply or delete. When I delete I want to fade out the row that was deleted. I can wait the 10 seconds until the list does a refresh but I would rather have this cool visual effect. My problem is I am having difficulty selecting the tr I want. My table has an id of MainMailTable and when I check it does not have the ct100: added in front. Here is what I am trying: Code: $('#MainMailTable:tr:has(td:contains(' + subject + '))').fadeOut(1000);
I am trying to find the row that contains the subject of the message I want to delete. I guess that isnt really unique, and maybe I should add a hidden td with an id to the row (can Jquery get a hidden field?). But I would like to be able to get this first step to work. When I try: Code: $('tr:has(td:contains(' + subject + '))').fadeOut(1000);
the whole page disappears, so I think I may be close. Thank you in advance for any assistance. Hello Everyone, So I am attempting to put a table within my JavaScript. However, everything that I try does not work. I have done a ton of research on how to do this but it's always with different scenarios, or it just does not work for me. Any hints would be appreciated, thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<link rel="stylesheet" type="text/css" href="UNIT_3.css"/>
<title></title>
</head>
<body>
<script type="text/javascript">
<!--
document.write('<h1>Number Square<h1> <br/>');
document.write('<table>');
for(var intSquare = 1; intSquare <=10; intSquare++)
{
document.write('<tr>');
document.write('<td>' + intSquare + "" + intSquare + '</td>');
document.writeln(intSquare + "" + intSquare * intSquare);
document.write('</tr>');
document.writeln("<br/>");
}
document.write('</table>');
// -->
</script>
</body>
</html>
Code: rownumber = 2;
detailsTable = document.getElementsByName("detailsTable");
detailsRow = detailsTable.getElementsByTagName("tr")[rownumber];
name = detailsRow.getElementsbyTagName("td")[0];
address = detailsRow.getElementsbyTagName("td")[1];
address2 = detailsRow.getElementsbyTagName("td")[2];
phone = detailsRow.getElementsbyTagName("td")[3];
email = detailsRow.getElementsbyTagName("td")[4];
alert(name);
I have been told if I want to get the text from each cell I can use: alert(name.firstChild.nodeValue); But I don't understand how to do this for what I am wanting to do. Here is my HTML: Code: <table border="0" name="detailsTable"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> Im making a html javascript table that is set to take the number of rows and cols from the user input. i cant make sense of the psuedocode the teacher gave us though. can anyone convert the psuedocode to actual code? the point of the lesson is while loops and do while loops. i basically understand the concept but his psuedocode confuses me :/ im trying to make my question is clear as possible. ask if i've left out a key detail var cols; var rows; cols = prompt("enter number of cols", "5"); cols = parseFloat(cols); rows = prompt("Enter ynumber of rows", "5"); rows = parseFloat(rows); print "<table border=1>" FOR i = 1 to rows DO print "<tr>" FOR j=1 to cols DO print "<td>Row " + i + " Col " + j + "</td>" END FOR print "</tr>" END FOR print "</table>" im confused about the "print" is that meant to be document.write.? ive tried a million ways. ps. the "cols" and "rows" are the variables. i already have it set to take the values with a prompt from the user. thanks alot (im a student trying to learn this in college) thats why the whole program is kinda pointless) I have an 11pm deadline to submit this. I have code that hides some check boxes based on what is selected in a radio button, and it works great. I am wondering if it could hide the entire table row instead of just the boxes so it decreases white space on my form, Here is my current code, <tr id="playIntroRow"> <td class="editLabel"><span>*</span>Play Intro:</td> <td> <label>Yes <input type="radio" name="playintro" value="1" onclick="document.getElementById('voiceIntroRow').style.visibility='visible';" /> </label> <label>No <input type="radio" name="playintro" value="0" checked onclick="document.getElementById('voiceIntroRow').style.visibility='hidden';" /> </label> </td> </tr> </cfif> <cfif voiceStatus eq "on"> <tr id="voiceIntroRow" style="visibility: hidden;"> <td class="editLabel"><span>*</span>Intro Message:</td> <td><cfscript>voiceIntroRenderer.Render();</cfscript></td> </tr> </cfif> Hi, I am trying to create a radio button that when clicked shows a table. IF you can recommend a way to do it without Javascript that would be MOST helpful. Otherwise here is what I've got so far: [CODE]<input type="radio" name="product" onclick="OnProductClick(this)" value="Stats" />Statistics <input type="radio" name="product" onclick="OnProductClick(this)" value="Tradinghistory" /> Trading History </p> <script type="text/javascript"> var c = true; var b = true; function OnProductClick(product) { if ((c) && (product.value == "Stats")) { document.getElementById('St').style.display = "block"; c = false; b = true; } else if ((b) &&(product.value == "Tradinghistory")) { document.getElementById('TrdH').style.display = "block"; c = true; b = false; } } </script>[CODE] Where St and TrdH are 2 seperate div ids for 2 different tables. Please Help. Many Thanks I use an api which is javascript and jQuery enabled. I have function with sender and args parameters. With args.cell.innerHTML I can change inner html property of the cell. How can I change row background color? I can change cell background with Code: args.cell.style.background = "#ff0000"; I tried with Code: args.cell.childNodes.style.background = "#AFD4EF"; args.cell.parent().childNodes.style.background = "#AFD4EF"; args.cell.parent().parent().childS().style.background = "#AFD4EF"; args.row.style.background = "#AFD4EF"; hi i have a table with some document.write statements inside that write inside the cells. i need to refresh the table from a function so the statements will execute again. but i only want the table to refresh not the whole page document.location.reload() this does the page but can i put the tables id in the brackets or something. thanks Hi All, I am working on a script to generate a dynamic table and populate the fields in that table with data from a number of text fields on my page. The page uses Adobe spry validation and this is the only way I can get my validation to function and add the data to the table dynamically (I had a script where the text fields were part of the first row and blank rows were added dynamically but the validation would not work for the added rows... This is a workaround). Being new to JS I did the best I could and I think it's clear what I am going for but I am sure my syntax and method usage is off. When I click to add the table row, I get "[object HTMLLabelElement]" in each cell (dunno what that is). Could someone please help me get going in the right direction with this code? Here it is and thanks in advance for any help. Code: A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<SCRIPT language="javascript">
function addRow(tableID) {
//These variable are commented out and coded inline below.
//var StartTime = document.getElementById(StartTime);
//var EndTime = document.getElementById(EndTime);
//var MaterialID = document.getElementById(MaterialID);
//var Title = document.getElementById(Title);
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute("id","StartTime[]");
//Set the value to the form's textfield.
element2.value = document.getElementById(StartTime);
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.setAttribute("id","EndTime[]");
//Set the value to the form's textfield.
element3.value = document.getElementById(EndTime);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute("id","MaterialID[]");
//Set the value to the form's textfield.
element4.value = document.getElementById(MaterialID);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute("id","Title[]");
//Set the value to the form's textfield.
element5.value = document.getElementById(Title);
cell5.appendChild(element5);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<body>
<span id="spryStartTime">
<label for id="StartTime">Start Time:</label><br />
<input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for id="EndTime">End Time:</label><br />
<span id="spryEndTime">
<input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for id="MaterialID">Material ID:</label><br />
<span id="spryMaterialID">
<input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<label for id="Title">Title:</label><br />
<span id="spryTitle">
<input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<!--
I would prefer not to start with a table with blank rows
(but rather create the rows already populated)
but I can work on this later.
-->
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
</TR>
</TABLE>
<script type="text/javascript" />
var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
</script>
</body>
</html>
Hi, I would like to increase my table row when users hit enter. Please find my html code below. Code: <form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" id="tblSample">
<tr>
<td align="center"><strong>NO</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center"><strong>QTY</strong></td>
<td align="center"><strong>PRICE</strong></td>
<td align="center"><strong>TOTAL</strong></td>
</tr>
<tr>
<td align="center"><label>
<input name="textfield2" type="text" id="textfield2" size="8" />
</label></td>
<td align="center"><label>
<input name="textfield" type="text" id="textfield" onclick="addRowToTable();" size="80"/>
</label></td>
<td align="center"><input name="textfield3" type="text" id="textfield3" size="8" /></td>
<td align="center"><input name="textfield4" type="text" id="textfield4" size="8" /></td>
<td align="center"><input name="textfield5" type="text" id="textfield5" size="8" /></td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">total</td>
</tr>
</table>
</form>
|
|||||||