Изменить количество полей ввода HTML с Javascript - PullRequest
Новая
       12

Изменить количество полей ввода HTML с Javascript

2 голосов
/ 14 февраля 2010

Я работаю над формой HTML, которая будет публиковать данные на моем веб-сервере для хранения в базе данных. У меня нет проблем с кодом PHP и SQL, но я хочу иметь небольшую функцию в форме на стороне клиента:

Должен быть раскрывающийся список (выберите), который спрашивает, сколько строк определенного типа вы хотите. Затем небольшой JavaScript должен создать их для вас.

вроде таких: 

<form method="POST" action="act.php">
<select name="numrows"><option>1</option><option>2</option></select>
<table>
    <tr>
        <td><input type="text" name="row[x]" /></td>
    </tr>
</table>
</form>

Теперь я хотел бы иметь столько копий <tr>, сколько выбрано в numrows, и каждая с соответствующим номером в имени (заменяя x). Как бы это реализовать в JavaScript?

Я понимаю, что мне нужно написать метод и ссылаться на него с событием onchange в теге select, но я совершенно не понимаю, как написать эту функцию.

Ответы [ 4 ]

0 голосов
/ 14 февраля 2010

Я уверен, что вы можете делать это разными способами с помощью jQuery и т. Д., Но если вы ищете портативное DOM-совместимое решение, вы можете вернуться к основам, таким как: 

<html>
<head>
  <script type="text/javascript">
    function removerows (tablebody) {
      var rows = tablebody.getElementsByTagName("tr");
      while (rows.length)
        rows[0].parentNode.removeChild(rows[0]);
    }

    function addrows (tablebody, n) {
      for (var i=0; i<n; i++) {
        var row = document.createElement("tr");
        var titlecell = document.createElement("td");
        titlecell.appendChild(document.createTextNode("Row " + i));
        row.appendChild(titlecell);

        var cell = document.createElement("td");
        var input = document.createElement("input");
        input.setAttribute("type", "text");
        input.setAttribute("name", "row["+i+"]");
        cell.appendChild(input);
        row.appendChild(cell);
        tablebody.appendChild(row);
      }
    }

    function change () {
      var select = document.getElementById("numrows");
      var index = select.selectedIndex
      var n = parseInt(select.value);
      var tablebody = document.getElementById("maintablebody");
      removerows(tablebody);
      addrows(tablebody, n);
    }
  </script>
</head>
<body>
  <form method="POST" action="act.php">
  <select id="numrows" name="numrows" onchange="change()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <table id="maintable">
    <tbody id="maintablebody">
      <tr>
        <td>Row 0</td>
        <td><input type="text" name="row0" /></td>
      </tr>
    </tbody>
  </table>
  <input type="submit"/>
  </form>
</body>
</html>

Здесь я использую W3C DOM Level 1 и HTML-расширения . Единственный нестандартный аспект - использование атрибута onchange для элемента select. Если вы хотите быть пуристом по этому поводу, вы можете использовать addElementListener и attachEvent.

Вставьте этот HTML-файл в файл и попробуйте его в Firefox и / или Internet Explorer, чтобы увидеть, выполняет ли он то, что вам нужно. Если вы не уверены, возвращайтесь с вопросами.

0 голосов
/ 14 февраля 2010

Вы можете использовать шаблонизатор javascript, он четко отделяет HTML от логики JS.

Я являюсь автором PURE , посмотрите на демонстрационную страницу и руководства.
Это был мой способ заменить мой стек XML / XSLT, когда я перешел в JSON.

Если стиль не является вашей чашкой чая, вы можете искать в Интернете и найти множество этих инструментов, которые радикально изменят способ создания динамических веб-страниц.

0 голосов
/ 14 февраля 2010

это легко сделать с помощью jQuery 

('#mytable').append('<tr>...</tr>');

сначала вам понадобится поймать изменение (я предполагаю, что #selectnumrows ID для numrows) 

('#selectnumrows').change(function() {
var x = $(this).val(); // would better if you parse it
for (var i = 1; i < x; i ++) {
('#mytable').append('<tr><td><input type="text" name="row[' + x + ']" /></td></tr>');
} 
});

Работа с jQuery сделает задачу 100 проще. Получите некоторую предысторию, и вы сможете понять код / ​​лучше его.

0 голосов
/ 14 февраля 2010

Вы не должны использовать write () - лучший подход - использовать JavaScript для вставки объектов в DOM под вашим табличным объектом. В общем, изменение DOM намного чище, чем write() (и вы не можете удалить дополнительную строку с помощью write, когда они меняют выбор с 2 на 1).

(Google для "добавления JavaScript таблицы строк" - он покажет примеров )

Затем для каждой строки добавляется элемент TD, а под каждым TD - элемент ввода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...