0

私はプログラミングが初めてで、フォームを作成しました。追加ボタンをクリックしたときに、この要素をテーブルに挿入したい

ラベルとテキストフィールドを追加する方法をすでに知っています。行を追加して新しいラベルとテキストフィールドをテーブルに挿入する方法を知りたいです。

<SCRIPT type="text/javascript">
var x = 1;

function add(type) {
    var newlabel = document.createElement("Label");
    newlabel.for = "Name";
    newlabel.innerHTML = "NAME: ";

    var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("name", type);
    element.setAttribute("value", "Name"+x);
    element.setAttribute("id", "Name"+x);
    element.setAttribute("style","width: 64");

    var newlabel1 = document.createElement("Label");
    newlabel1.for = "AGE";
    newlabel1.innerHTML = "AGE: ";  

    var element1 = document.createElement("input");
    element1.setAttribute("type", type);
    element1.setAttribute("name", type);
    element1.setAttribute("value", "AGE"+x);
    element1.setAttribute("id", "AGE"+x);
    element1.setAttribute("style","width: 64");

    var foo = document.getElementById("fooBar");
    foo.appendChild(newlabel);
    foo.appendChild(element);
    foo.appendChild(newlabel1);
    foo.appendChild(element1);

    x++;
}
</script>

<form id="fooBar" form name="form1" method="post" action="">
    <table id = "mytable" table border="1">
        <tr>
            <th scope="col">name: </th>
            <th scope="col">
                <label for="name"></label>
                <input type="text" name="name" id="name">
            </th>
            <th scope="col">age:</th>
            <th scope="col">
                <label for="name2"></label>
                <input type="text" name="name2" id="name2">
            </th>
        </tr>
    </table>
    <INPUT type="button" value="Add" onClick="add('text')" style="width:100px;"/>
</form>
4

2 に答える 2

2

あなたのコードで：

> <SCRIPT language="javascript">

script 要素の language 属性は非推奨です。type が必要です。次を使用してください:

<script type="text/javascript">

...

newlabel.setAttribute("for", "名前");

for属性の値は、フォーム コントロールの ID と一致する必要があります。一致しないと、コントロールに関連付けられません。また、setAttribute を使用するよりも、要素のプロパティを設定する方が簡単で堅牢です。

 newlabel.htmlFor = "Name";

forは javascript (実際には ECMAScript) の予約語であるため、HTMLの for属性はhtmlForプロパティとして参照されることに注意してください。

> newlabel.innerHTML = "NAME:    ";

innerHTML プロパティを使用するのではなく、おそらくテキスト ノードを追加する必要があります。

 newlabel.appendChild(document.createTextNode("NAME:    "));

HTML は次のようになります。

<form id="fooBar">
  <input type="button" value="Add fields" onclick="add();">
</form>

BUTTON要素を使用している場合、フォームが送信されている可能性があることに注意してください（ボタン要素はデフォルトで送信ボタンであるため）。フィールドは追加されていますが、フォームが送信されるため、見てください。ボタンが type="button" であることを確認してください。

于 2012-09-07T03:02:14.787 に答える
0

iveはフィードバック/コメントを必要としました:)

 <SCRIPT type="text/javascript">
var x =1;

function add(type,tabID) {

var tbody = document.getElementById(tabID).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var data1 = document.createElement("td")    
var data2 = document.createElement("td") 
var data3 = document.createElement("td") 
var data4 = document.createElement("td") 


var newlabel = document.createElement("Label");
newlabel.for = "Name";
newlabel.innerHTML = "NAME: ";

var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("name", type);
element.setAttribute("value", "Name"+x);
element.setAttribute("id", "Name"+x);


var newlabel1 = document.createElement("Label");
newlabel1.for = "AGE";
newlabel1.innerHTML = "AGE: ";  


var element1 = document.createElement("input");
element1.setAttribute("type", type);
element1.setAttribute("name", type);
element1.setAttribute("value", "AGE"+x);
element1.setAttribute("id", "AGE"+x);


var foo = document.tbody;

data1.appendChild(newlabel)
data2.appendChild(element)
data3.appendChild(newlabel1)
data4.appendChild(element1)

row.appendChild(data1)
row.appendChild(data2)
row.appendChild(data3)
row.appendChild(data4)
tbody.appendChild(row);


x++;

}

</script>

<form  id="fooBar" form name="form1" method="post" action="">
 <table id = "mytable" table border="1">
 <tr>
<th scope="col">name: </th>
<th scope="col">
  <label for="name"></label>
  <input type="text" name="name" id="name">
  </th>
  <th scope="col">age:</th>
  <th scope="col">
  <label for="name2"></label>
  <input type="text" name="name2" id="name2">
</th>
  </tr>
  </table>
  <INPUT type="button" value="Add" onClick="add('text','mytable')" style="width:100px;"/>
 </form>
于 2012-09-12T05:58:27.870 に答える