2016-03-30 27 views
0

テーブルに行を動的に追加して注文を受け取り、javascript関数を作成しました。javascriptを使用してID属性値を増やす

function addnewrow() 
    { 
     var lastid = $("#table tr:last").attr("id"); 
     var newid=lastid+1; 
     var newcolumn = document.createElement("tr"); 
     newcolumn.id=newid; 
     newcolumn.innerHTML = "<td id='no"+newid+"'><a class='cut'>-</a>"+newid+"</td>"+ 
      "<td>"+ 
       "<ajaxToolkit:ComboBox ID='prod"+newid+"' runat='server' DataSourceID='SqlDataSource2' DataTextField='pname' DataValueField='pid' MaxLength='0' style='display: inline;'></ajaxToolkit:ComboBox>" + 
      "</td>"+ 
      "<td><input type='number' required='required' min='1' name='quantity" + newid + "' /></td>" + 
      "<td id='price" + newid + "'></td>" + 
      "<td id='amount" + newid + "'></td>"; 
     document.getElementById("table").appendChild(newcolumn); 
    } 

私はコードビハインドファイルのすべての要素の値をデータベースに格納するためにこれを行います。 これが原因で、私は、セミコロンは、私がこれを使用

protected global::AjaxControlToolkit.ComboBox prod" + newid + "; 

ASP.NETコード

<table class="Grid" id="table"> 
     <tr> 
      <td colspan="5">Enter Order Details</td> 
     </tr> 
     <tr> 
      <th>Sr No.</th> 
      <th>Product</th> 
      <th>Quantity</th> 
      <th>Price</th> 
      <th>Amount</th> 
     </tr> 
     <tr id="1"> 
      <td><a class="cut">-</a>1</td> 
      <td> 
       <ajaxToolkit:ComboBox ID="prod1" runat="server" DataSourceID="SqlDataSource2" DataTextField="pname" DataValueField="pid" MaxLength="0" style="display: inline;"></ajaxToolkit:ComboBox> 
       <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:micoConnectionString %>" SelectCommand="SELECT [pid], [pname] FROM [Products]"></asp:SqlDataSource> 
      </td> 
      <td><input type="number" required="required" min="1" name="quantity1" /></td> 
      <td id="price1"></td> 
      <td id="amount1"></td> 
     </tr> 
    </table> 
<a class="add" onclick="addnewrow()" href="#">+</a> 

答えて

0

チェックこの

$("#btnAddSchedule").click(function() { 
    var trs = $("[id^=trSchedules]"); 
    var numberofrows = trs.length; 
    var newtr = $('#' + trs[0].id).clone(); 
    $(newtr).attr('id', $(newtr).attr('id').replace(/\d+/, numberofrows)); 
    newtr.find("input,select,img").each(function() { 
     $(this).attr('id', $(this).attr('id').replace(/\d+/, numberofrows)); 
     $(this).attr('name', $(this).attr('name').replace(/\d+/, numberofrows)); 
     if ($(this).attr('type') != "hidden") { 
      $(this).val(''); 
     } 
     else if ($(this).attr('id').indexOf('DataExportQueueID') == -1) { 
      $(this).val(''); 
     } 
     if ($(this).attr("type") == "checkbox") { 
      $(this).removeAttr("checked"); 
      $(this).parent().html($(this).parent().html().replace(/\d+/g, numberofrows)); 
     } 
     if ($(this).attr("type") == "button") { 
      $(this).attr("onclick", "deleteSchedule(this,0);"); 
     } 
    }); 
    $('#' + trs[numberofrows - 1].id).after(newtr); 
    CrossCheckScheduleRows(); 
}); 
function CrossCheckScheduleRows() { 

    $('[id^=trSchedules]').each(function() { 
     var row = $(this); 
     var index = row[0].rowIndex - 2; 
     row.attr('id', row.attr('id').replace(/\d+/, index)); 
     row.find("input,select,img").each(function() { 
      $(this).attr('id', $(this).attr('id').replace(/\d+/, index)).attr('name', $(this).attr('name').replace(/\d+/, index)); 

     }); 
    }); 

} 

を期待言っaspx.designer.csページでエラーが出ます同じ目的のために、おそらくそれはあなたを助けるでしょう

+0

それはjQueryライブラリを使用しています。 – derloopkat

+0

のように、最初の行をそのままコピーし、id属性の番号を新しい番号に置き換えただけですか?病気がこれを今試してみてください –

+0

IDは行数に置き換えられます – Krishna

関連する問題