JavaScript - Add Table Row In Keypress
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> Similar TutorialsHey CodingFourm-ites! Ive scoured the internet for scripts that make a <div> follow the mouse, and have found one that seems to work well. However, I want the <div> to stop moving when the CTRL or the SHIFT key is pressed, I dont care which. Hopefully, I can have a div that follows the mouse at an offset that contains some click-able items, so a menu is always by your mouse. Ive tried now more than a few times to put together a piece of code that can achieve this, but none have worked. Can somebody write a script that can achieve this, or point me in the right direction? Thanks guys! Current JS for mouse follow: Code: var divName = 'mouseFollow'; // div that is to follow the mouse // (must be position:absolute) var offX = 15; // X offset from mouse position var offY = 15; // Y offset from mouse position function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;} function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;} function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible'; obj.left = (parseInt(mouseX(evt))+offX) + 'px'; obj.top = (parseInt(mouseY(evt))+offY) + 'px';}} document.onmousemove = follow; The original code can be found at: http://javascript.about.com/library/blfollow2.htm On http://kisa.ca/cc/ I'm using JQuery's .keydown() to grab arrow keys. http://pastie.org/938572 But my friends using Linux are unable to use arrows to play the game: http://alteeve.com/files/cc.png Halp? A common javascript function that capitalizes input as user types (onkeypress) no longer works as of IE9. Need a function that also works in IE 9 that doesn't not change method call or interface (as it's used in 150 places throughout application). CALL: [CODE] el.onkeypress = function(el) { return c_capitalizeInput(el); } [CODE] FUNCTION: [CODE] // Intercepts keyboard input and capitalizes keystrokes. // Call with onkeypress="return capitalizeInput(event);" // Compatible with both IE and Netscape/Mozilla function c_capitalizeInput(evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); if (window.event) { // IE if ((evt.keyCode >= 97) && (evt.keyCode <= 122)) { evt.keyCode = evt.keyCode - 32; } return true; } else if (evt.which) { // Netscape and Mozilla key = evt.which; if ((key >= 97) && (key <= 122)) { key = key - 32; evt.target.value = evt.target.value + String.fromCharCode(key); return false; } return true; } else { return true; // Can't do anything for other browsers } } [CODE] Any suggestions to make this work in IE9? I've spent days searching without luck. I need help with the following: I have a program that have some hotkeys set to trigger some events. I would like to activate those hotkeys from inside firefox by clicking on a button. I'm not looking for keypress events, it has to be a button click. So, let's say I click on the button that executes a javascript code that emulates F7 or CTRL+A or whatever key or key combination. Can you guys please help with to find a solution? Oh, and I need it to work with Firefox only. Thanks! I am doing a program to teach pre-schoolers on how to use the keyboard. If there any possible if I press the arrow up key, It will then show a excellent swf, that I have make. if wrong if will come out try again swf using javascript. please help me. im stuck. Hi How I can simulate keypress in google chrome. I want to press a button to fire keypress event to print "X" in input box. On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this: igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt) { if(evt.keyCode==27) { closebgeagal() window.removeEventListener('keypress',igevt, false) } } This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks! I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani 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 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> 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. I've tried using this to do it, but it isn't working... string.replace(/(<table([^>]+)table>)/ig,""); 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'm making an additional page for a phpbb forum for a game. On the page there's 2 textareas to paste in a list of coordinates from a map and then the time it takes to get from each of the coordinates in the left box to each of the coordinates in the right box is calculates and shown in a table. Also is a date/time input, where the user will pick the desired time of arrival. I have this all calculating the times etc. but I would like in one of the columns for it to have a real-time counter that will count down the time before they need to start on the trip in order to arrive at the desired time. I am having a nightmare of a time with this. Here's the script, can someone tell me what I am doing wrong? Code: <!-- INCLUDE overall_header.html --> <script language="JavaScript" type="text/javascript"> function timeLeft(now, next) { var count = next - now; count = count/1000; //change to hours:mins:secs var secs = count % 60; if (secs < 10) secs = '0'+secs; var countdown1 = (count - secs) / 60; var mins = countdown1 % 60; if (mins < 10) mins = '0'+mins; countdown1 = (countdown1 - mins) / 60; var hours = countdown1 % 24; if(hours == 1){htext = " hr, "}else if(hours == 0){hours = "", htext = ""}else{htext = " hrs, "}; if(mins < 2){mtext = " min, "}else{mtext = " mins, "}; if(secs < 2){stext = " sec"}else{stext = " secs"}; document.getElementById('timeLeft').innerHTML = hours+htext+mins+mtext+secs+stext; t=setTimeout('timeLeft()',500); } </script> </head> <body> <table class="borderlist" style="width: 100%; align: center; text-align: center"> <tbody> <tr><td>{MSG}</td></tr> <tr> <td>NOW</td> <td>ID</td> <td>FIELDS</td> <td>TRAVEL_TIME</td> <td>SEND_SECS</td> <td>SEND_TIME</td> <td>TIME_LEFT</td> <td>SEND_IN</td> </tr> <!-- BEGIN times --> <tr> <td>{times.NOW}</td> <td>{times.ID}</td> <td>{times.FIELDS}</td> <td>{times.TRAVEL_TIME}</td> <td>{times.SEND_SECS}</td> <td>{times.SEND_TIME}</td> <td><span id="timeLeft" onload="timeLeft({times.NOW}, {times.SEND_SECS})"></td> <td>{times.SEND_IN}</td> </tr> <!-- END times --> </tbody> </table> </div> <!-- INCLUDE overall_footer.html --> I'm working on a content management system for my website, and when you add a new user, there is an option to select the users class, such as member, moderator, administrator. I want to make it that when moderator or admin is selected, a new table row appears under it showing options for the users permissions. Also, the PHP script for adding users checks the information for errors. If there are errors, it will display them. All of the form info is posted to the error page. Therefore if moderator or admin is selected, the permissions need to come up as well. I tried googling this but I could only find ways to make this happen with DIV's. Thank you in advance for any help you may be able to give me. 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 Hi, How I build a table based on a list under a <DIV></DIV> like this? printing: 1 and: 3 typesetting: 2 industry: 2 has: 2 been: 1 s: 1 standard: 1 ever: 1 since: 1 1500s: 1 when: 1 an: 1 unknown: 1 printer: 1 took: 1 a: 2 galley: 1 type: 3 scrambled: 1 Regards Bob |