如何在单击按钮时删除行并添加css类

时间:2017-04-28 07:12:15

标签: javascript jquery html css

这里是小提琴

https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/

如何编写remove函数以及如何将css类添加到单击的行中。

1.当我点击删除时,应该删除点击的行

  1. 当我点击行 - 行应该得到高亮的css类附加

  2. 还必须检查表格是否有任何行并将其放入var

  3. 一次只有一行应该是红色的(点击的行)如果没有选择行,则删除按钮不应该是可见的

    HTML

           col1header           col2header   

  4. CSS

    .visibilityHide {
        visibility: hidden;
    
    }
    .highlightRow{
      color:red;
    }
    table {
        border-collapse: collapse;
    }
    
    table, th, td {
        border: 1px solid black;
    }
    

    JS或Jquery

    function add()
    {var addRow1;
     var addRow2;
    addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>";
    addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>";
                    $("#myTableid tbody").append(addRow1);
                     $("#myTableid tbody").append(addRow2);
    
    }
    
    
    function remove()
    {
    
    }
    
    function getdetails(row)
    {
    $('#removerow').css('visibility', 'visible');
    
    }
    

4 个答案:

答案 0 :(得分:1)

这是更新的JavaScript代码。这将满足您的所有要求。

function add()
{
    var addRow1;
    var addRow2;
    addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>";
    addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>";
    $("#myTableid tbody").append(addRow1);
    $("#myTableid tbody").append(addRow2);

}


function remove()
{
    $(".highlightRow").remove();
    $('#removerow').addClass('visibilityHide');
    $("#dropDown").prop("disabled", $("#myTableid tbody tr").length > 0);
}

function getdetails(row)
{
    $('#removerow').toggleClass('visibilityHide', $("#myTableid tbody tr").length === 0);
    $(".highlightRow").removeClass("highlightRow");
    $(row).addClass("highlightRow");
}

答案 1 :(得分:1)

试试这个。如果它能够工作

&#13;
&#13;
function add(){
  var addRow1;
  var addRow2;
  addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>";
  addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>";
  $("#myTableid tbody").append(addRow1);
  $("#myTableid tbody").append(addRow2);
}


function remove(){
  $('.removeClass').remove(); //remove clicked row
  if($('table tbody tr').length <=0){
    $('#removerow').hide();
  }
  if($('table tbody tr').length===0) {
    alert('This last child has been removed');
    $("#dropDown").prop("disabled", false);
  }
}

function getdetails(row){
  $('#removerow').show();
  $(row).addClass('removeClass'); //add class on clicked row
}
&#13;
.highlightRow{
  color:red;
}
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
/* styling for added class so that it looks something different when class added */
.removeClass{
  color:red;
}
#removerow {
  display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="myTableid">
<thead>
  <th>
    col1header
  </th>
  <th>
    col2header
  </th>
</thead>
<tbody>
  
</tbody>
</table>

<input type="button" id ="addrows" value="add" onclick="add()" />
<input type="button" id="removerow" value="remove" onclick="remove()" class="visibilityHide" />
&#13;
&#13;
&#13;

检查行是否是最后一行是代码的这一部分

if($('table tbody tr').length==0) {
    alert('This last child has been removed');
    $("#dropDown").prop("disabled", false);
}

答案 2 :(得分:0)

请在下面填写(您要求的所有解决方案): -

&#13;
&#13;
function add(){
  var addRow1;
  var addRow2;
  addRow1 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow1" + "</td><td>" + "col2valuerow1" + "</td></tr>";
  addRow2 = "<tr onclick="+"getdetails(this)"+"><td>" + "col1valuerow2" + "</td><td>" + "col2valuerow2" + "</td></tr>";
  $("#myTableid tbody").append(addRow1);
  $("#myTableid tbody").append(addRow2);
}


function remove(){
  var index = parseInt($('.removeClass').index())+1;
  $('.removeClass').remove(); //remove clicked row
  $('.removed_row').html("<strong>row number "+index+ " removed</strong>");
  if($('table tbody tr').length <=0){
    $('#removerow').hide();
  }
}

function getdetails(row){
  $('#removerow').css('display', 'block');
  $('.removeClass').removeClass('removeClass');
  $(row).addClass('removeClass'); //add class on clicked row
}
&#13;
.visibilityHide {
  display: none;
}
.highlightRow{
  color:red;
}
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
/* styling for added class so that it looks something different when class added */
.removeClass{
  color:red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTableid">
<thead>
  <th>
    col1header
  </th>
  <th>
    col2header
  </th>
</thead>
<tbody>
  
</tbody>
</table>

<input type="button" id ="addrows" value="add" onclick="add()" />
<input type="button" id="removerow" value="remove" onclick="remove()" class="visibilityHide" />

<br>
<br>
<br>

<div class="removed_row"></div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您可以在我的更新中查看答案:

function remove()
{
window.selectedRow.remove();
$('#removerow').css('visibility', 'hidden');
}

function getdetails(row)
{
removeHighlights();
window.selectedRow = row;
row.classList.add("highlightRow");
$('#removerow').css('visibility', 'visible');

}

function removeHighlights() {
var elements = document.getElementsByClassName("highlightRow");
while(elements.length > 0){
    elements[0].classList.remove('highlightRow');
}
}

https://jsfiddle.net/g63zpuuz/