добавить новую строку в таблицу с 2 выпадающего списка - как я могу изменить имя выбора - PullRequest
Новая
       14

добавить новую строку в таблицу с 2 выпадающего списка - как я могу изменить имя выбора

0 голосов
/ 05 мая 2011

Буду очень признателен, если кто-нибудь сможет мне помочь. в течение двух дней я пытался понять это в одиночку, но это не работает.

Я пишу список покупок для моего проекта в школе. У меня есть таблица (shopinglist), которая содержит форму.

В форме у меня есть 2 выпадающих списка, один (продукт) получает значения из моей базы данных, а второй (количество) - постоянные числа. Рядом с этими двумя у меня есть 2 кнопки добавить и удалить.

При нажатии add я хочу добавить новую строку с тем же материалом.

Проблема в том, что я не могу (или, возможно, не знаю, как) изменить имя выбора в соответствии с номером строки. Я имею в виду как

И последнее: строка будет добавлена, только если пользователь выберет оба варианта, а не только один.

вот мой код: функции добавления и удаления javascript: 

 function addRow(tableID) {

if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero") 
{
            var table = document.getElementById(tableID);

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

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

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

            for(var i=0; i<=colCount; i++) {
             var newcell = row.insertCell(i);
                 newcell.innerHTML = table.rows[1].cells[i].innerHTML;
              switch(newcell.childNodes[1].type) {
                case "text":
                        newcell.childNodes[1].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[1].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[1].selectedIndex = 0;
                        break;

                }
            }
              newcell.childNodes[1].visible = true;
              table.rows[rowCount-1].cells[2].style.visibility="hidden" ;
            }
            else
          {
            if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value=="zero") 

                 alert("please choose quantity") ;
               if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value!="zero") 
                alert("please choose product") ; 
               if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value=="zero") 
                    alert("please choose product and qantity") ;
           }
            }

        function deleteRow(i){
        if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero") 
            document.getElementById('shopinglist').deleteRow(i)
        else
            alert("you can't delete row before adding it");
}

и HTML и ASP 

<table border="0" id="shopinglist">
<caption valign="top" style="width:90%;height:35px; color:green ;"/> your order 
<tr><td></td><td> product</td> <td> quantity</td></tr>
<tr>
<form name="juices">
    <%      
    set rs=Server.CreateObject("ADODB.recordset")
    rs.open "SELECT ID, [Product-Name] ,[size-liter],[Customer price] FROM Product GROUP BY  ID,[Product-Name] ,[Product].[size-liter],[Product].[Customer price] ", conn
    %>
<td>
<select name="product" id="product" width="10" >
<option value="dafult" selected>בחר מוצר מהרשימה</option>
<%
do while not rs.EOF %>
<option value=<%=rs("Product-Name")%> > juice<%=rs("Product-Name")%>   <%=rs("size-liter")%>  liter<%=rs("Customer price")%>  $</option>
<%
rs.MoveNext()
loop
rs.close %> 
</select>
</td>
<td>
<select name="quantity" id="quantity">
<option value="zero" selected="selected">0</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>
</td>
<td>
<input type="button" value="add" onclick="addRow('shopinglist')" id="addbutton"/>
</td>
<td>
    <input type="button" value="delete"onclick="deleteRow(this.parentNode.parentNode.rowIndex)" id="remove"/>
</td>
</tr>
         </form>

Ответы [ 2 ]

0 голосов
/ 06 мая 2011

Вот пример https://gist.github.com/957827, с которого вы могли бы начать. Это радикально отличается, но проще, чем у вас.

У меня нет IE6,7,8, чтобы проверить его должным образом, но это должно быть что-то вроде примера.

Еще один комментарий, идентификаторы должны быть уникальными. И вам не следует использовать их в строке таблицы, которую вы будете копировать.

0 голосов
/ 05 мая 2011

IE не позволит вам изменить имя элемента после добавления его на страницу. Как это написано, вам придется изменить строку, содержащую выбор, прежде чем устанавливать innerHTML 

newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/(\<select.+?name=".+?)"/, $1 + rowCount + i + "\"");

НЕ ИСПЫТАНО ... что-то в этом роде ...

...