Javascript DIV, оставшийся в правом верхнем углу любой таблицы

Это сложно объяснить, но в основном у меня есть редактор WYSIWYG, и мне нужно убедиться, что div всегда находится в правом верхнем углу любой таблицы, когда эта таблица нажата. У этого div есть кнопки, которые управляют такими вещами, как цвет и границы конкретной ячейки, на которую было нажато.Javascript DIV, оставшийся в правом верхнем углу любой таблицы

Мой текущий код указан в следующем JSfiddle, а также в коде ниже, любая помощь будет принята с благодарностью.

Одна из моих идей заключалась в том, чтобы определить количество столбцов в любой таблице, а затем поместить div в последний столбец в первой строке, но я не смог заставить его работать. Хотя я действительно искал некоторые решения/пытался самостоятельно потратить пять или шесть часов. Если у кого есть какие-либо вопросы/предложения, пожалуйста, не стесняйтесь публиковать их.

fiddle

$('.myTblBody tr td').click(function() { 
    var html = $(this).text(); 
    var x = (this).rows[0].cells.length; 
    $('#box').remove(); 
    $(this).parent().append('<div id="box" style="width:50px; height:20px; background-color:#666; position:absolute; margin-top:-25px; margin-left:-50px;">'); 
    //If you would like to know row and col number. 
    var row = $(this).parent().index(); 
    var col = $(this).index(); 
    // alert('row ==' + row + "col == "+ col); 
});

источник

2014-02-04 user2994429

Добавить position:absolute;top:0;left:0; в атрибут стиля коробки;

Здесь обновляется код

$('.myTblBody tr td').click(function(){ 
    var html = $(this).text(); 
    $('#box').remove(); 
    $(this).parent().append('<div id="box" style="position:absolute;top:0;left:0; width:50px; height:20px; background-color:#666">'); 
    //If you would like to know row and col number. 
    var row = $(this).parent().index(); 
    var col = $(this).index(); 
    alert('row ==' + row + "col == "+ col); 
});

Тест на скрипку http://jsfiddle.net/ravi441988/uRBgC/1/

источник

2014-02-04 05:43:14 Ravi

Ха-ха, да, я просто закончил то же самое редактирование, как минуту назад, спасибо. Надеюсь, это поможет другим с той же проблемой, как и я, конечно. – user2994429

:) Также, если вы используете тот же div для всех td, создайте один div, и вы можете использовать атрибут height для отображения анимированного div. – Ravi

Умная идея, а также .. Был еще один вопрос: у меня есть так, что «ящик» удаляется всякий раз, когда вы нажимаете на другое «td», но как насчет того, когда вы выходите из таблицы? Как я могу его удалить в этот момент? @Ravi – user2994429

Если вы установите дел до position: absolute; top: 0; right: 0 и любой родительский элемент для position: relative DIV будет отображаться в верхнем правом углу этого элемента.

источник

2014-02-04 05:38:58 helion3

Aaaaah! Конечно, я рассматривал это как таблицу, а не как div. Знал, что я забыл что-то важное, спасибо. – user2994429

Javascript DIV, оставшийся в правом верхнем углу любой таблицы

ответ

Смежные вопросы