Форум

failoflife · #1 (**permalink**) 07.04.2016, 21:03

У нас есть две таблицы.
Два радио-инпута.
И одна кнопка.

С помощью инпутов выбираем Таблицу в которую будем добавлять колонку с помощью нажатия кнопки.

<table class="myTable1">
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
   <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<table class="myTable2">
<hr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
   <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<input class="one" type="radio" id="oneTable" value="oneTable" name="table" checked>Таблица 1
<input class="two" type="radio" id="twoTable" value="twoTable" name="table">Таблица 2

<input id="addcol" type="button" value="Add Column" />

var table;

		$('input:radio[name=table]').change(function() {
        if (this.value == 'oneTable') {
            table = $(".one");
        }
        else if (this.value == 'twoTable') {
           table = $(".two");
        }
    });
    
    $("#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
                }
            }))
        })
    });

рони · #2 (**permalink**) 07.04.2016, 21:31

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 i = $("[name=table]"), t = $(".myTable");
    $("#addcol").click(function() {
        var table = t.eq(i.index(i.filter(":checked")));
        $("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
                }
            }))
        })
    });

   })
  </script>
</head>

<body>
<table class="myTable">
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
   <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<table class="myTable">
<hr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
   <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<hr>
<table class="myTable">
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
   <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<table class="myTable">
<hr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
   <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>
<input  type="radio"  name="table" checked>Таблица 1
<input  type="radio"  name="table">Таблица 2
<input  type="radio"  name="table">Таблица 3
<input  type="radio"  name="table">Таблица 4
<input id="addcol" type="button" value="Add Column" />

</body>
</html>

failoflife · #3 (**permalink**) 07.04.2016, 21:50

рони, вааау. Спасибо, Рони. Сегодня вообще выручил. )

Форум

Справочник

Discord чат

Курсы javascript