Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think your best bet here is using jQuery. It's far easier to manipulate than Javascript and was designed to easily manipulate objects. If you know CSS and a little Javascript, it's easy to pick up too. You don't even have to host it, as Google hosts it. All you need to do is add the following source code to the top where your scripts are:</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; var buttonCount=1; $(document).ready(function() { $("input[type='button']").click(function() { if(buttonCount &lt;= 3) { //make sure that there are no duplicates if($(this).get(0).className != "buttonUsed") { $(this).get(0).className = "buttonUsed"; var htmlString = $(this).attr('value'); $('#sel' + buttonCount).html(htmlString); buttonCount++; } } }); }); ... The rest of your script </code></pre> <p>I notice that you have been using IDs like one might use classes. I would advise you to consider using the class attribute for things like "button" and make IDs more unique. It will make it easier to code with Javascript, as JS usually follows IDs and works best if it targets only one element per ID. In any case I did rename your IDs. If you have CSS you can rename your CSS classes. Just note that in my code I renamed a class so that you can't choose more than one. That might work for you anyway, because then your button that has been used can look different from the unused buttons.</p> <p>Anyway, here is the HTML, adapted: <BR><BR><BR></p> <pre><code>&lt;table class="status" id="buttonStatus" height="50" width="800"&gt; &lt;tr&gt; &lt;td width="200" align="center"&gt;Step 1 Selection&lt;/td&gt; &lt;td width="200" align="center"&gt;Step 2 Selection&lt;/td&gt; &lt;td width="200" align="center"&gt;Step 3 Selection&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td width="200" align="center" id="sel1"&gt; &lt;/td&gt; &lt;td width="200" align="center" id="sel2"&gt; &lt;/td&gt; &lt;td width="200" align="center" id="sel3"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; </code></pre> <p>Let me know if this works.</p> <h2>Update</h2> <p>To edit as you desire, use this:</p> <pre><code>$(document).ready(function() { $("input[type='button']").click(function() { //make sure that there are no duplicates var buttonClassName = $(this).get(0).className; if(buttonClassName != "buttonUsed") { var buttonID = $(this).attr('id'); var firstPart = buttonID.substring(0,6); var secondPart = buttonID.substring(6,7); var thirdPart = buttonID.substring(7); var newThirdPart; switch(thirdPart) { case "a" : newThirdPart = "b"; break; case "b" : newThirdPart = "a"; break; } $(this).get(0).className = "buttonUsed"; $("#" + firstPart + secondPart + newThirdPart).get(0).className = "button"; var htmlString = $(this).attr('value'); $('#sel' + secondPart).html(htmlString); } }); }); </code></pre> <h2>And the HTML</h2> <pre><code>&lt;body&gt; &lt;input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)"&gt; &lt;input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)"&gt; &lt;input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)"&gt; &lt;input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)"&gt; &lt;input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)"&gt; &lt;input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt; &lt;table class="status" id="buttonStatus" height="50" width="800"&gt; &lt;tr&gt; &lt;td width="200" align="center"&gt;Step 1 Selection&lt;/td&gt; &lt;td width="200" align="center"&gt;Step 2 Selection&lt;/td&gt; &lt;td width="200" align="center"&gt;Step 3 Selection&lt;/td&gt; &lt;/tr&gt;&lt;tr&gt; &lt;td width="200" align="center" id="sel1"&gt; &lt;/td&gt; &lt;td width="200" align="center" id="sel2"&gt; &lt;/td&gt; &lt;td width="200" align="center" id="sel3"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; </code></pre> <h2>Note on CSS</h2> <p>This JQuery changes the classname of the active button to buttonUsed, which means you can create a CSS to make the button look highlighted. If you'd rather not do that, and would rather have everything stay as button, you don't actually need it in the new example (whereas in my initial stab at it, it was very necessary).</p> <pre><code>$(document).ready(function() { $("input[type='button']").click(function() { //make sure that there are no duplicates var buttonID = $(this).attr('id'); var secondPart = buttonID.substring(6,7); var htmlString = $(this).attr('value'); $('#sel' + secondPart).html(htmlString); }); }); </code></pre> <p>Much simpler, in fact. At least I showed you the sort of things jQuery is capable of. Whether you choose to use it or not is up to you. Happy coding!</p>
    singulars
    1. This table or related slice is empty.
    1. POButton selections displayed in table
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USsmcjones
    1. USsmcjones
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POButton selections displayed in table
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI just noticed a small issue with the code. It work's well for the first three selections, but if you go back and click a different button it will not change in the cell. It will only display the first three initial selections. How do you make it more dynamic so that it changes on the fly??
      singulars
      1. PO
      1. USdpalm
    2. COAlso the first cell can only display either Apply Mask or No Mask, while the second cell will have only Maintain Zoom In or Maintain Full View. In this instance if you click Apply Mask then No Mask, it will put first in the first cell and the second in the second cell. So basically I need each of the respective cells to portray on the fly the selections from step 1 step 2 and step 3
      singulars
      1. PO
      1. USdpalm
    3. COAre you talking about adding more rows? More columns? Going back to the first column? Or cycling so that the old column 1/2 becomes the new column 2/3 and the new column becomes 1? If I get that clarification I can explain further.
      singulars
      1. PO
      1. USsmcjones
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload