using parent and children to manipulate items

using parent and children to manipulate items

Hi,

I'm trying to manipulate items in a table using jQuery, using the parent() and children() methods of the "this" object. I think I'm not understanding how to use the parent and children methods correctly.

What I want the code to do is to show the list and button within the <td></td> when clicked on, and then hide it when the newly shown button appears.


You can try my code using the tryit editor on w3school. just copy and paste.

http://www.w3schools.com/cn/html/tryit.asp?filename=tryhtml_basic


Thanks,

Waspinator
  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.       .selected{
  5.         background-color: red;
  6.       }
  7.       td{
  8.         width:150px;
  9.         height:100px;
  10.       }
  11.     </style>
  12.     
  13.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  14.   </head>
  15.   <body>
  16.     <table border="1px">
  17.       <tr>
  18.         <td onclick="click(this, 1)">
  19.           <p>
  20.           <select style="display: none" onChange="select(this)" name="1">
  21.             <option value="1">option 1</option>
  22.             <option value="2">option 2</option>
  23.             <option value="3">option 3</option>
  24.           </select>
  25.           <button style="display: none" onclick="cancel(this, 1)" >removeClass</button>
  26.           </p>
  27.         </td>
  28.         <td onclick="click(this, 2)">
  29.           <p>
  30.           <select style="display: none" onChange="select(this)" name="2">
  31.             <option value="1">option 1</option>
  32.             <option value="2">option 2</option>
  33.             <option value="3">option 3</option>
  34.           </select>
  35.           <button style="display: none" onclick="cancel(this, 2)" >removeClass</button>
  36.           </p>
  37.         </td>
  38.       </tr>
  39.       <tr>
  40.         <td onclick="click(this, 3)">
  41.           <p>
  42.           <select style="display: none" onChange="select(this)" name="3">
  43.             <option value="1">option 1</option>
  44.             <option value="2">option 2</option>
  45.             <option value="3">option 3</option>
  46.           </select>
  47.           <button style="display: none" onclick="cancel(this, 3)" >removeClass</button>
  48.           </p>
  49.         </td>
  50.         <td onclick="click(this, 4)">
  51.           <p>
  52.           <select style="display: none" onChange="select(this)" name="4">
  53.             <option value="1">option 1</option>
  54.             <option value="2">option 2</option>
  55.             <option value="3">option 3</option>
  56.           </select>
  57.           <button style="display: none" onclick="cancel(this, 4)" >removeClass</button>
  58.           </p>
  59.         </td>
  60.       </tr>
  61.     </table>
  62.     
  63.     
  64.     <script>
  65.     function click(cell, value)
  66.     {
  67.       jQuery(cell).addClass("selected");
  68.       jQuery(cell.children()).show();
  69.     }
  70.     
  71.     function cancel(cell)
  72.     {
  73.       jQuery(cell.parent()).removeClass("selected");
  74.       jQuery(cell.children()).hide();
  75.     }
  76.     
  77.     function select(selected)
  78.     {
  79.       value = selected.options[selected.selectedIndex].value;
  80.       alert(value);
  81.     }
  82.     </script>
  83.     
  84.   </body>
  85. </html>