3

JavaScriptを使用して、以下にあるまったく同じ要素を追加しようとしています。ここで見つかったすべてのソリューションを試しましたが、要素をエコーし​​ようとしましphp echoたが、うまくいきませんでした。入力名などを変更する必要はありません。単にそのボタンをクリックしてテーブルに別の行を追加するだけです。

要素は次のとおりです。

<tr>
<td><input type="text" name="links"></td>
<td><input type="text" name="keywords"></td> 
<td><input type="text" name="violationtype"></td>   
<td><input type="submit" id="last" class="button" value="Add another line" onclick:"addField();"></td>          
</tr>

私は本当に何でもしていますが、外部参照（jqueryなど）なしでシステムを維持していたので、javascriptが欲しいのですが、現時点ではどんな提案も受け付けています。私は次のコードでそれをやってみました：

function addFields() {
    var number = document.getElementById("last").value;
    var html = '<tr>' +
    '<td><input type="text" name="links"></td>' +
    '<td><input type="text" name="keywords"></td>' +
    '<td><input type="text" name="violationtype"></td>' +
    '<td><input type="submit" id="last" class="button" value="Add another line" name="line" onclick:"addField();"></td>';
    number.appendChild(html);
}

しかし、それは何もしないようです。どの入力が最後であるかをより適切に把握してコードを処理する必要があると思いますが、id="last"それを行う方法がわかりません。

4

3 に答える 3

11

以下を使用して同じことを達成することができます

HTML:

<table id="tbl">
    <tr>
        <td><input type="text" name="links" /></td>
        <td><input type="text" name="keywords" /></td> 
        <td><input type="text" name="violationtype" /></td>   
        <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>          
    </tr>
</table>

JS:

function addField(n)
{
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
}

また、idfromを削除します。 は一意でinputあるID必要があり、すべての入力に同じ名前を使用していることを覚えておいてください。ここでは、名前は として名前を付け、 links[]それらkeywords[]をviolationtype[]配列として使用する必要がありますが、ケースが何であるかはわかりません。

例。

于 2013-10-05T16:53:56.910 に答える
8

完全な動作例 - http://jsfiddle.net/QmHdL/

テーブルはこのように作成できます

<table id="myTable">
    <tr>
        <td><input type="text" name="links"></td>
        <td><input type="text" name="keywords"></td>
        <td><input type="text" name="violationtype"></td>
        <td><input type="button" class="button" value="Add another line" onclick="addField();"></td>
    </tr>
</table>

今、addFieldこのように実装する必要があります

    function addField (argument) {
        var myTable = document.getElementById("myTable");
        var currentIndex = myTable.rows.length;
        var currentRow = myTable.insertRow(-1);

        var linksBox = document.createElement("input");
        linksBox.setAttribute("name", "links" + currentIndex);

        var keywordsBox = document.createElement("input");
        keywordsBox.setAttribute("name", "keywords" + currentIndex);

        var violationsBox = document.createElement("input");
        violationsBox.setAttribute("name", "violationtype" + currentIndex);

        var addRowBox = document.createElement("input");
        addRowBox.setAttribute("type", "button");
        addRowBox.setAttribute("value", "Add another line");
        addRowBox.setAttribute("onclick", "addField();");
        addRowBox.setAttribute("class", "button");

        var currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(linksBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(keywordsBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(violationsBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(addRowBox);
    }
于 2013-10-05T16:58:32.520 に答える
1

ここにはいくつかの問題があります..

するonclick:必要がありますonclick=

次に、入力要素である id 'last' を持つ要素に追加しています - それに追加することはできません。行を追加する場合は、代わりにテーブルにIDを付けて追加します。それ以外の場合は、他の要素を作成します-IDを持つdiv/spanを作成し、テーブル全体を最初から作成する場合はそれに追加します

次に、そのような HTML を追加することはできません。新しい表の行要素を作成して追加するか、 を使用する必要があります[element].innerHTML += [your new row HTML]。

于 2013-10-05T16:33:40.170 に答える