Добавление строк в таблицу (JQuery)
Доброго времени суток.
Прошу помощи у профессионалов.
Вот код:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title> </title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function(){
var comments = "_"; $('.addComment').click(function() {
$('#comments').append('<tr id="'+comments+'"><td><input type="text"/></td><td><input type="button" class="star" value="*"/></td><td><div class="removeComment" comment_id="'+comments+'">x</div></td></tr>');
});
$('#comments').delegate('.removeComment', 'click', function(e) {
var id = $(this).attr('comment_id');
$('#'+id).remove(); e.preventDefault();
});
$(".star").click(function () {
alert('star');
});
$(".removeComment_first").click(function(){
$('.b-login5__adress').fadeOut(300);
});
$("#some_adress2").click(function () {
$('.b-login5__adress').fadeOut(300);
});
});
</script>
<script>//popap
$(document).ready(function(){
$('#toggleadress3').dopPopup($('#adress3'));
});
(function($, window) {
$.fn.dopPopup = function($adress3) {
var $self = this,
$window = $(window);
return this.click(
function() {
$adress3.fadeIn(300).bind('click.bLogin5', function(event){
event.stopPropagation();
});
return false;
},
function(){
$adress3.fadeOut(300).unbind('.bLogin5');
$window.unbind('.bLogin5');
return false;
}
);
};
})(jQuery, window);
</script>
<style>
.some_adress_wrap{height: 20px; width: 189px; position: relative; margin: 7px 0 0px 0;}
#some_adress {border-bottom: 1px dashed black; cursor: pointer; position: relative; float: right; margin: -4px 5px 0px 0;color: #575656}
#some_adress2 {border-bottom: 1px dashed black; cursor: pointer; position: relative; float: right; margin: -26px 15px 0px 0;color: #575656}
#some_adress:hover, #some_adress_return:hover{border: 0;}
#some_adress_return {border-bottom: 1px dashed black; cursor: pointer; position: relative; z-index:2; float: right; display: none;margin: -4px 5px 0 0;color: #575656;}
.b-login5__adress { background: #bebebe;display: none; left: -5px; top: 22px; position: absolute; z-index:4;}
</style>
<body>
<div class="some_adress_wrap">
<div id="toggleadress3">
<a id="some_adress">Добавить адрес</a>
</div>
<div class="b-login5__adress" id="adress3">
<a id="some_adress2">Добавить адрес</a>
<table id="comments">
<tr>
<td><input type="text" /></td>
<td><input type="button" class="star" value="*"/></td>
<td><div class="removeComment_first">x</div></td>
</tr>
</table>
<table class="table_add_buttons">
<tr>
<td>
<div class="addComment"><a href="#" class="main_bold_font">+ Добавить адрес</a></div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
1) При добавлении строк в таблицу не работает кнопка со звездочкой.
2) Как сделать чтобы если первая строка одна, то первый крестик закрывал весь попап(как в данный момент). Но когда мы кликаем на ссылку +Добавить адрес (соответственно добавляется 2 строки и более) первый крестик не закрывал попап, а удалял текущую строку.
Пытаюсь, но за неимением опыта не могу реализовать.
Очень надеюсь на Вашу помощь.
Заранее благодарю.
|