2015-12-03 3 views
-1

Здесь из следующего кода я знаю, как динамически добавлять строку в java-скрипт. Но я не могу уменьшить список опций, добавив опции. Это означает, что если я выберу страну Индия и добавлю еще один вариант без опций Индии, это произойдет только в списке опций для второй строки. и процесс идет по выбору.Как уменьшить список опций выбора для добавления опции выбора динамически?

<HTML> 
<HEAD> 
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
    <SCRIPT language="javascript"> 
     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); 

       newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 
        case "checkbox": 
          newcell.childNodes[0].checked = false; 
          break; 
        case "select-one": 
          newcell.childNodes[0].selectedIndex = 0; 
          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); 
      } 
     } 

    </SCRIPT> 
</HEAD> 
<BODY> 

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

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

    <TABLE id="dataTable" width="350px" border="1"> 
     <TR> 
      <TD><INPUT type="checkbox" name="chk"/></TD> 
      <TD><INPUT type="text" name="txt"/></TD> 
      <TD> 
       <SELECT name="country"> 
        <OPTION value="in">India</OPTION> 
        <OPTION value="de">Germany</OPTION> 
        <OPTION value="fr">France</OPTION> 
        <OPTION value="us">United States</OPTION> 
        <OPTION value="ch">Switzerland</OPTION> 
       </SELECT> 
      </TD> 
     </TR> 
    </TABLE> 

</BODY> 
</HTML> 
+0

https://jsfiddle.net/cj12LLop/ – madalinivascu

+0

Я не могу удалить предыдущую выбранную опцию из текущего списка опций, добавив строку. –

ответ

0

Вы хотите удалить строку (tr) из таблицы, в которой установлен флажок в строке?

+0

нет Я просто хочу удалить список опций выбора по одному в соответствии с выбором предыдущей опции. например Если я выберу первый вариант «Индия» и после добавления новой строки сгенерированный список выбора не содержит india. Это показывает только Германию в Swtzrlnd. –

+0

Почему вы не используете jquery или другую js-framework? важно ли использовать только javascript без js-framework? Например, в jquery легко создать решение для приложения yout. –

+0

так что дайте мне решенный код. –

Смежные вопросы