Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.04.2016, 17:47
Интересующийся
Отправить личное сообщение для failoflife Посмотреть профиль Найти все сообщения от failoflife
 
Регистрация: 04.04.2016
Сообщений: 14

Динамически создаю таблицу
<table class="table-editor">
                        <tbody>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a1,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a1,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a1,3"></td>
                        </tr>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a2,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a2,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a2,3"></td>
                        </tr>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a3,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a3,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a3,3"></td>
                        </tr>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a4,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a4,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a4,3"></td>
                        </tr>
                        </tbody>
                    </table>


<input id="addcol" type="button" value="Add Column" />
<input id="remcol" type="button" value="Reomve Column" />
<input id="addrow" type="button" value="Add row" />
<input id="remrow" type="button" value="Remove row" />


$('#addcol').click(function() {
    var $tablerow = $('table.table-editor').find('tr');
    count = 0;

    $tablerow.each(function(index, value){
        count += 1;
        var $listitem = $(this);
        n = parseInt($listitem.index());
        var $input = $('<input>', {
        type: 'text',
        maxlength: '2',
        placeholder: 'a'
    });
        var $newRow = $("<td>");
        $("table.table-editor tr:eq(" + n + ")").append($newRow.append($input));
        $("input:text").attr("size", "2");
    });
});

$('#remcol').click(function() {
    var $tablerow = $('table.table-editor').find('tr');
    
    $tablerow.each(function(index, value){
        $("table.table-editor tr:eq("+index+") td:eq(-1)").remove();
    });
});

$('#addrow').click(function() {
    
    var $input = $('<input>', {
        type: 'text',
        maxlength: '2',
        placeholder: 'a'
    });
    var $newRow = $("<td/>");
    $('table.table-editor').append("<tr></tr>");
    $('table.table-editor tr:eq(0) td').each(function(index, value){
        $("table.table-editor tr:eq(-1)").append($input.append($input));
        $("input:text").attr("size", "2");
    });
});

$('#remrow').click(function() {
    $('table.table-editor tr:eq(-1)').remove();
});


1. Некорректно работает добавление строк. Как это исправить?
2. Хочу, чтоб при добавлении новых ячеек в placeholder писалось а(номер столбца),(номер строки)
Ответить с цитированием
  #2 (permalink)  
Старый 07.04.2016, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Добавление строк и столбцов в таблицу
failoflife,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
$(function() {
    var table = $(".table-editor");
    $("#remcol").click(function() {
        $("tr td:last-child", table).remove()
    });
    $("#addcol").click(function() {
        $("tr", table).append(function(i) {
            var num = "a" + (i + 1) + "," + ($("td", this).length + 1);
            return $("<td>").append($("<input/>", {
                attr: {
                    size: "2",
                    maxlength: "2",
                    placeholder: num
                }
            }))
        })
    });
    $("#remrow").click(function() {
        $("tr:last-child", table).remove()
    });
    $("#addrow").click(function() {
        var clone = $("tbody tr:last-child", table), first = !clone.length;
        clone = first ?  $("<tr/>", {"class" : "normal-row"}) : clone.clone();
        clone.appendTo(table);
        first && $("#addcol").trigger("click");
        var num = "a" + (clone.index() + 1) +
            ",";
        $("input", clone).each(function(indx, input) {
            $(input).attr({
                placeholder: num + ++indx
            })
        })
    })
});
  </script>
</head>

<body>
<table class="table-editor">
                        <tbody>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a1,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a1,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a1,3"></td>
                        </tr>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a2,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a2,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a2,3"></td>
                        </tr>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a3,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a3,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a3,3"></td>
                        </tr>
                        <tr class="normal-row">
                            <td><input type="text" size="2" maxlength="2" placeholder="a4,1"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a4,2"></td>
                            <td><input type="text" size="2" maxlength="2" placeholder="a4,3"></td>
                        </tr>
                        </tbody>
                    </table>


<input id="addcol" type="button" value="Add Column" />
<input id="remcol" type="button" value="Remove Column" />
<input id="addrow" type="button" value="Add row" />
<input id="remrow" type="button" value="Remove row" />

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывести таблицу с числами с помощью цикла While VicRul Общие вопросы Javascript 1 19.08.2014 09:58
Код для преобразования введенных данных в таблицу 500р saves7 Работа 13 07.08.2013 14:50
Как повернуть таблицу? Iktash Элементы интерфейса 5 05.08.2012 10:12
Проблема с динамически созданным инпутом DZHETIGAPA Элементы интерфейса 2 12.05.2011 10:01
Динамически создаваемые компоненты Drag&Drop BEER_HUNTER Элементы интерфейса 6 22.08.2008 13:32