JQuery заселяют новые данные атрибута

Question

У меня есть пример программы с использованием JQuery

DEMO

У меня возникли проблемы при добавлении новой строки таблицы, используя атрибут данных, которые должны быть отображены до кнопки или с таблицей ряд.

JS:

var newhtml = '<table><tr><td>data1</td><td>data2</td><td>data3</td></tr><!--show here--><!--new table row added in clicking more--><tr><td></td><td></td><td><button>more</button></td></tr></table>'; 

$(".advanced-info").click(function(){ 
     console.log($("#" + $(this).attr("data-div")).html().length); 
     if ($("#" + $(this).attr("data-div")).html().length > 0) { 

     $("#" + $(this).attr("data-div")).empty(); 
     } else { 
     $("#" + $(this).attr("data-div")).append(newhtml); 
     } 
    }); 

выходные

Я извиняюсь, моя проблема не ясно

Answer 1

Здесь go:

Я изменил использование .attr в .data.

var newhtml = '<table><tr><td>data1</td><td>data2</td><td>data3</td></tr><tr><td></td><td></td><td><button>more</button></td></tr></table>'; 
 

 
$(".advanced-info").click(function() { 
 
    console.log($("#" + $(this).attr("data-div")).html().length); 
 
    if ($("#" + $(this).data("div")).html().length > 0) { 
 
    $("#" + $(this).data("div")).empty(); 
 
    } else { 
 
    $("#" + $(this).data("div")).append(newhtml); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='advanced-info' data-div='adv1'>Advanced Options</a> 
 
<div id='adv1'></div> 
 
<br/> 
 
<br/> 
 

 
<a href='#' class='advanced-info' data-div='adv2'>Advanced Options</a> 
 
<div id='adv2'> 
 
</div> 
 
<br/> 
 
<br/> 
 

 

 

 
<a href='#' class='advanced-info' data-div='adv3'>Advanced Options</a> 
 
<div id='adv3'></div>

Answer 2

Попробуйте этот путь.

var newhtml = '<table><tr style="display:none;"><td>data1</td><td>data2</td><td>data3</td></tr><tr><td></td><td></td><td><button>more</button></td></tr></table>'; 
 

 
$(".advanced-info").click(function() { 
 
    console.log($("#" + $(this).attr("data-div")).html().length); 
 
    if ($("#" + $(this).attr("data-div")).html().length > 0) { 
 

 
    $("#" + $(this).attr("data-div")).empty(); 
 
    } else { 
 
    $("#" + $(this).attr("data-div")).append(newhtml); 
 
    } 
 
}); 
 

 
$("div").on("click", "button", function() { 
 
    $(this).closest("table").find("tr:eq(0)").css("display", "table-row"); 
 
    $(this).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<a href='#' class='advanced-info' data-div='adv1'>Advanced Options</a> 
 
<div id='adv1'></div> 
 
<br/> 
 
<br/> 
 

 
<a href='#' class='advanced-info' data-div='adv2'>Advanced Options</a> 
 
<div id='adv2'></div> 
 
<br/> 
 
<br/> 
 

 
<a href='#' class='advanced-info' data-div='adv3'>Advanced Options</a> 
 
<div id='adv3'></div>

Надеется, что это ваша потребность!