在jQuery中抓取表列中的值

Question

我試圖抓取基於select的值，如果我點擊一個按鈕。這是我的代碼。

<tr> 
    <td width="50%"><a href="clients_detail.asp?clientID=470">ABC Corp</a></td> 
    <td width="50%"> 
    <select id="salesPersonID" name="salesPersonID" class="form-control"> 
     <option value="" 0""="">Select Contact</option> 
     <option value="424">Aaron Fick</option> 
     <option value="492">John Smith</option> 
    </select> 
    </td> 
    <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button> 
    </td> 
</tr> 
<tr> 
    <td width="50%"><a href="clients_detail.asp?clientID=471">CDEF Corp</a></td> 
    <td width="50%"> 
    <select id="salesPersonID" name="salesPersonID" class="form-control"> 
     <option value="" 0""="">Select Contact</option> 
     <option value="424">Aaron Fick</option> 
     <option value="492">John Smith</option> 
    </select> 
    </td> 
    <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button> 
    </td> 
</tr> 

如果點擊第二行上的按鈕，我想抓取正上方的選擇框的值。這裏是我使用的，但似乎無法得到它的權利代碼：

$(document).on('click','.but_save',function(){ 

    var value = $(this).closest('td.select').val(); 

}); 

Answer 1

您應該使用$(this).parent().prev('td').find('select').val()

$(this)得到<button>

.parent()獲取到該按鈕的<td>

.prev('td')獲取上一個元素是<td>

.find('select')得到選擇<td>

$(document).on('click','.but_save',function(){ 
 
    var value = $(this).parent().prev('td').find('select').css('border','1px solid red').val(); 
 
    console.log(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td width="50%"><a href="clients_detail.asp?clientID=470">ABC Corp</a></td> 
 
    <td width="50%"> 
 
    <select id="salesPersonID" name="salesPersonID" class="form-control"> 
 
     <option value="" 0""="">Select Contact</option> 
 
     <option value="424">Aaron Fick</option> 
 
     <option value="492">John Smith</option> 
 
    </select> 
 
    </td> 
 
    <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td width="50%"><a href="clients_detail.asp?clientID=471">CDEF Corp</a></td> 
 
    <td width="50%"> 
 
    <select id="salesPersonID" name="salesPersonID" class="form-control"> 
 
     <option value="" 0""="">Select Contact</option> 
 
     <option value="424">Aaron Fick</option> 
 
     <option value="492">John Smith</option> 
 
    </select> 
 
    </td> 
 
    <td style="text-align:center;"><button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button> 
 
    </td> 
 
</tr> 
 
</table>

Answer 2

線$(this).closest('td.select')尋找看起來像

<td class="select"></td> 

和元素作爲TD沒有價值，那將無法正常工作...
此外，最近的TD沒有<select>元素，這將是相同的TR內的另一個TD，所以你可能想

var value = $(this).closest('tr').find('select').val(); 

Answer 3

嘗試以下 -

$('.but_save').click(function() { 
 
    var value = $(this).parent().prev().find('select').val(); 
 
    console.log(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td width="50%"><a href="clients_detail.asp?clientID=470">ABC Corp</a> 
 
    </td> 
 
    <td width="50%"> 
 
     <select id="salesPersonID" name="salesPersonID" class="form-control"> 
 
     <option value="0">Select Contact</option> 
 
     <option value="424">Aaron Fick</option> 
 
     <option value="492">John Smith</option> 
 
     </select> 
 
    </td> 
 
    <td style="text-align:center;"> 
 
     <button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td width="50%"><a href="clients_detail.asp?clientID=471">CDEF Corp</a> 
 
    </td> 
 
    <td width="50%"> 
 
     <select id="salesPersonID" name="salesPersonID" class="form-control"> 
 
     <option value="0">Select Contact</option> 
 
     <option value="424">Aaron Fick</option> 
 
     <option value="492">John Smith</option> 
 
     </select> 
 
    </td> 
 
    <td style="text-align:center;"> 
 
     <button type="submit" class="btn btn-info but_save" data-clientid="470" data-column="salesPersonID" data-carrierid="0">save</button> 
 
    </td> 
 
    </tr> 
 
</table>