Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Центр помощи > [JavaScript] Добавить строки таблицы


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

<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>

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

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

Автор: Guedda 31.3.2010, 16:31
Можно с использованием ajax (желательно)

Автор: sTa1kEr 31.3.2010, 16:42
Код

<!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
Обычный 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>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)