jQuery的添加表格行與下拉菜單中的JSON數據

我有一個表格，用戶可以添加額外的行的表格。該表的第一行由依賴下拉列表組成。下拉列表中填充了來自引用文件的json數據。我使用它的代碼如下：jQuery的添加表格行與下拉菜單中的JSON數據

//the add row function 
$(function(){ 
var newgroup = $('<tr>').addClass('rec-rows'); 
$('#addRow').click(function(e){ 
    e.preventDefault(); 
$('.rec-rows').first().clone().appendTo(newgroup).appendTo('#details');  }); 

}); 

//onChange function 
$(".rec-rows #section").live('change',function(){ 


var sSec =$(this).parent().find('#section').val(); 

$("#divParts").hide(); 
$("#divDesc").hide(); 
$("#divGroup").hide(); 
if(sSec=="select") { 
$("#divCategory").hide(); 
} else { 
$.getJSON("static/site_category.json", function(json) { 
var catJson = json[sSec]; 
var options = "<option value=\"select\">Select Area Type</option>"; 
for(i=0;i<catJson.length;i++) { 
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>" 
}

從理論上說，一個新行，並將代碼的onChange我粘貼會爲每個附加行工作。但是，結果並非如此。相反，當行，並將用戶對新行的選擇，其值在表的第一row.The第一部分更新如下：

<td width="" align="left"> 
<div> 
<select id="section" name="section" style="margin-top:15px;"> 
<option value="select">Select Area</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
</select> 
</div> 
</td>

我感謝所有幫助獲得此代碼按需要工作 - 這將是一個簡單的添加行，其中下拉選擇僅在其所在行上更新。謝謝。

來源

2011-03-07 wpbw

我找到了這個帖子，可能會回答我需要做什麼來獲得所需的結果：http://stackoverflow.com/questions/4008316/clone-div-and-rename-element-ids-incrementally但我是不知道如何將其納入現有的代碼？預先感謝您。 – wpbw 2011-03-07 16:53:46

你可以看看這裏的如何動態地添加行到表的起點我的回答：

How can I dynamically generate a table row with it's tds?

它可以幫助你在這裏。

或者我也看到一個問題。。

變化$（「＃節」）變更（

到：

$("#section").live('change',...

這可能是爲什麼新的下拉列表中不工作

來源

2011-03-07 17:36:42 Neal

感謝您的鏈接。但是，它不起作用，因爲下拉選擇對添加的行不起作用。 :(我已經嘗試過類似的解決方案，而不是克隆我在上面的解決方案中追加了數據。 – wpbw 2011-03-07 17:49:00

你能提供上面表格的第一部分的html，所以我可以嘗試完全看到你在做什麼嗎？ – Neal 2011-03-07 17:53:37

好的，我已經添加了表格第一部分的html，請讓我知道是否有其他任何我可以提供的幫助解決方案。 – wpbw 2011-03-07 18:23:03

得到了解決，我建議聲明父如在以下方面：

$(".section").change(function() { 
var sSec =$(this).val(); 
context = $(this).parents("tr"); 
if(sSec=="select") { 
$("#divCategory", context).hide(); 
} else { 
$.getJSON("static/site_category.json", function(json) { 
var catJson = json[sSec]; 
var options = "<option value=\"select\">Select Area Type</option>"; 
for(i=0;i<catJson.length;i++) { 
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"

現在對於每一個「添加行」 C舔，一行被添加，並且下拉列表在用戶選擇該行並僅該行時被改變。

來源

2011-03-08 19:51:40 wpbw

jQuery的添加表格行與下拉菜單中的JSON數據

回答

相關問題