動態刪除Javascript中的選定行

我是Javascript新手，需要一些動態刪除行的幫助。我有以下HTML + Javascript代碼。我插入行使用clonenode這是按預期工作。現在我想從表中選擇（使用點擊事件）特定的行並將其刪除。我不想在每一行中添加任何按鈕來標識行。有人可以幫助我做到這一點。動態刪除Javascript中的選定行

<html> 
<head> 
<style> 
    #quottable 
    { 
    font-family: 'Arial'; 
    margin-left: 2cm; 
    border-collapse: collapse; 
    border: 2px solid #dde; 
    font-size: 11px; 
} 
#quottable1 
{ 
     font-size: 11px; 
} 
</style> 

<script language="javascript" type="text/javascript"> 
    var xy=0; 

    var EmpInfo = [ 
    { 
    EmpID:'42001', 
    EmpName:'Peter', 
    Salary:'1000' 
    }, 
    { 
    EmpID:'42002', 
    EmpName:'Henri', 
    Salary:'2500' 
    }, 
    { 
    EmpID:'42003', 
    EmpName:'John', 
    Salary:'4500' 
    }, 
    { 
    EmpID:'42003', 
    EmpName:'Paul', 
    Salary:'4500' 
    },  
    ]; 

function GetEmpTab() 
{ 
    if (xy===0) 
    { 
    document.getElementById('EmpListTab').rows[0].innerHTML=EmpInfo[0].EmpName; 
    for (var i = 1; i < EmpInfo.length; i++) 
    {    
     var x=document.getElementById('EmpListTab');       
     var new_row = x.rows[0].cloneNode(true);       
     x.appendChild(new_row); 
     var name = EmpInfo[i].EmpName; 
     new_row.innerHTML=name;   
    } 
     xy=1; 
    } 
}    
</script>  
</head> 

<body> 
<div id="quottable" style="width:154px; height:450px;"> 
<Table id="EmpListTab" width="154" border="1"> 
<tr height="50px"> 
<td style="text-align:left" id="Q1B" height="50"></td> 
</tr> 
</Table> 
</div> 
<button onClick="GetEmpTab();">Insert a new row!</button> 
</body> 
</html>

來源

2015-11-11 Jean S

定義「選定」。如果你只是想在行的任何地方發生點擊而刪除一行，那麼像onclick =「this.parentNode.removeChild（this）」這樣的行上的一個監聽器就可以完成這項工作。但是您可能需要一個目標區域和兩個步驟來確認刪除。 – RobG

@羅伯格 - 對不起。我想我的問題不清楚。我想從一組行中選擇一個特定的行。根據選擇，我將顯示一些更多細節（如在另一個窗口中）。所以我需要確定我選擇了哪一行。 –

您可以使用css類標識選定的行。

<tr height="50px" onclick="this.className='selected_row';"> 
    <td style="text-align:left" id="Q1B" height="50"></td> 
</tr>

別處

<stlye> 
    .selected_row{background-color: yellow;} 
</style>

要一次專門選擇一排，

<tr height="50px" onclick="select_row(this);"> 
    <td style="text-align:left" id="Q1B" height="50"></td> 
</tr> 

<script type="text/javascript"> 
function select_row(target){ 
    var prevs = document.getElementsByClassName("selected_row"); 
    for(var i=0; i<prevs.length; i++){ 
     prevs[i].className = ""; 
    } 
    target.className='selected_row'; 
} 
</script>

重要提示：這僅僅是例子，這只是工作，如果你只使用一個您的表格行的類名稱。這不建議用於任何有用的實現。

來源

2015-11-11 04:18:55 MjrKusanagi

感謝您的反饋。這是一個好主意。我正在嘗試實施下一步。當選擇一行時，我想取消選擇其他行。（即）根據您的想法，當我逐一點擊行時，所有行的背景顏色變爲黃色。在選擇特定行時，是否有辦法重置剩餘行的背景顏色？ –

如果您使用Jquery或任何JS框架，這將非常容易。在純JS中，您需要從所有其他具有該類的行中刪除該類名。 – MjrKusanagi

一旦您超越了簡單的功能，您需要將自己的函數庫串起來，然後在上面構建自定義功能。例如。以下使用一個非常小的函數庫來提供幫助。

