Question

我是Javascript的新手，需要一些动态删除行的帮助。我有以下HTML + Javascript代码。我正在使用正在按预期工作的clonenode插入行。现在我想从表中选择（使用click事件）特定行并删除它。我不想在每行中添加任何按钮来标识行。有人可以帮我这个。

<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>

Answer 1

您可以使用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>

重要说明：这只是一个例子，只有在您的表行只使用一个类名时才有效。建议不要将其用于任何有用的实现。

Answer 2

一旦超越了简单的功能，您需要将自己的函数库串在一起，然后在顶部构建自定义功能。例如。以下使用非常小的函数库来帮助解决。

它将一个监听器附加到表中，当它从一行中单击时，选择或取消选择该行。将取消选择可能选择的任何其他行。然后它使用一个按钮来查找所选行（如果有的话）并删除它。

＆＃13;

// 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);
}

＆＃13;

.selected  {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

如果您还对相关文档应用某些规则以避免边缘情况，那么这些库的维护非常简单并且更容易。＃34;大多数只是ECMAScript ed 3可以在任何地方使用，ES5位很容易填充。没有任何东西可以依赖于ECMAScript 2015。

有一些很棒的HTML5函数来完成类的工作，但它还没有足够的普遍存在而尚未依赖。如果是，那些功能可以减少到一行，也可以完全删除。

动态删除Javascript中的选定行

2 个答案: