當使用jQuery按鈕單擊按鈕時從表中獲取值

這是我的代碼，如下所示。這裏的表格顯示日期時間字符串和關閉按鈕。當我點擊關閉按鈕時，它會刪除關注行。但在刪除之前我需要變量中的日期。當使用jQuery按鈕單擊按鈕時從表中獲取值

$(document).on('click', 'button.removebutton', function() { 
 
\t alpha = $(this).closest('tr #newdate').val(); 
 
\t alert(alpha); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> \t 
 
\t <tr> 
 
    <td> 
 
     <input type="text" name="newdate" id="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" id="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" id="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
<tr> 
 
</table>

來源

2017-06-26 Dhruvang Gajjar

的變化ID。 Id是獨一無二的。在Closest（）之後使用find。

$(document).on('click', 'button.removebutton', function() { 
 
\t alpha = $(this).closest('tr').find('.newdate').val(); 
 
\t alert(alpha); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> \t 
 
\t <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
<tr> 
 
</table>

來源

2017-06-26 12:05:54 Albeis

如果表恰好嵌套在另一個表中，父母（）會找到多個''s。所以在這種情況下不能依賴它。最接近（）會更合適。 – ADyson

這是真的，但在這種情況下，只有一個表。問候 – Albeis

在這個例子中，是的，但它只是一個片段。您不知道頁面的其他部分是什麼樣子，或者這是否會成爲插件的一部分，這些插件可能會被添加到其他頁面的任何位置。儘可能使代碼儘可能地萬無一失是一種很好的做法。 – ADyson

.closest()尋找最近的父元素，#newdate不是.removebutton元素的父。您需要最接近的tr，在這種情況下，它是.removebutton的父級，然後找到與.removebutton屬於同一tr的#newdate元素。

附加要點： ID必須是唯一的。所以不要有相同的ID，最好是有班級。

解決方案：類

$(document).on('click', 'button.removebutton', function() { 
 
\t alpha = $(this).closest('tr').find('.newdate').val(); 
 
\t alert(alpha); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> \t 
 
\t <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
<tr> 
 
</table>

來源

2017-06-26 12:05:51

使用$(this).closest('tr').find('#newdate').val()

檢查下面的代碼：

$(document).on('click', 'button.removebutton', function() { 
 
\t alpha = $(this).closest('tr').find('#newdate').val(); 
 
\t alert(alpha); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> \t 
 
\t <tr> 
 
    <td> 
 
     <input type="text" name="newdate" id="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" id="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" id="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
<tr> 
 
</table>

來源

2017-06-26 12:06:44 RJParikh

你有2個問題：

1）HTML ID必須是唯一的，所以您的第二個「newdate」元素永遠不會被發現 - JavaScript認爲它無效並且會忽略它。

2）closest()只搜索up DOM，所以它會找到tr，但不能再回頭再找到「newdate」。

這應該修復它：

$(document).on('click', 'button.removebutton', function() { 
 
    var tr = $(this).closest('tr'); 
 
    var alpha = tr.find(".newdate").val(); 
 
    alert(alpha); 
 
    tr.remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
</table>

注意使用類，而不是標識爲「newdate」和「NEWTIME」，那我們分手定位文本框入的過程兩個步驟 - 一個通過向上查找封閉的<tr> DOM，另一個從該位置向下搜索.newdate元素。

來源

2017-06-26 12:07:11 ADyson

嗨，你可以使用下面的代碼，但記住不同輸入從來沒有使用相同的ID名稱，以便您可以使用類是和你的代碼是

$(document).on('click', 'button.removebutton', function() { 
 
    alpha = $(this).closest('tr').find(".newdate").val(); 
 
    beta = $(this).closest('tr').find(".newtime").val(); 
 
    alert(alpha); 
 
    alert(beta); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" class="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" class="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
</table>

$(document).on('click', 'button.removebutton', function() { 
 
\t alpha = $(this).closest('tr #newdate').val(); 
 
\t alert(alpha); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="schedule"> \t 
 
\t <tr> 
 
    <td> 
 
     <input type="text" name="newdate" id="newdate" value="2017-06-26"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" id="newtime" value="06:00"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="newdate" id="newdate" value="2017-06-28"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="newtime" id="newtime" value="12:00,12:30,13:00,13:30"> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="removebutton">X</button> 
 
    </td> 
 
    </tr> 
 
<tr> 
 
</table>

來源

2017-06-26 12:19:47 Abhijeet

當使用jQuery按鈕單擊按鈕時從表中獲取值

回答

相關問題