在按鈕上單擊刪除表格行使用Javascript

我有一個表格，其中每行都是動態追加的以下3列。在按鈕上單擊刪除表格行使用Javascript

條件：僅僅是一個WHERE子句條件語句字符串
刪除：A鍵是刪除該行（刪除條件）
與加入：一個下拉組合

當用戶點擊刪除按鈕，該特定行需要被刪除。

我已經爲此編寫了代碼，但沒有任何反應，也沒有在控制檯上收到任何錯誤。

代碼在上下文

$("#whereConditionTable").append(
     "<tr>"+ 
      "<td>"+conditionString+"</td>"+ 
      "<td><button id='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' width='25px' height='25px'></button>"+ 
      "<td>"+ 
       "<select id='where-Condition-Join-Combo' name='where-Condition-Join-Combo' class='form-control'>"+ 
        "<option value='1'>Join using</option>"+ 
        "<option value='2'>AND</option>"+ 
        "<option value='3'>OR</option>"+ 
       "</select>"+ 
       "</td>"+ 
     "</tr>" 
    ); 

    document.getElementById("removeConditionBtn").addEventListener("click", function() { 
    removeWhereCondition(); 
}, false);

removeWhereCondition（）

function removeWhereCondition() 
{ 
    $(this).closest("tr").remove(); 
}

在這方面的任何建議，將高度讚賞。

來源

2017-09-20 Nayantara Jeyaraj

幾件事情需要解決：

你結合jQuery和香草的JavaScript（getElementById），所以我整理了一些，最多和重寫它的jQuery。
HTML文檔不能有重複的ID s。如果您的append運行了多次，則會創建額外的#removeConditionBtn和#where-Condition-Join-Combo元素，並且JS將停止工作。我已經將它們更改爲可重用的類。
您的addEventListener綁定click事件只會綁定到代碼第一次運行時存在的（一個）#removeConditionBtn元素。如果表格內容更改爲包含其他按鈕，則綁定不會更新（即使您使用的是類而不是ID）。我已經在表本身上使用jQuery on重寫了這個，所以即使表格內容發生變化，click事件仍然會觸發。下面

工作示範：

var conditionString = "text"; 
 

 
$("#whereConditionTable").append(
 
    "<tr>" + 
 
    "<td>" + conditionString + "</td>" + 
 
    "<td><button class='removeConditionBtn' name='removeConditionBtn' class='btn btn-default'><img src='resources/images/removeWhereCondition.png' alt='Remove' width='25px' height='25px'></button>" + 
 
    "<td>" + 
 
    "<select class='where-Condition-Join-Combo' name='where-Condition-Join-Combo' class='form-control'>" + 
 
    "<option value='1'>Join using</option>" + 
 
    "<option value='2'>AND</option>" + 
 
    "<option value='3'>OR</option>" + 
 
    "</select>" + 
 
    "</td>" + 
 
    "</tr>" 
 
); 
 

 
$("#whereConditionTable").on("click", ".removeConditionBtn", function() { 
 
    $(this).closest("tr").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="whereConditionTable"></table>

來源

2017-09-20 14:30:23

感謝。這實際上有幫助。 –

顯然你是使用jQuery。你可以嘗試：

$('#removeConditionButton').on('click', function(element) { 
    $(element).closest('tr').remove(); 
})

順便說一句，它似乎你正在使用id-屬性不正確。 ID應該是唯一的，每個頁面只能有一個具有相同ID的元素。在這種情況下，你應該使用class而不是id。

來源

2017-09-20 14:32:09

function deleteRow(r) { 
 
    var i = r.parentNode.parentNode.rowIndex; 
 
    document.getElementById("myTable").deleteRow(i); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, td { 
 
    border: 1px solid black; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<table id="myTable"> 
 

 
<tr> 
 
    <td>Row 1</td> 
 
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> 
 
</tr> 
 
<tr> 
 
    <td>Row 2</td> 
 
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> 
 
</tr> 
 
<tr> 
 
    <td>Row 3</td> 
 
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> 
 
</tr> 
 
</table> 
 
</body> 
 
</html>

來源

2017-09-20 14:41:45

在按鈕上單擊刪除表格行使用Javascript

回答

相關問題