Question

我想将数据添加到使用javascript动态创建的表中。我创建了一个名称，姓氏，年龄等表格。我必须完成文本框，当我点击“提交”按钮时，表格应该是字段，其中包含文本框中的数据。

表格如下：

        <form name='registration' onSubmit="return formValidation();">  
        <table align="center">
        <tr>
            <td style="text-align:left">Nume</td>
            <td><input type="text" name="name" size="20">
        </tr>
        <tr>
            <td style="text-align:left">Prenume</td>
            <td><input type="text" name="surname" size="20">
        </tr>

        <tr>
            <td style="text-align:left">CNP</td>
            <td><input type="text" name="cnp" size="20">
        </tr>

        <tr>
            <td style="text-align:left">Varsta</td>
            <td><input type="text" name="age" size="20">
        </tr>

        <tr>
            <td style="text-align:left">Ocupatia</td>
            <td>
                <select>
                    <option>Angajat</option>
                    <option>Neangajat</option>
                </select>   
        </tr>
        </table>
        <br/>
        <div class="buttonHolder">
            <INPUT type="submit" name="submit" value="Adauga" onClick="insertData()" id="btn_s" />
            <INPUT type="button" value="Goleste" type="reset" id="btn_i" /> 
        </div>
        </form>

我使用没有边框的桌子，这样我的表格看起来更好。表格中的表格与我的请求无关。

谢谢！

Answer 1

如果您想在同一页面中显示数据，就像点击按钮一样，我认为您不应该使用提交按钮。

试试这个：

function insertData() {
    var data = $('table tr td input, table tr td select');
    var table = $('#dataTable td');
    for (var i = 0; i < table.length; i++) {
        table[i].innerText = (data[i].value);
    }
}

FIDDLE

Answer 2

这是 FIDDLE

$(function() {
  $('form[name="registration"]').submit(function(e) {
    e.preventDefault();
    var name  = $('input[name="name"]').val(),
        sName = $('input[name="surname"]').val(),
        cnp   = $('input[name="cnp"]').val(),
        age   = $('input[name="age"]').val(),
        ocu   = $('select[name="ocupatia"]').val();

   if($('.results').length < 1) {
      $('body').append('<table class="results">'
                        +'<tr>'
                          +'<th>Nume</th>'
                          +'<th>Prenume</th>'
                          +'<th>CNP</th>'
                          +'<th>Varsta</th>'
                          +'<th>Ocupatia</th>'
                        +'</tr>'
                        +'<tr>' 
                          +'<td>'+name+'</td>'
                          +'<td>'+sName+'</td>'
                          +'<td>'+cnp+'</td>'
                          +'<td>'+age+'</td>'
                          +'<td>'+ocu+'</td>'
                        +'</tr>'
                     + '</table>');
   }

  });

});

我希望这是你想要实现的目标。

将文本框中的数据添加到表Javascript，HTML中

2 个答案: