[英]how to add a css class when button clicked and and also remove that with another button click
[英]how to remove row and add css class when button clicked
这是小提琴
https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/
如何编写remove函数以及如何向单击的行中添加CSS类。
1.当我单击删除时,被单击的行应该被删除
当我单击该行时-该行应附有Highlightrow CSS类
还必须检查表是否有任何行并将其放在var中
一次,如果没有选择任何行,则只有一行应为红色(单击的行),删除按钮应该不可见
的HTML
col1header col2header的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');
}
这是更新的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");
}
试试这个。 如果可以的话
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 }
.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; }
<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" />
检查行是否最后一行是代码的这一部分
if($('table tbody tr').length==0) {
alert('This last child has been removed');
$("#dropDown").prop("disabled", false);
}
像下面那样做(所有解决方案您需要的):-
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 }
.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; }
<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>
您可以在我的更新中查看答案:
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');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.