Issues Adding rows upon submit with Javascript_问答_开发者

I'm trying create a form where when the "+" button is pressed, a new row of four input blank boxes is created. Now, when "+" is press开发者_运维百科ed, it copies the row (and anything typed in it) identically.

How can I create a blank row? How can I have only one "+" button rather than a new one on each new column?

Heres the page: http://myvirtualltciguy.com/Client_Intake_Meds.html

You can try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>
      Meds - Test
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="My Virtual LTCI Guy">
    <meta name="keywords" content="My Virtual LTCI Guy">
    <meta name="author" content="My Virtual LTCI Guy">
    <link rel="stylesheet" href="http://myvirtualltciguy.com/css/ltci_style.css" type="text/css" media="screen" charset="utf-8">
    <script type="text/JavaScript">
function addOneRow(){   
    //table
    var table = document.getElementById('mytable');
    //body of the table
    var tabBody = table.getElementsByTagName("TBODY").item(0);
    var numberRow = table.rows.length;
    //***********Row
    var row = table.insertRow(-1); // appends to the end
    //columns
    var column = row.insertCell(-1);
    column.id = 'column_' + numberRow;
    column.innerHTML = '<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">';

    column = row.insertCell(-1);
    column.innerHTML = '<input type="text" name="textfield_a" style="width:105px;">';       

    column = row.insertCell(-1);
    column.innerHTML = '<input type="text" name="textfield_b" style="width:105px;">';   

    column = row.insertCell(-1);
    column.innerHTML = '<input type="text" name="textfield_c" style="width:105px;">';

    column = row.insertCell(-1);
    column.innerHTML = '<input type="text" name="textfield_d" style="width:105px;">';

    column = row.insertCell(-1);
    column.innerHTML = '<select name="select" style="visibility:hidden;"></select>';

    tabBody.appendChild(row);

    numberRow--;
    var previousButton = document.getElementById('column_'+numberRow);
    previousButton.innerHTML = "";
}   
    </script>
  </head>
  <body>
    <div id="contain">
      <div style="padding:20px 0px 10px 40px;">
        <b>Medications:</b>
      </div>
      <div style="padding:0px 0px 0px 35px;">
        <form action="" method="get">
          <table id="mytable" width="604" cellpadding="5px">
            <thead>
              <tr>
                <td width="35">

                </td>
                <td width="109">
                  Name:
                </td>
                <td width="106">
                  Dose:
                </td>
                <td width="112">
                  Frequency:
                </td>
                <td width="153">
                  Reason Prescribed:
                </td>
                <td width="13">

                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="column_1" width="24">
                  <input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">
                </td>
                <td width="105">
                  <input type="text" name="textfield_a" style="width:105px;">
                </td>
                <td width="105">
                  <input type="text" name="textfield_b" style="width:105px;">
                </td>
                <td width="105">
                  <input type="text" name="textfield_c" style="width:105px;">
                </td>
                <td width="105">
                  <input type="text" name="textfield_d" style="width:105px;">
                </td>
                <td width="56">
                  <select name="select" style="visibility:hidden;">
                    </select>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div><img src="http://myvirtualltciguy.com/img/ltci_line.png" style="padding:20px 0px 20px 40px;">
      <div class="submit2">
        <input type="submit" value="Submit" style="height:30px;">
      </div>
    </div>
  </body>
</html>

Adding a new row with jQuery (doing DOM manipulation like this by hand is painfully tedious):

<table id="data">
  <tr>
    <td>
      <label>
        Foo
        <input name="foo[]" />
      </label>
    </td>
    <td>
      <label>
        Bar
        <input name="bar[]" />
      </label>
    </td>
    <td>
      <label>
        Baz
        <input name="baz[]" />
      </label>
    </td>
    <td>
      <label>
        Qux
        <input name="qux[]" />
      </label>
      <button id="add">+</button>
    </td>
  </tr>
</table>

$(function() { // will run after the DOM tree loaded
    $('#add').click(function() {
        $('#add').detach();
        $('#data tr:last').clone().val(null).insertAfter($('#data tr:last'));
        $('#add').append('#data td:last');
    });
});

Using input names like foo[] works nicely with PHP, which will return all the inputs in that column in an array named foo. If you don't want that, you have to change field names in the new row manually. Also, if you want an accessible site, you should have a non-javascript fallback for adding new rows... things get complicated from there.