[Javasript + HTML] come creare textbox in tr specifica

max85646805

Nuovo Utente
8 Giu 2016
1
0
1
34
Salve a tutti! Ho un codice in javascript che duplica la prima riga di una tabella insieme ai suoi elementi. Tra questi elementi c'è una selectbox con diverse opzioni. Io vorrei che quando viene scelta un opzione venga creata una textbox nella stessa riga dove è stata scelta quell' opzione. Il codice per duplicare la riga è questo:
---------------JAVASCRIPT------------------------------
Codice:
function addRow(tableID) {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;
   
   
   if(rowCount < 20){               // limit the user from creating fields more than your limits
     var row = table.insertRow(rowCount);
     var colCount = table.rows[0].cells.length;
     for(var i=0; i<colCount; i++) {
       var newcell = row.insertCell(i);
       newcell.innerHTML = table.rows[0].cells[i].innerHTML;
     }
   }else{
      alert("Si possono inserire massimo 20 righe!");
         
   }
   


   


   
}

function deleteRow(tableID) {
   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) {    // limit the user from removing all the fields
         alert("Non si possono cancellare tutte le righe!");
         break;
       }
       table.deleteRow(i);
       rowCount--;
       i--;
     }
   }
}

-----------------------------HTML------------------------------
Codice:
<table id="dataTable" class="table">
<tbody>
  <tr>
  <td>
  <input class="flat" type="checkbox" required="required" name="chk[]" checked="checked" />
  </td>
  <td>
     <select name="scelta[]"  required="required">
  <option>Opzione1</option>
  <option>Opzione2</option>
  <option>Opzione3</option>
  </select>
  </td>
  </tr>
</tbody>
</table>

<input type="button" value="Aggiungi Riga" onClick="addRow('dataTable')" />
<input type="button" value="Rimuovi Riga" onClick="deleteRow('dataTable')"  />
 

Discussioni simili