|
JavaScript - Sortable Tables Not Working
http://74.220.207.105/~torasmos/shiurim/testsort.html
this works in firefox but in ie I get an error Webpage error details Message: 'this.className' is null or not an object Line: 94 Char: 11 Code: 0 URI: http://74.220.207.105/~torasmos/shiurim/sorttable.js I am using the script from http://www.kryogenix.org/code/browser/sorttable/ does anyone have any idea what the issue is? Similar TutorialsHi All, Here is my page in question: http://functionfirstfurniture.com/gallery/ If you click on a thumbnail BEFORE sorting any of the images, it appears in a pop-up lightbox. However, if you click AFTER sorting, the lightbox doesn't work and it just loads the image file in the browser window. What needs to happen so that the image will work as a lightbox all the time? I'm not very good at javascript and just used two script demos I found online, so I'm not even sure how to start looking at what is going wrong. Any help would be greatly appreciated. Thanks! I want a JS code for drag and drop sortable and editable tree list, similar below image. tnx a lot Hello! Im very limited in my skills with html/JS/CSS and can only understand the concept of the varius coding but ot much more than that. Now i really need a sortable table like the one you can find on this site: Jämför & Hitta Billiga Små Lån Has anyone come across a tutorial or similar on how to build stuff like this? Or have any other hints for me to get started with? Any help is much appriciated Reply With Quote 12-25-2014, 06:27 PM #2 Wieli View Profile View Forum Posts New to the CF scene Join Date Dec 2014 Posts 5 Thanks 5 Thanked 0 Times in 0 Posts Hmm, cant find the option to clean the link, wasnt supposed to have a title like that. Reply With Quote 12-26-2014, 06:08 AM #3 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts No problem, the post worked. I don't have time tonight, but will try to show you this tomorrow. Question: How do you *create* the <table>?? From PHP? From AJAX? Hi guys, I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list. I tried using this... Code: var response = $("#selected_numbers_box").val();
alert( response );
and I also tried this.. Code: var response = $("#selected_numbers_box").html();
alert( response );
both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box". Any suggestions? My code was taken directly from the jquery ui tutorial. Thanks in advance. Hello Everyone, I am facing problem with divs indexes persistancy on sorting when browser refreshing. checkout this fiddle once and help me. Sortable-arindam - JSFiddle Here how can i maintain the divs persistancy on sorting when page refreshing. Thanks in Advance Satish Chandragiri Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help I want to create a code.. tat would take the input from the user .. say for example No of items. and create a table in the next page having so many rows ... help asap thank you in advance Hey guys, I ran into a problem designing my site. All is working, but this. As you can see, the table on the right is not even with the table on the left. This code has worked in the past, Code: <script type="text/javascript">
window.onload = function () {
var divArray = document.getElementById('tablecontent').offsetHeight;
var subtraction = divArray - 442;
var tablesidebar = document.getElementById('tablesideba');
tablesidebar.style.paddingBottom = subtraction + 'px';
};
</script>
But that only works for a static page. The problem is now, both tables, the one on the left, and the one on the right, are dynamic. Either could have different heights depending on what page you are visiting. Different pages also have more than one table, and the only way I could see this working is with a million if statements or each page, defining each table being used. Is there anyway to get these two tables evened out, no matter the content using JavaScript? Not really sure why this isn't working. I've mirrored this webpage from a friend's page - everything is literally identical, save for the references to the databases. His works, and mine doesn't. Here's an example of one of the tables I'm trying to sort: http://www.iblhoops.net/modules.php?...isplay=ratings The code in question for said table: Code: // BEGIN RATINGS TABLE
$table_ratings="<table class=\"sortable\">
<thead>
<tr bgcolor=$color1><th><font color=$color2>Pos</font></th><th><font color=$color2>Player</font></th><th><font color=$color2>Age</font></th><th><font color=$color2>Sta</font></th><th><font color=$color2>2ga</font></th><th><font color=$color2>2g%</font></th><th><font color=$color2>fta</font></th><th><font color=$color2>ft%</font></th><th><font color=$color2>3ga</font></th><th><font color=$color2>3g%</font></th><th><font color=$color2>orb</font></th><th><font color=$color2>drb</font></th><th><font color=$color2>ast</font></th><th><font color=$color2>stl</font></th><th><font color=$color2>tvr</font></th><th><font color=$color2>blk</font></th><th><font color=$color2>o-o</font></th><th><font color=$color2>d-o</font></th><th><font color=$color2>p-o</font></th><th><font color=$color2>t-o</font></th><th><font color=$color2>o-d</font></th><th><font color=$color2>d-d</font></th><th><font color=$color2>p-d</font></th><th><font color=$color2>t-d</font></th><th><font color=$color2>Foul</font></th><th><font color=$color2>Inj</font></th></tr>
</thead>
<tbody>
";
$i=0;
while ($i < $num)
{
if ($yr == "")
{
$name=mysql_result($result,$i,"name");
$team=mysql_result($result,$i,"teamname");
$pid=mysql_result($result,$i,"pid");
$pos=mysql_result($result,$i,"altpos");
$p_ord=mysql_result($result,$i,"ordinal");
$age=mysql_result($result,$i,"age");
$inj=mysql_result($result,$i,"injured");
$r_2ga=mysql_result($result,$i,"r_fga");
$r_2gp=mysql_result($result,$i,"r_fgp");
$r_fta=mysql_result($result,$i,"r_fta");
$r_ftp=mysql_result($result,$i,"r_ftp");
$r_3ga=mysql_result($result,$i,"r_tga");
$r_3gp=mysql_result($result,$i,"r_tgp");
$r_orb=mysql_result($result,$i,"r_orb");
$r_drb=mysql_result($result,$i,"r_drb");
$r_ast=mysql_result($result,$i,"r_ast");
$r_stl=mysql_result($result,$i,"r_stl");
$r_blk=mysql_result($result,$i,"r_blk");
$r_tvr=mysql_result($result,$i,"r_to");
$r_sta=mysql_result($result,$i,"sta");
$r_foul=mysql_result($result,$i,"r_foul");
$r_totoff=mysql_result($result,$i,"oo")+mysql_result($result,$i,"do")+mysql_result($result,$i,"po")+mysql_result($result,$i,"to");
$r_totdef=mysql_result($result,$i,"od")+mysql_result($result,$i,"dd")+mysql_result($result,$i,"pd")+mysql_result($result,$i,"td");
$r_oo=mysql_result($result,$i,"oo");
$r_do=mysql_result($result,$i,"do");
$r_po=mysql_result($result,$i,"po");
$r_to=mysql_result($result,$i,"to");
$r_od=mysql_result($result,$i,"od");
$r_dd=mysql_result($result,$i,"dd");
$r_pd=mysql_result($result,$i,"pd");
$r_td=mysql_result($result,$i,"td");
$r_bird=mysql_result($result,$i,"bird");
$draftyear=mysql_result($result,$i,"draftyear");
$exp=mysql_result($result,$i,"exp");
$cy=mysql_result($result,$i,"cy");
$cyt=mysql_result($result,$i,"cyt");
$yearoffreeagency=$draftyear+$exp+$cyt-$cy;
} else {
$name=mysql_result($result,$i,"name");
$team=mysql_result($result,$i,"team");
$pid=mysql_result($result,$i,"pid");
$r_2ga=mysql_result($result,$i,"r_2ga");
$r_2gp=mysql_result($result,$i,"r_2gp");
$r_fta=mysql_result($result,$i,"r_fta");
$r_ftp=mysql_result($result,$i,"r_ftp");
$r_3ga=mysql_result($result,$i,"r_3ga");
$r_3gp=mysql_result($result,$i,"r_3gp");
$r_orb=mysql_result($result,$i,"r_orb");
$r_drb=mysql_result($result,$i,"r_drb");
$r_ast=mysql_result($result,$i,"r_ast");
$r_stl=mysql_result($result,$i,"r_stl");
$r_blk=mysql_result($result,$i,"r_blk");
$r_tvr=mysql_result($result,$i,"r_tvr");
$r_totoff=mysql_result($result,$i,"r_oo")+mysql_result($result,$i,"r_do")+mysql_result($result,$i,"r_po")+mysql_result($result,$i,"r_to");
$r_totdef=mysql_result($result,$i,"r_od")+mysql_result($result,$i,"r_dd")+mysql_result($result,$i,"r_pd")+mysql_result($result,$i,"r_td");
$r_oo=mysql_result($result,$i,"r_oo");
$r_do=mysql_result($result,$i,"r_do");
$r_po=mysql_result($result,$i,"r_po");
$r_to=mysql_result($result,$i,"r_to");
$r_od=mysql_result($result,$i,"r_od");
$r_dd=mysql_result($result,$i,"r_dd");
$r_pd=mysql_result($result,$i,"r_pd");
$r_td=mysql_result($result,$i,"r_td");
}
if(($i % 2)==0) {
$bgcolor="FFFFFF";
}else{
$bgcolor="EEEEEE";
}
if ($tid == 0)
{
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} else {
if ($p_ord > 959)
{
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td>(<a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name)*</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} elseif ($r_bird == 0) {
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td><i><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</i></a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} else if ($fayr == "" OR $yearoffreeagency == $fayr) {
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
}
}
$i++;
}
$table_ratings=$table_ratings."
</tbody>
</table>
";
if ($tid != 0)
{
$table_totals=$table_totals."
<table class=\"sortable\">
<thead>
<tr bgcolor=$color1><th><font color=$color2>Pos</font></th><td colspan=3><font color=$color2>Player</font></th><th><font color=$color2>g</font></th><th><font color=$color2>gs</font></th><th><font color=$color2>min</font></th><th><font color=$color2>fgm</font></th><th><font color=$color2>fga</font></th><th><font color=$color2>ftm</font></th><th><font color=$color2>fta</font></th><th><font color=$color2>3gm</font></th><th><font color=$color2>3ga</font></th><th><font color=$color2>orb</font></th><th><font color=$color2>reb</font></th><th><font color=$color2>ast</font></th><th><font color=$color2>stl</font></th><th><font color=$color2>to</font></th><th><font color=$color2>blk</font></th><th><font color=$color2>pf</font></th><th><font color=$color2>pts</font></th></tr>
</thead>
<tbody>
";
Any ideas? I am trying to learn about the trace tables and truth tables in Javascript for the booleans. But I cannot seem to pick up the things. Does anyone know of a good resource where I can learn more? Thanks in advance for any useful help with this. I'm working on a script that inserts things into tables. It's complicated and involves xmlhttp and lots of stuff, but I've narrowed the problem down to something simple. The following code does not work in IE. It doesn't generate an error, but simply displays nothing. Here is the code: Code: <body>
<table id="test">
</table>
<script type="text/javascript">
document.getElementById('test').innerHTML = '<tr><td>test<\/td><\/tr>';
</script>
</body>
I have no idea why it isn't working as it works in Safari and Firefox. Help is much appreciated. Julian Hi Guys, I am posting this to see if anyone has any ideas or sample code that has worked in the past. What i am aiming at doing is having two tables, with the same amount of rows side by side, effectively rendering them the same. I wish then to select a row on the one table, and this event would trigger the same row on the 2nd table to be selected too. Has anyone done something like this before? Appreciate any feedback! Thanks. I have an html file with 1000 exam questions in this format: table 1: question table 2: rationale table 3: answers table 1 is stacked on top of table 2, which is stacked on table 3. each of the 1000 questions is formatted like this. I want to reorder it to this for all 1000 questions: table 1: question table 3: answers table 2: rationale what is consistent in all 1000 questions is- the word "question" appears in every table 1. The words "answers" appear in every table 3. and the words "rationale" appear in every table 2. Since these 3 phrases or words appear in every single question, I figured there might be an easy way to reorder the tables. Is there a simple script that can reorder the tables for display? Here's an example of the html I have to work with. It would take forever to go through manually and reorder the tables. I figure there's gotta be a script thanks Code: <body> <table width="100%" border="0" cellspacing="0" id="table17"> <tr> <td valign="top"><strong>#168 Question: (63 of 128)</strong></font></td> <td valign="top" align="right"> </font> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" id="table18"> <tr> <td> <table class="bg14" width="100%" border="0" cellspacing="0" id="table19"> <tr> <td>Question:</font><blockquote style> who was the first president of the USA?</font></blockquote> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" id="table20"> <tr> <td> <table class="bg14" width="100%" border="0" cellspacing="0" id="table21"> <tr> <td>Rationale:</font><blockquote style> George washington was the first president. go read the history book again.</font></blockquote> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" id="table22"> <tr> <td> <table class="bg14" width="100%" border="0" cellspacing="0" id="table23"> <tr> <td>Answers:</font><table border="0" id="table24"> <tr> <td> </font></td> <td valign="top"> </td> <td>A. George washington</font></td> </tr> <tr> <td> </font></td> <td valign="top"> </td> <td>B. samuel Jackson</font></td> </tr> <tr> <td> </font></td> <td valign="top"> </td> <td>C. George Clinton</font></td> </tr> <tr> <td> </font></td> <td valign="top"> </td> <td>D. Teddy Roosevelt</font></td> </tr> </table> <br> Correct answer: <font color="#FF0000">A. George Washington</font></font></td> </tr> </table> </td> </tr> </table> <p> </p> <table width="100%" border="0" cellspacing="0" id="table25"> <tr> <td valign="top"><strong>#169 Question: (64 of 128)</strong></font></td> <td valign="top" align="right"> </font> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" id="table26"> <tr> <td> <table class="bg14" width="100%" border="0" cellspacing="0" id="table27"> <tr> <td><span class="h6">Question:</span></font><blockquote style> <span class="h5">Was George W Bush dumb?</font></span></blockquote> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" id="table28"> <tr> <td> <table class="bg14" width="100%" border="0" cellspacing="0" id="table29"> <tr> <td><span class="h6">Rationale:</span></font><blockquote style> Yes, he was dumb. Go on youtube and watch all the dumb things he's said and done.</font></blockquote> </td> </tr> </table> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" id="table30"> <tr> <td> <table class="bg14" width="100%" border="0" cellspacing="0" id="table31"> <tr> <td><span class="h6">Answers:</span></font><table border="0" id="table32"> <tr> <td> </font></td> <td valign="top"> </td> <td><span class="h5">A. Yes</span></font></td> </tr> <tr> <td> </font></td> <td valign="top"> </td> <td><span class="h5">B. no.</span></font></td> </tr> </table> <br> <span class="h6">Correct answer: </span><span class="h5"> <font color="red">A. Yes</font></span></font></td> </tr> </table> </td> </tr> </table> </body> Hi, I would just like to know how I would dynamically add another table once text fields in the existing table is clicked on. So pretty much what I have is a table with 5 textboxes lined up horizontally in the first row along with couple of buttons in the second row. What I want is that once one text box is clicked, another table like the one above is created and appears below that initial table. So this is the inital table that should be replicated on each click: Code: <table> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" ></td> </tr> <tr> <td><button /></td> <td><button /></td> </tr> </table> How would I go about achieving this? Thanks How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?
|
|||||||