这里是小提琴
https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/
如何编写remove函数以及如何将css类添加到单击的行中。
1.当我点击删除时,应该删除点击的行
当我点击行 - 行应该得到高亮的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');
}
答案 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)
试试这个。如果它能够工作
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;
检查行是否是最后一行是代码的这一部分
if($('table tbody tr').length==0) {
alert('This last child has been removed');
$("#dropDown").prop("disabled", false);
}
答案 2 :(得分:0)
请在下面填写(您要求的所有解决方案): -
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;
答案 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');
}
}