VPF::[JavaScript] Добавить строки таблицы

Guedda

Дата 31.3.2010, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 6
Всего: 78

Добрый день, уважаемые.
У меня есть таблица:

Код


<table border=0 cellspacing=2 cellpadding=2 width="100%" class="editdata">
<tr>
    <td width="30%" style="font-size: 11px; color:#c0c0c0;">id:</td>
    <td width="50%" style="font-size: 11px; color:#c0c0c0;">название:</td>
    <td width="10%" style="font-size: 11px; color:#c0c0c0;">тип:</td>
    <td width="10%" align="center"><div><spacer /></div></td>
</tr>
<!-- отсюда -->
<tr class="newline" nomer=[0]>
    <td width="30%"><input type="text" name="property_id[]" style="width:100%"></td>
    <td width="50%"><input type="text" name="property_title[]" style="width:100%"></td>
    <td width="10%">
        <select name="property_type[]">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        </select>
    </td>
    <td valign="top"align="left"><input type="button" onclick="addline()" value="+" style="width:22px"></td>
</tr>
<!-- до сюда/иотсюда -->
</table>

Мне необходимо при нажатии на "+" чтобы выделенный (в коде: с двух сторон комментарием) добавлялся после "иотсюда". Но чтобы это происходило без перезагрузки страницы, и чтобы текст, который я ввел в уже существующие инпуты не стирался.

Заранее благодарен за ответы.

--------------------

Ll 2

Guedda

Дата 31.3.2010, 16:31 (ссылка)

(нет голосов)

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 6
Всего: 78

Можно с использованием ajax (желательно)

--------------------

Ll 2

sTa1kEr

Дата 31.3.2010, 16:42 (ссылка)

(нет голосов)

Загрузка ...

9/10 программиста

Профиль
Группа: Завсегдатай
Сообщений: 1553
Регистрация: 21.2.2007

Репутация: 1
Всего: 146

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function() {
            var template = $('.newline').clone();
            $('#plus-button').click(function() {
                $('.newline:last').after(template.clone());
            });
        });

    </script>
</head>
<body>

<table border=0 cellspacing=2 cellpadding=2 width="100%" class="editdata">
<tr>
    <td width="30%" style="font-size: 11px; color:#c0c0c0;">id:</td>
    <td width="50%" style="font-size: 11px; color:#c0c0c0;">название:</td>
    <td width="10%" style="font-size: 11px; color:#c0c0c0;">тип:</td>
    <td width="10%" align="center"><div><spacer /></div></td>
</tr>
<!-- отсюда -->
<tr class="newline" nomer=[0]>
    <td width="30%"><input type="text" name="property_id[]" style="width:100%"></td>
    <td width="50%"><input type="text" name="property_title[]" style="width:100%"></td>
    <td width="10%">
        <select name="property_type[]">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        </select>
    </td>
    <td valign="top"align="left"><input type="button" id="plus-button" value="+" style="width:22px"></td>
</tr>
<!-- до сюда/иотсюда -->
</table>

</body>
</html>

Sanchezzz

Дата 2.4.2010, 13:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: нет
Всего: 60

Обычный JS и фреймворк mootools переписать под себя легко.
Нужно создать таблицу с ID="tablefeald"

Код


function deleteRowsFeald(_this){
$('tablefeald').deleteRow(_this.getParent().getParent().rowIndex); 
}

function addFeald(){
    var tbl = $('tablefeald'); // id="tablefeald"   getElementByID();
    var countfeald = tbl.rows.length;
    var oRow = tbl.insertRow(countfeald);
    
    var oCell = oRow.insertCell(0);
    oCell.set('html','<input type="hidden" value="">');
    var oCell = oRow.insertCell(1);
    oCell.set('html','<input type="text" style="width: 140px" class="xInputText">');
    var oCell = oRow.insertCell(2);
    oCell.set('html','<input type="text" style="width: 140px" name="c12" class="xInputText">');
    var oCell=  oRow.insertCell(3);
    oCell.set('html','<input type="text" class="xInputText" style="width: 50px" maxlength="4" value="0">');
    var oCell = oRow.insertCell(4);
    oCell.set('html',slectOptions);
    var oCell = oRow.insertCell(5);
    oCell.set('html','<a href="#" onclick="deleteRowsFeald(this)">Удалить</a>'); // oCell.inerHtml = 'Код' ;
    var oCell = oRow.insertCell(6);
}

<a href="javascript:;" onclick="addFeald()">addRow</a>

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Центр помощи \| Следующая тема »