顯示隱藏動態生成的文本框與平變化動態創建的選擇字段

Question

我想動態生成像使用MySQL，PHP，JS和HTML下面的表格：

___________________________________________ 
[] | Please Select Service | Text Box | 
------------------------------------------- 
    Add Row   Delete Row 

所以第一列是一個用於行刪除的複選框。 第二列是從數據庫動態填充的選擇框 默認情況下第三列是隱藏的，當選擇「其他」時顯示，當未選擇「其他」時隱藏。 因此，當「添加行」被按下它看起來像下面這樣：

___________________________________________ 
[] | Please Select Service | Text Box | 
------------------------------------------- 
___________________________________________ 
[] | Please Select Service | Text Box | 
------------------------------------------- 
    Add Row   Delete Row 

我的問題是，我只能隱藏/顯示第一個文本框，除非第一個文本框已被所示，當「添加行」被按下，如果發生這種情況，新的文本框將顯示但不能隱藏，「添加行」和「刪除行」按鈕的功能與它們的名稱狀態一樣。我猜測它與選擇字段中與最後一個選項元素相關聯的值有關。

代碼片段可以在下面看到addRow，deleteRow和hide/show函數，以及我用來顯示它的HTML。

JS

var boxCount = 1; 
    function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 

      var newcell = row.insertCell(i); 

      var theSelect = document.getElementById('services'); 
      var lastValue = theSelect.options[theSelect.options.length - 1].value; 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         newcell.childNodes[0].id = "otherService" + boxCount; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         newcell.childNodes[0].options[lastValue].value = boxCount; 
         break; 
      } 
     } 
    } 
    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       if(rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     }catch(e) { 
      alert(e); 
     } 
    } 

    function hideShowOtherBox(e) { 
     var theSelect = document.getElementById('services'); 
     var lastValue = theSelect.options[theSelect.options.length - 1].value; 
     var ele = 'otherService' + lastValue; 

     if (e.options[e.selectedIndex].text == "Other") { 
      if (document.getElementById(ele).style.display == "none") { 
       document.getElementById(ele).style.display = "block"; 
      } 
     } else { 
      document.getElementById(ele).style.display = "none"; 
     } 
    } 

HTML

<table id="dataTable" width="350px" border="1"> 
    <tr> 
     <td><input type="checkbox" name="chk[]"/></td> 
     <td> 
      <select id='services' name="services[]" onChange='hideShowOtherBox(this);'> 
       <option value="Select">Please Select</option> 
       <?php 
        $servicesList = getAllServices(); 
        foreach($servicesList as $x) { 
         echo "<option value='$x'>$x</option>\n"; 
        } 
       ?> 
       <option value='0'>Other</option> 
      </select> 
     </td> 
     <td><input id='otherService0' style='display:none;' type="text" name="otherService[]"/></td> 
    </tr> 
</table> 
<input type="button" value="Add Row" onclick="addRow('dataTable')" /> 

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

Answer 1

試試這個：

var boxCount = 1; 

function addRow(tableID) { 
    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
}