單擊表中的TD單元格，然后插入 <select>框元素

Question

雖然我的下面代碼似乎無濟於事，但在第一次單擊時將<select>元素插入<td>單元格（其類名是“ ufield”）中時，現在的問題是，當我單擊並在其中進行選擇時選擇框，將在其旁邊插入一個新的選擇元素。

如果已經存在一個選擇框，如何防止添加多個選擇框？

我的第二個問題是，一旦在目標選擇框中進行了選擇，如何刪除選擇框並將其選項文本值保留在目標TD單元格中？

下面是問題的圖片：

理想的結果是：

有問題的代碼：

 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 1

首次單擊該類后，您可以將其應用於您的字段。 然后，僅當下拉列表沒有此類時，才可以將其添加到字段中。

$(".ufield").click(function() {
    if (!$(this).hasClass('hasSelect') {
      $(this).addClass('hasSelect');
      $(this).append("<select><option value='TEST'>TEST</option>");
    }
  });

Answer 2

您必須告訴您的元素停止監聽點擊事件。 您可以使用unbind（ http://api.jquery.com/unbind/ ）完成此操作。 您的JS代碼如下所示：

 $(".ufield").click(function() {

    $(this).append("<select><option value='TEST'>TEST</option>");
    $(this).unbind('click');

});

Answer 3

您可以添加一個if語句來檢查子元素中的select元素

$(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>");
  }
});

對於問題的第二部分，可以在用戶將焦點移到select元素之外時添加事件。

$(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> 

Answer 4

我們需要一個函數來創建一個新的<select> ，每次需要事件觸發
這里是

 function NewSelectBox() { var select = document.createElement('select'); var values = ['foo', 'bar', 'foo2']; for (var i = 0; i < values.length; i++) { var new_opt = document.createElement('option'); new_opt.setAttribute('value', values[i]); new_opt.innerHTML = values[i]; select.appendChild(new_opt); } //add the event we need $(select).on('change',function(){ var $parent = $(this).parent(); var value = $(this).val(); $(this).remove(); $parent.text(value); }); return select; } 

僅用於插入<select>如果沒有...

 $('.ufield').on('click',function () { $(this).unbind('click'); // this will unbind click event only for this element (not all '.ufield's select. $(this).append( NewSelectBox() );//prepared before }); 

Answer 5

如果您也想使用該選項，我已經創建了一種無需使用jQuery的方法-當幾行普通JS可以輕松處理此問題時，我認為不值得將整個庫包含在內； 但是您可能需要在項目上使用jQuery。

這是兩個功能； 其中之一調用窗口加載並分配選擇選項。

第二個選項等待焦點從選擇菜單中清除，然后使用所選值的字符串填充輔助表的訪問TD。 您可以通過“跳格”或單擊屏幕上的其他位置（例如下一個字段）來實現此目的。

這是工作示例：

 var input = document.getElementById('input') var output = document.getElementById('output') window.onload = addSelections(); function addSelections(){ var inputString = input.innerHTML = "<select id='selectedInput' ><option value='TEST 1'>TEST 1</option><option value='TEST 2'>TEST 2</option><option value='TEST 3'>TEST 3</option></select>" var inputListener = document.getElementById("selectedInput"); inputListener.addEventListener("blur", dumpSelections); } function dumpSelections() { var selectedInput = document.getElementById('selectedInput') var outputString = selectedInput.options[selectedInput.selectedIndex].text; output.innerHTML = outputString; } 

 <h2>Input Table</h2> <table> <tr> <th>Name</th> <th>Access</th> </tr> <tr> <td>John</td> <td id="input" >TEST</td> <td> </tr> </table> <h2>Output Table</h2> <table> <tr> <th>Name</th> <th>Access</th> </tr> <tr> <td>John</td> <td id="output" ></td> </tr> </table>