powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Часть кода JS, умеющий вставлять графическую кнопку ``submit``
9 сообщений из 9, страница 1 из 1
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38890053
Konstantin-78
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем привет.
Я создал JS, в котором, в таблицу добавляется строка с тремя колонками, в первых двух – колонках строки, вставляются элементы «<input>»,

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
$(document).ready(function()
{
    $('#add_row').click(function()
    {
        var table = document.getElementById('job');
        var tr = document.createElement('tr');
        tr.innerHTML = '<td><input name="edit_in_1" type="text" size="40"></td>\n\
                        <td><input name="edit_in_2" type="text" size="40"></td>\n\
                        <td></td>';
        table.appendChild(tr);
        return false;
    });
});



Только проблема с вставкой в третий столбец строки, кнопки "submit", следующего вида:
Код: html
1.
2.
3.
4.
5.
<?=Form::image('submit', 'picture', array('src'           => 'media/Img/save.png',
                                                      'onmouseover'   => 'this.src=\'/media/Img/save_click.png\';',
                                                      'onmouseout'    => 'this.src=\'/media/Img/save.png\';',
                                                     )
                          )?>


Как можно ее запихнуть в таблицу (в html она отображается без проблем а вот динамически вставить не получается...)

спасибо всем откликнувшимся
P.S.
Я пользуюсь "kohana"
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38890190
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Konstantin-78,

tr.innerHTML = '<td><input name="edit_in_1" type="text" size="40"></td>\n\
<td><input name="edit_in_2" type="text" size="40"></td>\n\
<td><input name="save" type="submit" class="btn-submit"></td>';
изображения прописать бэкграундом в стили .btn-submit{}, .btn-submit:hover{}
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38890894
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Кнопку submit можно сделать невидимой, неактивной, или вставить её html-код динамически (используя уникальный ID или класс ячейки или вложенного в неё DIV)

Для изменения html-кода строк внутри таблиц лучше использовать documentFragment

Нужно помнить, что после изменения html-кода, для него слетают все обработчики событий, навешанные через javaScript
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38891024
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
бухалтер фантоцциНужно помнить, что после изменения html-кода, для него слетают все обработчики событий, навешанные через javaScript

это смотря как навесить :)
$(<parent>).on("click", ".save-btn", function(){...})
где в качестве <parent> - неизменяемый родительский элемент, вплоть до body
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38891183
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
-k2-,

разумеется, обработчики слетают только на затёртые DOM-объекты, вместо них создаются другие согласно html-коду
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38891374
Konstantin-78
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
-k2-,
Я воспользовался вашим предложением,
и попытылся сделать через css, но у меня не очень получается со стилями,
CSS:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
            .sendsubmit
{
    height: 50px; // высота кнопки
    width:  70px;  // длина кнопки
    margin: 0;
    padding:0;
    border: 0;
    background: transparent url('save.png') no-repeat center top;
    text-indent: -1000em;
    cursor: pointer; 
    cursor: hand;
}
        



и html:
Код: html
1.
<input type="submit" name="save" class="sendsubmit" value="Absenden2"/>



Но почему-то у меня в разных browsers происходит что-то непонятное с размерами кнопки, (допустим когда я открыл режим ("opera drgonfly") в opera, я увидел что это высота первоначальной кнопки "submit" режет изображение, а в dreamweaver – как бы все нормально но текст кнопки «submit» лежит по вех моего изображения), т.е. во всех browser у меня твориться какая- фигня.

Где тут собака зарыта?
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38891411
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Konstantin-78,

стили поправить, если бы вы нарисовали, что хотите получить
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38891421
Konstantin-78
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
-k2-,

Просто я нарисовал кнопку на два события картинки
В html отлично все отрабатывает, а вот со стилями...:-(
...
Рейтинг: 0 / 0
Часть кода JS, умеющий вставлять графическую кнопку ``submit``
    #38892317
Konstantin-78
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Решение:
JS:
Код: javascript
1.
<td><input name='save' type='submit' class='btn_save' value='                 '></td>



CSS:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
.btn_save
{
    height: 25px; // высота кнопки
    width:  70px;  // длина кнопки
    margin: 0;
    padding:0;
    border: 0;
    background: url('/media/Img/save.png');
    cursor: pointer; 
}
.btn_save:hover
{
    height: 25px; 
    width:  70px;  
    margin: 0;
    padding:0;
    border: 0;
    background: url('/media/Img/save_click.png');
    cursor: pointer;     
}
...
Рейтинг: 0 / 0
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Часть кода JS, умеющий вставлять графическую кнопку ``submit``
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]