0

私はJavaScriptで何かをしようとしている非常に初期の初心者です。

基本的に、ユーザー入力を収集するHTMLフォームがあります。送信ボタンがあります。送信時に、入力からの値を新しい行としてテーブルに追加する必要があります。

私は方向を見つけるために何時間も費やしました、誰かが私を正しい方向に向けることができますか？

4

6 に答える 6

4

他の誰も純粋なJSの答えを提供したくない（または提供できない）ので、純粋なJavaScriptを使用してそれを行う方法を次に示します。不明な点がある場合はお知らせください。役立つリンクを提供し、このコードの機能を説明させていただきます。

HTML：

<table id='targetTbl'>
    <tbody>
        <tr><th>Name</th><th>First name</th></tr>
    </tbody>
</table>
<form id='inForm'>
    <input type='text' name='name' id='name'/>
    <input type='text' name='first' id='first'/>
    <input type='submit' value='add row'/>
</form>​

JavaScript：

document.getElementById('inForm').onsubmit = function(e)
{
    var newRow,i;
    e = e || window.event;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
    }
    e.returnValue = false;
    e.cancelBubble = true;
    newRow = '<tr>';
    for(i=0;i<this.elements.length;i++)
    {
        if (this.elements[i].tagName.toLowerCase() === 'input' && this.elements[i].type === 'text')
        {
            newRow += '<td>'+this.elements[i].value+'</td>';
        }
    }
    document.getElementById('targetTbl').innerHTML += newRow + '</tr>';
    return false;
};

これを機能させるには、HTMLファイルの下部にこのコードを含めて（推奨されません）、変更を試みる前にDOMがロードされていることを確認するか、このコードを内部に配置する必要があります。イベントハンドラー：

window.onload = function()
{
    //above code goes here
};

これが実用的なフィドルです

于 2012-09-06T21:48:54.090 に答える
0

考慮すべきいくつかのポイント：

  • 送信ボタンを機能させたくありません。actionつまり、form要素で指定した場所に移動したくないということです。したがって、（<input type="submit" onclick="dosomething();return false;" />）がfalseを返すonclickイベントを追加するか、タイプが「button」（<input type="button" onclick="dosomething();" />）になります。

  • ボタンが押されたときに呼び出される関数を定義する必要があります。

例：

function dosomething() {
    alert("I did something");
    // do something useful
}
  • <table>タグを作成し、データに基づいてタグに行を追加する必要があります。そのためにjQueryを使用することもできますが、すぐに始められるようにすることをお勧めします。javascriptでのDOM操作は面倒です。あなたは何を知っていますか、jQueryを忘れてください。より良い、よりクリーンで、より速いアプローチについては、@Eliasの回答を確認してください。そしてまた、それはあなたにもっと多くを教えます。ライブラリを使用する場合、または使用する場合、それは貴重な資産になる可能性があります。ライブラリがなくても使用できる場合は、確かにそうなります。

例（jQuery内）：

var table = $("<table></table>");
for (var i=0; i<data.length; i++) {
    var tr = $("<tr></tr>");
    var td = $("<td></td>");
    $(td).text(data[i]);
    $(tr).append(td);
    $(table).append(tr);
}
$("body").append(table);

于 2012-09-06T21:04:46.230 に答える
0

OKみんな、もう少し読んで友達に説明を求めた後、jQueryでこれを行うことができました。わからなかったので、最初にjQueryタグを追加しなかったのが残念です。しかし、私はjsの最初の演習からjQueryに触れました。だから、やがてこれを把握することができました。だから、これは私が持っているものであり、それは私のために働きます。これが正しければ、私のような学習者にとって役立つかもしれません。

入力フィールドのIDは「firstname」と「lastname」です。getElementById（）。valueは、ユーザーが入力した値を取得します。

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value; 
$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );

そして、私はボタンonclick（）を介してこの関数を呼び出しています。サポートしてくれてありがとう。

于 2012-09-07T08:17:27.227 に答える
-1

2つの選択肢があります。

クラシック：フォームを送信します。サーバーはフォームを読み取り、新しい行が追加されたフォームの新しいコピーのHTMLを生成して、ブラウザーに送り返します。

Ajax：AJAXを使用してバックグラウンドでフォームを送信し、次にJavaScriptを使用して、HTMLクライアント側に新しい行を追加します。

どちらを選択するかは、バックエンドコーディングとフロントエンドコーディングの快適さのレベルによって異なります。

于 2012-09-06T20:55:59.903 に答える
-1

この機能を使用できます。テーブルのIDをパラメーターとして送信し、入力の値を持つ変数でvalueInputFormを変更する必要があります

function addRow(tableID) {      

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = valueInputForm;

    var cell2 = row.insertCell(1);
    cell2.innerHTML = valueInputForm;

    var cell3 = row.insertCell(2);
    cell2.innerHTML = valueInputForm;
}
于 2012-09-06T21:03:58.000 に答える
-2

Lets say you have this html HTML:

<form id="target">
  form-field1: <input type="text" id="form-field1" value="Hello there" />
  form-field2: <input type="text" id="form-field2" value="How are you" />
  <input type="submit" value="Go" />
</form>
<div id='targettable'><table><thead></thead><tbody></tbody></table></div>

You can use jquery:

$("#target :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
  $("#targettable >tbody:last').append($(this).val());
})

Add jquery script to your code in <head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-09-06T21:05:57.680 に答える