亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊按鈕并使用 JavaScript(或 jquery)獲取同一行單元格的值

單擊按鈕并使用 JavaScript(或 jquery)獲取同一行單元格的值

神不在的星期二 2021-09-28 15:38:02
因此,我創建了一個帶有 for 循環的 html 表,其中包含來自我的 Python 應用程序的對象列表。我現在想實現一個刪除功能,為此我需要從單擊按鈕的同一行中獲取單元格的值。我更喜歡用 JavaScript 來做,而不是用 jquery,因為我沒有任何經驗<table class="table" id="table"><tr>    <th scope="col">#</th>    <th scope="col">Titel</th>    <th scope="col">Interpret</th></tr>{% for song in songs %}<tr>    <td>{{song.id}}</td>    <td>{{song.titel}}</td>    <td>{{song.interpret}}</td>    <td>        <button class="btn btn-danger" type="submit" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button>    </td></tr>{% endfor %}</table>編輯:我查找了提到的那些 .parentNode 和 .previousSibling @Barmar 并嘗試為現有的 onclick="get_values(this)" 編寫一個函數,我已經添加到上面的按鈕中<script>function get_values(this) {var td = this.parentNode;var x = td.previousSibling.innerHTML;console.log(x);}</script>console.log 響應說:“ReferenceError: Can't find variable: get_values”編輯2:所以我終于在避免 ReferenceError 方面取得了進展。我正在嘗試不允許使用的函數 get_values(this),因此我將其更改為函數 get_values(x)。<script>function get_values(x) {    var td = x.parentNode;    interpret = td.previousSibling;    interpret_value = interpret.innerHTML;    titel = interpret.previousSibling.previousSibling.innerHTML;    console.log(titel);    console.log(interpret_value);    }</script></body>我現在遇到的問題是代碼實際上沒有 .innerHTML 屬性就可以工作。所以我實際上回來了,例如去年圣誕節和重擊!。但是現在我很難在沒有 td-tags 的情況下獲取值。我也用 .value 試過了。編輯 3:好的,我想有一個小錯誤,我現在自己解決了,這是我現在使用的代碼,它給了我正確的值。我仍然不明白為什么我需要使用雙 .previousSibling 但只要它有效,我很好。感謝所有試圖提供幫助的人,我真的很感激。祝大家新年快樂。<script>function get_values(x) {    var td = x.parentNode;    interpret = td.previousSibling.previousSibling;    interpret_value = interpret.innerHTML;    titel = interpret.previousSibling.previousSibling;    titel_value = titel.innerHTML;    console.log(interpret);    console.log(interpret_value);    console.log(titel);    console.log(titel_value);}</script>
查看完整描述

2 回答

?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

首先,假設您已經有一個按鈕,您可以像這樣編寫按鈕單擊的功能。(在 html 中初始化按鈕以進行說明):


<input type="button" id="deleteBtn" value="Delete">

接下來,在 Javascript 中,您將添加此代碼以使按鈕在單擊時調用“刪除”函數(這里我將刪除函數命名為“delCells”):


let delBtn = document.querySelector("#deleteBtn");

delBtn.addEventListener("click", delCells);

這是使按鈕動態化的代碼(以便在按下時調用刪除函數)


現在,在該刪除函數中,如果您想使用 Javascript 遍歷表中的一系列項目,您首先要將該表標識為您的節點:


var table = document.getElementById("mytab1");


現在您有一個指向您的表的節點,您可以簡單地使用 for 循環遍歷它:


for (var i = 0, row; row = table.rows[i]; i++) {

 .... }


由于您想獲取一行中所有元素的值,您可以創建一個數組并將所有值存儲在其中,然后將它們處理成一個散列,并根據您的決定進一步處理:


let arr = []  //before the for loop

arr[i] = table.row[i]

現在,將所有這些放在一起,在您的操作函數(當您單擊按鈕時觸發)中,您將擁有:


let arr = []

var table = document.getElementById("mytab1");

for (var i = 0, row; row = table.rows[i]; i++) {

  arr[i] = table.row[i]

}

此時,您將擁有一個包含所有元素的數組,因此您可以繼續嘗試完成的任何操作


查看完整回答
反對 回復 2021-09-28
?
互換的青春

TA貢獻1797條經驗 獲得超6個贊

刪除按鈕的類型,HTML中的提交按鈕類型導致頁面不必要地重新加載


<button class="btn btn-danger" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button

在你的按鈕上添加一個點擊監聽器:


document.getElementById("delete_button").onclick = function(this){

console.log(this)

}


查看完整回答
反對 回復 2021-09-28
  • 2 回答
  • 0 關注
  • 327 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號