Tutorial :Html object container



Question:

Does someone knows how can I change the container for my drop down box? I have 3 "TD" tags and I would like to move the drop down between them, using client side code.


Solution:1

Do you mean you want to go from something like this...

<td id="firstTD">       <select><!-- ... --></select>  </td>  <td id="secondTD">       <!-- ... -->  </td>  <td id="thirdTD">       <!-- ... -->  </td>  

To this?

<td id="firstTD">       <!-- ... -->  </td>  <td id="secondTD">       <!-- ... -->  </td>  <td id="thirdTD">       <select><!-- ... --></select>  </td>  

If so, you'd best tag this question JavaScript... and get rid of "object" an "container". What you're looking for is the Document Object Model and DOM Scripting. Given that I've given those <td> elements id attributes, I could write some JS like this:

<script type="text/javascript">      var firstTD = document.getElementById("firstTD");      var thirdTD = document.getElementById("thirdTD");      var selectElement = firstTD.getElementsByTagName("select")[0]; // cutting some corners...      firstTD.removeChild(selectElement);      thirdTD.appendChild(selectElement);  </script>  

This is the quickest and cheapest answer, but you'll want to read a little bit more about other DOM features offered by JavaScript such as getElementById(...), getElementsByTagName(...), childNodes, addChild(...), removeChild(...), replaceChild(...)...

If you want this to happen when the user does something (clicks a button let's say) you'll also want to read about JavaScript event handling.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »