BobbyJones BobbyJones - 3 months ago 6
HTML Question

Clicking a TD cell in a table and inserting a <select> box element

While my code below seems to work aimlessly to insert a

<select>
element in a
<td>
cell (who's classname is "ufield") when first clicked, the problem now is that, when I go to click on and make a selection in the select box, a new select element gets inserted beside it.

How can I prevent multiple select boxes from being added if there is already one present?

My second question, is that once a selection is made in the target select box, how can I remove the select box and retain its option text value in the target TD cell?

Below is a pic of the problem:

enter image description here

The desired result is:

enter image description here
enter image description here

The Code in question:



window.onload = function() {
$(".ufield").click(function() {
$(this).append("<select><option value='TEST'>TEST</option>");
});
}

* {
font-family: Arial;
font-size: 9pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%">
<tr>
<td>User ID:</td>
<td>JSMITH</td>
<td class="ufield" id="access">TEST</td>
<td>Floor:</td>
<td>12</td>
</tr>
<tr>
<td>Account Status:</td>
<td>active</td>
<td>Office:</td>
<td>D5656</td>
</tr>
<tr>
<td>Last Login:</td>
<td>30/08/2016 4:16 PM</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Firstname:</td>
<td>John</td>
<td>Address:</td>
<td>175 Yahoo Lane</td>
</tr>
<tr>
<td>Lastname:</td>
<td>Smith</td>
<td>Province:</td>
<td>Ontario</td>
</tr>
<tr>
<td>Telephone:</td>
<td>123-456-7891</td>
<td>City:</td>
<td>Niagra Falls</td>
</tr>
<tr>
<td>Fax:</td>
<td>613-990-1301</td>
<td>Country:</td>
<td>Canada</td>
</tr>
<tr>
<td>E-mail:</td>
<td>john_smith@yahoo.ca</td>
<td>Postal Code:</td>
<td>90210</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>




Answer

you can add an if statement to check the children for a select element

$(document).on('click', '.ufield', function() {
  if($(this).find('select').length == 0) {
      $(this).empty();  //clears out current text in the table
      $(this).append("<select><option value='TEST'>TEST</option>");
  }
});

For the second part of your question, you can add an event when the user focuses out of the select element.

$(document).on('focusout', '.ufield select', function(){
    var myValue = $(this).val();
    var $parent = $(this).parent();
    $(this).remove();
    $parent.append(myValue);
});

$(document).on('click', '.ufield', function() {
  if($(this).find('select').length == 0) {
    $(this).empty(); //clears out the current value in the table cell
    $(this).append("<select><option value='TEST'>TEST</option>");
  }
});

$(document).on('focusout', '.ufield select', function(){
    var myValue = $(this).val();  //gets the current value of the select box
    var $parent = $(this).parent();   //saves the parent element to append the value to later
    $(this).remove();  //removes the select element
    $parent.append(myValue);  //appends the value to the table cell
});
* {
  font-family: Arial;
  font-size: 9pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%">
  <tr>
    <td>User ID:</td>
    <td>JSMITH</td>
    <td class="ufield" id="access">TEST</td>
    <td>Floor:</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Account Status:</td>
    <td>active</td>
    <td>Office:</td>
    <td>D5656</td>
  </tr>
  <tr>
    <td>Last Login:</td>
    <td>30/08/2016 4:16 PM</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Firstname:</td>
    <td>John</td>
    <td>Address:</td>
    <td>175 Yahoo Lane</td>
  </tr>
  <tr>
    <td>Lastname:</td>
    <td>Smith</td>
    <td>Province:</td>
    <td>Ontario</td>
  </tr>
  <tr>
    <td>Telephone:</td>
    <td>123-456-7891</td>
    <td>City:</td>
    <td>Niagra Falls</td>
  </tr>
  <tr>
    <td>Fax:</td>
    <td>613-990-1301</td>
    <td>Country:</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>E-mail:</td>
    <td>john_smith@yahoo.ca</td>
    <td>Postal Code:</td>
    <td>90210</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Comments