Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > > >
Восстановить пароль Регистрация

Ответ Создать новую тему
 
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
14.01.2014, 22:04
  #1
Вечер добрый, подскажи пожалуйста, почему не работает такой код?
Ещё я не очень поняла, почему у меня не получается работать с $(this). Нет никаких методов для этого объекта, получить tagName и другие параметры тоже не удаётся. Как это делается?

Суть метода: элемент, на который кликнули, удалить из родительского элемента.
Код JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 
            $(document).ready(function () {
 
                $("input[type='checkbox'").click(function () {
 
                    var $elem = $(this)
                    var $table = $(this).parent('table');
                    $table.removeChild($elem);
 
                });
 
            });
 
        </script>
Добавлено через 10 минут
Вообще, конечно, тут возможно проблема в том, что $(this) не DOM элемент, поэтому дальнейшая обработка не верная.
Но у меня есть лишь одна идея - получить id у $(this) и потом уже DOM-объект document.getElementsById
только я не знаю как получить id из $(this).
Такая запись alert( $(this).id) выводит 'undefined'. Да и несколько непонятно, почему после $(this). в принципе нет никаких подсказок с методами и свойствами
AdAgent
Объявления
14.01.2014, 22:04
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 01:05  [ТС]
  #31
Цитата Сообщение от vovandr Посмотреть сообщение
Код JavaScript
1
2
3
if($('tbody','#firsttable').length > 0){$('tbody','#firsttable').append(tds);
                    }else {$('#firsttable').append(tds);}
                    });
ну вообщем, поменяла как вы сказали, однако первый метод лучше работать не стал, всё по той же причине.
я даже полностью закоментировала второй метод на всякий случай, но это не помогло.
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 01:08
  #32
мне тяжело сказать, что там происходит. Ошибок в коде вроде сейчас я не вижу, почему не работает сложно сказать, надо в реале смотреть на примере, если сможете залейте на jsfidle или codepen и все станет ясно, почему не работает
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 01:15  [ТС]
  #33
