Показать меню в таблице последней строки (ссылка) и отобразить модальное окно при нажатии на пункты меню

Question

Показать меню в таблице последней строки (ссылка) и отобразить модальное окно при нажатии на пункты меню

0

Я ссылаюсь на приведенную ниже статью, Cloning Html Table Row и показывает меню DIV http://jsfiddle.net/skram/9hNQU/3/

У меня есть аналогичное требование, но довольно новое для этих технологий..! Мое требование: у меня будет ссылка Hyper в конце каждой строки, теперь на клике/наведении → я хочу показать раскрывающееся меню/выпадающее меню → пользователь может выбрать любую из опций из пунктов меню → и это должно показать мне модальное окно с некоторой формой или данными (исходящими из систем заднего конца), которое является специфичным для выбранной строки!

Например: я хочу изменить одно из содержимого строк, и я нажму на гиперссылку в конце строки, которая должна привести меня в модальное окно, и там я должен иметь возможность изменять и сохранять и закрывать модальное окно !

Я внес изменения в код выше, например, в html:

<td id="mytd1"><a href="">Row 1</a></td>

в js:

$('#mytable').on ('mouseenter', 'td', function () {
    var top = 0;
    var left = 0;
    var id = "#" + this.id;   

    //currTemplateRow = obj.parentElement.parentElement;
    var pos = $(id).position();
    top = pos.top - 5;
    left = pos.left - 5;

    $("#menu").text ('Menu for TD ' + this.id); 

    $("#menu").css(
            { position: "absolute",
                top: top + "px",
                left: left + "px"
            }
        ).show();  
});

$('#mytable').on ('mouseleave', 'td', function () {
    $("#menu").hide();
});

это работает при наведении на последнюю строку (Row3), но я должен иметь возможность отображать меню и onclick в пункте меню, я хочу показать модальное окно!

Пожалуйста, напишите мне, если есть какие-либо статьи/темы, похожие на мои требования. Помогите решить эту проблему!

tnx, saps

sapsm 02 дек. 2013, в 11:44

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

AAA · Answer 1 · 2013-12-02T09-10-00.000Z

$('#mytable').on ('mouseenter', 'td', function () {
var top = 0;
var left = 0;
var id = "#" + this.id;   

//currTemplateRow = obj.parentElement.parentElement;
var pos = $(id).position();
top = pos.top - 5;
left = pos.left - 5;

$("#menu").text ('Menu for TD ' + this.id); 

$("#menu").css(
        { position: "absolute",
            top: top + "px",
            left: left + "px"
        }
    ).show(); 
//list of menu item  
// modal-form content for modal
  $("menu-item").click(function(){
      $('<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">' + modalform + '</div>').modal().on('shown', function ()
            {  
                //callback function
                 return false;
             });
});
});

$('#mytable').on ('mouseleave', 'td', function () {
    $("#menu").hide();
 });

когда я проверил код в jsfiddle.net/skram/9hNQU/3 .. ничего не отображается ..! мне нужно добавить любой HTML-контент тоже?
Вы должны включить модальные CSS и JS
Я разработал некоторый код и вставил в jsfiddle.net/sapsjsf/9RSrg
Но у меня есть следующие проблемы: 1) когда я нажимаю на редактировать, он должен показывать 3 ссылки, но он повторяется, а последняя показывает только 3 ссылки 2) когда я нажимаю на первую ссылку, открывается диалоговое окно, но я хочу выбранную таблицу подробности строки (индекса) в диалоговом окне 3) так же, как в пункте 2, в тот момент, когда я нажимаю на ссылку редактирования записи, индекс выбранной строки таблицы VALUE должен быть передан в модальное окно!
Пожалуйста, помогите по вышеуказанным вопросам!
присвоить ссылку другому идентификатору, затем использовать этот идентификатор для идентификации редактирования комментария и сохранения-обновления соответственно