它將一個偵聽器附加到表中，當它從一行中點擊時，選擇或取消選擇該行。任何其他可能被選中的行都被取消選擇。然後它使用一個按鈕來查找選定的行（如果有的話）並刪除它。

// Library functions 
 
var util = { 
 
    // Remove leading and trailing whitespace 
 
    // Reduce internal whitespace to a single space 
 
    trim: function(s) { 
 
    return s.replace(/^\s+|\s+$/g,'').replace(/\s+/,' '); 
 
    } 
 
}; 
 

 
var dom = { 
 
    // Return true if el has class className, otherwise false 
 
    hasClass: function(el, className) { 
 
    return util.trim(el.className).split(/\s+/).indexOf(className) != -1; 
 
    }, 
 
    
 
    // Add class className to el if it doesn't have it already 
 
    addClass: function(el, className) { 
 
    if (!dom.hasClass(el, className)) { 
 
     el.className += (el.className == ''? '':' ') + className; 
 
    } 
 
    }, 
 
    
 
    // Remove class className from el if it has it 
 
    removeClass: function(el, className) { 
 
    if (dom.hasClass(el, className)) { 
 
     var classes = util.trim(el.className).split(/\s+/); 
 
     classes.splice(classes.indexOf(className), 1); 
 
     el.className = classes.join(' '); 
 
    } 
 
    }, 
 
    
 
    // Add class Classname to el if it doesn't have it, 
 
    // otherwise remove it 
 
    toggleClass: function(el, className) { 
 
    if (dom.hasClass(el, className)) { 
 
     dom.removeClass(el, className); 
 
    } else { 
 
     dom.addClass(el, className); 
 
    } 
 
    }, 
 
    
 
    upTo: function (el, tag) { 
 
    tag = tag.toLowerCase(); 
 
    do { 
 
     el = el.parentNode; 
 
    } while (el && el.tagName && el.tagName.toLowerCase() != tag) 
 
    return el && el.tagName && el.tagName.toLowerCase() == tag? el : null; 
 
    }, 
 
    
 
    select: function(selector, root) { 
 
    root = root && root.querySelector? root : document; 
 
    return root.querySelector(selector); 
 
    }, 
 
    
 
    selectAll: function(selector, root) { 
 
    root = root && root.querySelectorAll? root : document; 
 
    return root.querySelectorAll(selector); 
 
    } 
 
}; 
 

 
// Custom functions 
 

 
// Toggle selected class on row clicked on 
 
// Remove selected from all other rows 
 
function selectRow (evt) { 
 
    var tgt = evt.target || evt.sourcElement; 
 
    var row = dom.upTo(tgt, 'tr'); 
 
    if (!row) return; 
 
    var seletedRows = document.querySelectorAll('tr.selected'); 
 
    for (var i=0, iLen=seletedRows.length; i<iLen; i++) { 
 
    if (seletedRows[i] != row) { 
 
     dom.removeClass(seletedRows[i], 'selected') 
 
    } 
 
    } 
 
    dom.toggleClass(row, 'selected'); 
 
} 
 

 
// Remove tr elements with class selected 
 
function deleteSelectedRows() { 
 
    [].forEach.call(dom.selectAll('tr.selected'),function(el) { 
 
    el.parentNode.removeChild(el) 
 
    }); 
 
} 
 

 
window.onload = function(){ 
 
    dom.select('#table0').addEventListener('click', selectRow, false); 
 
}

.selected { 
 
    background-color: red; 
 
}

<table id="table0"> 
 
    <tr><td>row0<td>row0 
 
    <tr><td>row1<td>row1 
 
    <tr><td>row2<td>row2 
 
    <tr><td>row3<td>row3 
 
</table> 
 
<button onclick="deleteSelectedRows()">Delete selected rows</button>

此類庫的維護是相當小和更容易，如果你還應用一些紀律有關文件，以避免「極端情況」。它大部分只是ECMAScript ed 3可以在任何地方工作，並且ES5位很容易被擦除。沒有任何東西依賴於ECMAScript 2015.

有一些很棒的HTML5函數來完成這個類的東西，但它依然沒有足夠的普遍存在。當它是時，這些功能可以減少到一行，並可能完全刪除。

來源

2015-11-12 00:59:48 RobG

動態刪除Javascript中的選定行

回答

相關問題