Цитата Сообщение от vovandr Посмотреть сообщение
мне тяжело сказать, что там происходит. Ошибок в коде вроде сейчас я не вижу, почему не работает сложно сказать, надо в реале смотреть на примере, если сможете залейте на jsfidle или codepen и все станет ясно, почему не работает
http://pastebin.com/gXYxTsPE
не подойдёт?
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@{ Layout = "~/_MasterLayout.cshtml"; }
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
        <script type="text/javascript">
 
            $(document).ready(function () {
 
                $("input[type='checkbox']").click(function () {
 
                    var tr = $(this).parents('tr').remove();
                    var tableId = $(this).parents('table').attr('id');
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
 
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
 
        </script>
    </head>
    <body>
        
        <input type="text" id="input_text">
        <input type="button" id="input_button" value="Добавить">
        <p>Нужно сделать</p>
        <table id="firsttable">
            <tr id="check1"><td>@Html.CheckBox("Chek1",false)</td><td><p>Повторить теорию</p></td></tr>
            <tr><td>@Html.CheckBox("Chek2",false)</td><td><p>Сдать экзамен</p></td></tr>
            <tr><td>@Html.CheckBox("Chek3",false)</td><td><p>Купить торт</p></td></tr>
        </table>
        <p>Сделано</p>
        <table id="secondtable">
            <tr id="check1"><td>@Html.CheckBox("Chek4",true)</td><td><p>Весело провести новый год, Рождество</p></td><td></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>
        </table>
 
    </body>
</html>
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 01:16
  #34
нет нужен html уже отрисованный...
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 01:21  [ТС]
  #35
Цитата Сообщение от vovandr Посмотреть сообщение
нет нужен html уже отрисованный...
а вон как. ну щас попробую сделать.

Добавлено через 2 минуты
Блин, что-то у меня какая-то ерунда получается
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 01:24
  #36
через средства разработчика скопируйте ваш код с локальной версии уже после обработки сервера
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 01:27  [ТС]
  #37
Цитата Сообщение от vovandr Посмотреть сообщение
через средства разработчика скопируйте ваш код с локальной версии уже после обработки сервера
http://codepen.io/anon/pen/rmbDg
Код JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
            $(document).ready(function () {
 
                $("input[type='checkbox']").click(function () {
 
                    var tr = $(this).parents('tr').remove();
                    var tableId = $($(this).parents('table')).attr('id');
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
 
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
HTML+CSS
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@{ Layout = "~/_MasterLayout.cshtml"; }
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
        <script type="text/javascript">
 
            $(document).ready(function () {
 
                $("input[type='checkbox']").click(function () {
 
                    var tr = $(this).parents('tr').remove();
                    var tableId = $(this).parents('table').attr('id');
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
 
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
 
        </script>
    </head>
    <body>
        
        <input type="text" id="input_text">
        <input type="button" id="input_button" value="Добавить">
        <p>Нужно сделать</p>
        <table id="firsttable">
            <tr id="check1"><td>@Html.CheckBox("Chek1",false)</td><td><p>Повторить теорию</p></td></tr>
            <tr><td>@Html.CheckBox("Chek2",false)</td><td><p>Сдать экзамен</p></td></tr>
            <tr><td>@Html.CheckBox("Chek3",false)</td><td><p>Купить торт</p></td></tr>
        </table>
        <p>Сделано</p>
        <table id="secondtable">
            <tr id="check1"><td>@Html.CheckBox("Chek4",true)</td><td><p>Весело провести новый год, Рождество</p></td><td></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>
        </table>
 
    </body>
</html>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body {
}
 
 
.main_div
{
     border: solid;
                border-color: black;
                border-width: 1px;
                min-height: 100%;
}
 
.center_section
{
                border: solid;
                border-color: black;
                border-width: 1px;
                width: 600px;  
                margin: 5px auto 5px auto;
                height: 440px;
}
 
.section_right
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float: right;
}
.section_left
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float:left;
}
header, footer
{
     border: solid;
    border-color: black;
    border-width: 1px;
    height: 100px;
    background-color:black;
    color: #fff;
}
header h1
{
    margin: 30px auto auto auto;
    width: 170px;
}
 
footer p
{
      margin: 40px auto auto auto;
    width: 200px;
}
 
.center_section p
{
    border-bottom: dotted;
    border-bottom-color: Black;
    border-bottom-width: 1px;
}
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 01:35
  #38
ага, замечательно, теперь при клике на что и что должно произойти?
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 01:37  [ТС]
  #39
Цитата Сообщение от vovandr Посмотреть сообщение
ага, замечательно, теперь при клике на что и что должно произойти?
В первой табличке кликаем на чекбокс - переносится во вторую табличку.
Во второй кликаем - переносится в первую.

+

Есть функционал добавления записи. И удаления - клик на крестике напротив записи во второй таблице
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 01:46
  #40
http://codepen.io/anon/pen/zwKmF
Код JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
            $(document).ready(function () {
 
                $("input[type='checkbox']").live('click',function () {
 
                    var tableId = $(this).parents('table').attr('id');
                    var tr = $(this).parents('tr').detach();
                   
                    if (tableId == 'firsttable') {
                        $('#secondtable tbody').append(tr);
                    } else {
                        $('#firsttable tbody').append(tr);
                        $("#firsttable .del").remove();
                    }
 
  
                });
 
                $("#input_button").click(function () {
                    var $str = $('#input_text').val()
                    $('#input_text').val(' ')
                    //  document.getElementById('firsttable').innerHTML += '<tr><td><input type="checkbox" id ="'+$str+'"></td><td><p>'+$str+'</p></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>'
                    var tds = '<tr><td><input type="checkbox" id ="' + $str + '" name=""></td><td><p>' + $str + '</p></td></tr>'
                    if ($('tbody', '#firsttable').length > 0) {
                        $('tbody', '#firsttable').append(tds);
                    } else { $('#firsttable').append(tds); }
                });
 
                $('.del').click(function () {
                    $(this).parents('tr').remove();
                });
            });
HTML+CSS
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
                   
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
       
    </head>
    <body>
        
        <input type="text" id="input_text">
        <input type="button" id="input_button" value="Добавить">
        <p>Нужно сделать</p>
        <table id="firsttable">
            <tr id="check1"><td><input id="Chek1" name="Chek1" type="checkbox" /></td><td><p>Повторить теорию</p></td></tr>
            <tr><td><input id="Chek2" name="Chek2" type="checkbox" /></td><td><p>Сдать экзамен</p></td></tr>
            <tr><td><input id="Chek3" name="Chek3" type="checkbox" /></td><td><p>Купить торт</p></td></tr>
        </table>
        <p>Сделано</p>
        <table id="secondtable">
            <tr id="check1"><td><input checked="checked" id="Chek4" name="Chek4" type="checkbox" /></td><td><p>Весело провести новый год, Рождество</p></td><td></td><td class="del"><input type="button" id="input_button" value="X"></td></tr>
        </table>
 
    </body>
</html>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body {
}
 
 
.main_div
{
     border: solid;
                border-color: black;
                border-width: 1px;
                min-height: 100%;
}
 
.center_section
{
                border: solid;
                border-color: black;
                border-width: 1px;
                width: 600px;  
                margin: 5px auto 5px auto;
                height: 440px;
}
 
.section_right
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float: right;
}
.section_left
{
    border: solid;
    border-color: black;
    border-width: 1px;
    float:left;
}
header, footer
{
     border: solid;
    border-color: black;
    border-width: 1px;
    height: 100px;
    background-color:black;
    color: #fff;
}
header h1
{
    margin: 30px auto auto auto;
    width: 170px;
}
 
footer p
{
      margin: 40px auto auto auto;
    width: 200px;
}
 
.center_section p
{
    border-bottom: dotted;
    border-bottom-color: Black;
    border-bottom-width: 1px;
}
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 01:48  [ТС]
  #41
Цитата Сообщение от vovandr Посмотреть сообщение
http://codepen.io/anon/pen/zwKmF
о, да не может быть! в чём же был косяк???
почему так через live и detach() ?
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 01:54
  #42
потому что вы кнопкой добавляете новые элементы, которые до этого в объектной модели документа не были. detach я использовал для отладки, можете и с remove попробовать впринципе должно работать тоже
PinkPink
Форумчанин
9 / 9 / 2
Регистрация: 10.05.2012
Сообщений: 261
15.01.2014, 02:10  [ТС]
  #43
Цитата Сообщение от vovandr Посмотреть сообщение
потому что вы кнопкой добавляете новые элементы, которые до этого в объектной модели документа не были. detach я использовал для отладки, можете и с remove попробовать впринципе должно работать тоже
Огромное вам спасибо! Я уверена, что без вашей помощи не разобралась бы. Правда и сейчас не очень понимаю, почему айдишники не определялись, ведь таблицы существовали и до этого.
Скажите, как вы изучали этот язык, хочу это понимать.

Добавлено через 13 минут
Цитата Сообщение от PinkPink Посмотреть сообщение
Огромное вам спасибо! Я уверена, что без вашей помощи не разобралась бы. Правда и сейчас не очень понимаю, почему айдишники не определялись, ведь таблицы существовали и до этого.
Скажите, как вы изучали этот язык, хочу это понимать.
я имею ввиду книги и прочее
vovandr
Форумчанин
505 / 411 / 93
Регистрация: 19.08.2013
Сообщений: 1,132
15.01.2014, 02:13
  #44
PinkPink книжку с носорогом Флэнэгана вам советую, там все вприницпе есть что надо по js. А по jquery даже не знаю что посоветовать, просто материал впринципе везде одинаково подаётся (как вариант jquery для профессионалов изд Вильямс).
Vovan-VE
Форумчанин
15.01.2014, 16:09
  #45
 Комментарий модератора Vovan-VE
PinkPink, vovandr, Код должен быть в тексте сообщения. Песочницы — это бонус.
Yandex
Объявления
15.01.2014, 16:09
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
Pascal ABC Удалить из очереди первый элемент, затем добавить элемент с первым значением
Сформулировать очередь, содержащую вещественные числа. Удалить из очереди первый элемент, затем добавить элемент с первым значением и вычислить среднее арифметическое всех элементов очереди. Нужно...
Pascal ABC Эльянора 23.04.2014 19:21
C++ Структура "Информация": - носитель; - объем; - название; - автор. Удалить первый элемент с заданным объемом информации, добавить элемент перед элемент
Структура "Информация": - носитель; - объем; - название; - автор. Удалить первый элемент с заданным объемом информации, добавить элемент перед элементом с указанным номером. Добавлено через...
С++ для начинающих Bubbles 05.02.2014 23:13
jQuery Uploadify удалить файл
У меня есть загруженный на сервер файл, теперь я его хочу удалить нажав на кнопочку cancel (то есть нажимаю на картинку черного крестика) при этом я хочу удалить файл с сервера. Но я никак не могу...
jQuery ayrat 13.06.2013 19:42
jQuery Удалить обертку элемента
Как попроще удалить обертку элемента.. например есть блок <p> <code> бла бла бла </code> </p>
jQuery lavrik 24.05.2013 10:11
jQuery Удалить элемент из ListView asp.net
Есть на странице ListView вывожу в него данные: как с помощью JQUERY удалить один Item из ListView на странице. пытаюсь удалить так: <td id="DeleteFromCart" style="width: 180px;text-align:...
jQuery SKIER 20.09.2012 20:20
jQuery Удалить лишний pre?
У меня иногда возникает ситуация когда данные обертывается сразу двумя тегами pre, возможно ли как-то удалить один тег pre, если так случай возник, что бы не было вот такого: <pre class="cc"> ...
jQuery Schtrich 11.08.2012 08:01
Delphi удалить 2-й элемент списка,если он нечетный,иначе этот элемент обнулить
удалить 2-й элемент списка,если он нечетный,иначе этот элемент обнулить
Delphi astrobear 02.05.2012 12:53
jQuery Удалить фон в галерее
Сейчас на денвере работаю с темой http://demo.wordpress-ru.ru/ И хотелось бы, чтобы темное окно, которое появляется на каждом изображении, как то отключить. Как это сделать?
jQuery Semenovich 22.03.2012 20:37
Опции темы

Текущее время: 14:50. Часовой пояс GMT +4.

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.