Добавление строк в таблицу (JQuery)

10 сообщений

#12 лет назад

Доброго времени суток.
Прошу помощи у профессионалов.
Вот код:

<!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 строки и более) первый крестик не закрывал попап, а удалял текущую строку.
Пытаюсь, но за неимением опыта не могу реализовать.
Очень надеюсь на Вашу помощь.
Заранее благодарю.

11416 сообщений

#12 лет назад

Думаю, что с вашей задачей лучше справятся тут ссылка

1 сообщение

#12 лет назад

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



<!DOCTYPE HTML>

<html lang="ru-RU">

<head>


<meta charset="UTF-8">

<title> </title>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>


<script>

$("document").ready(function(){

	$("#some_adress").click(function() {

		$("#adress3").show();

		$(".addComment a").click();

		return false;

	});

	$(".addComment a").click(function() {

		$('#comments').append('<tr><td><input type="text"/></td><td><input type="button" class="star" value="*"/></td><td><div class="removeComment">x</div></td></tr>');

		return false;

	});

	$(".removeComment").live('click',function() {

		$(this).parents("tr").remove();

		if ($("#comments tr").size() == 0) $("#adress3").hide();

		return false;

	});

	$(".star").live('click',function () {

		alert('star');

	});

});

</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"></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>

10 сообщений

#12 лет назад

panama, спасибо Вам большое! Это то, что нужно. Очень помогли, уже и не надеялась на помощь.
Еще раз спасибо