2016-01-13 107 views
-1

我有一個選擇框包含在表中的每一行 - 我想允許用戶更改該選擇框的值,而不需要觸發更新MySQL重新加載頁面等更新數據庫從更改表中選擇

我已經能夠得到這個使用Ajax的工作,當有一個行,但當他們是多行時,因爲jQuery無法知道哪個id或類我指的是多個存在。

當用戶更改tr id中的select時,我想將tr id傳入行並將選定的階段傳入val,以便我可以通過Ajax將其更新(例如1,3),然後if他們更新第2行中的選擇,例如它應該發送2,1。

HTML

<table> 
<tr id="1"> 
<td> 
<select name="dropdown" class="stage"> 
<option value="1">Stage 1</option> 
<option value="2">Stage 2</option> 
<option value="3">Stage 3</option> 
</select> 
</td> 
</tr> 
<tr id="2"> 
<td> 
<select name="dropdown" class="stage"> 
<option value="1">Stage 1</option> 
<option value="2">Stage 2</option> 
<option value="3">Stage 3</option> 
</select> 
</td> 
</tr> 
</table> 

然後jQuery中我使用:

$(document).on('change', '.stage',function(e) 
{ 
    var row = $(".stage").parent("tr").attr("id"); 

    var val = $('.stage').val(); 
    e.preventDefault(); 

    console.log(row); 
    console.log(val); 

    $.ajax({ 
     url:'updateStage.php', 
     type:'post', 
     data: {"row": row,"stage": val} 
    });    

}); 

然後在updateStage.php我正在爲行和Val的崗位價值和更新MySQL的 - 我還沒有包括只要我能得到傳遞給它的正確值,它就能正常工作。

當我改變選擇,在控制檯我見下文:

undefined 
3 

這指向沒有得到TR的ID,而且當我改變了第二選擇,這並不總是更新到正確的值,但取而代之的是第一次選擇的值。

+0

你必須使用'VAR行= $(本).parent( 「TR」)ATTR( 「ID」);'和'$(本).val();' –

+0

爲什麼downvote? – bhttoan

回答

1

變化

var row = $(".stage").parent("tr").attr("id"); 

var row = $(this).parents("tr").attr("id"); 
+0

非常好!這是對我有用 - 現在工作,謝謝 – bhttoan

+0

,歡迎您。請標記爲正確答案。 –

+0

這不會工作,如果你有嵌套表 – musicvicious

0

更改您的HTML如下

<tr data-id="1"> 
<td> 
<select name="dropdown" class="stage"> 
<option value="1">Stage 1</option> 
<option value="2">Stage 2</option> 
<option value="3">Stage 3</option> 
</select> 
</td> 
</tr> 
<tr data-id="2"> 
<td> 
<select name="dropdown" class="stage"> 
<option value="1">Stage 1</option> 
<option value="2">Stage 2</option> 
<option value="3">Stage 3</option> 
</select> 
</td> 
</tr> 

改變你的jQuery如下

var row = $(this).closest("tr").data("id"); 
+0

仍然沒有定義行 – bhttoan

+0

@bhttoan你有沒有注意到'tr'的更改,我更新了'data-id'中的'id'值,'jQuery'中改變了'$('。stage')'到'$(this )' – Butterfly

+0

@bhttoan嘗試更新一個。而不是'parent()'嘗試'closest()' – Butterfly

0

,你必須使用

//you are accessing current change element then use "this" 
var row = $(this).parents("tr:first").attr("id");` 

//var val = $('.stage').val(); 
var val = $(this).val(); 
+0

我仍然沒有定義行 – bhttoan

+0

@bhttoan請檢查更新 –

0

var row = $(".stage").parent("tr")讓你直接父。

你真正想要的是

var row = $(this).closest("tr").attr('id');