7

フォームに「新しい行の追加」機能を実装する必要があります。フォームの構造は次のようなものです。

<table>
<tr>
     <td><input type="text" name="v1[label]" /></td>
     <td><input type="text" name="v1[observation]" /></td>
     <td><input type="text" name="v1[remarks]" /></td>
</tr>
<tr>
     <td><input type="text" name="v2[label]" /></td>
     <td><input type="text" name="v2[observation]" /></td>
     <td><input type="text" name="v2[remarks]" /></td>
</tr>
<tr>
    <td colspan="3">
       <input type="button" id="addrow" value="Add One More Row">&nbsp;
       <input type="submit" name="proceed" value="Submit" />
    </td> 
</tr>
</table>

ご覧のとおり、行ごとにv[]数が増えています。v1、v2..など

私が探しているもの

[行をもう1つ追加]ボタンをクリックすると、次のことが発生します。

  • 最後の行（ボタンのある行）のすぐ上に新しい行が挿入されます
  • その行で名前属性値が1増加します（つまり、v2[label]はv3[label]になり、v2[observation]はv3[observation]になります）。

私が試したこと

私が一番近くに来たのはを使用してjQuery's clone()いた。これにより、行が完全に追加されます。しかし、ボタンがクリックされるたびにname属性の値を1ずつ増やす方法を見つけるのは難しいと感じています。

現在使用されているjQUERY

$('input:button[id="addrow"]').click(function(){

   var secondlast = $('table tr:last').prev('tr');
   secondlast.clone().insertBefore(secondlast);

});

ボタンを2回クリックすると、次のHTMLが追加されます

<tr>
     <td><input type="text" name="v2[label]" /></td>
     <td><input type="text" name="v2[observation]" /></td>
     <td><input type="text" name="v2[remarks]" /></td>
</tr>

<tr>
     <td><input type="text" name="v2[label]" /></td>
     <td><input type="text" name="v2[observation]" /></td>
     <td><input type="text" name="v2[remarks]" /></td>
</tr>

そのため、行が追加されていますが、name属性はv2のままですが、3行目と4行目はv3とv4である必要があります。clone()私はそれができないことを理解しており、それが私が代替案を探している理由です。

4

2 に答える 2

6 
$('input:button[id="addrow"]').click(function(){
    var secondlast = $('table tr:last').prev('tr');
    var newClone = secondlast.clone();
    // find all the inputs within your new clone and for each one of those
    newClone.find('input').each(function() {
        var currentNameAttr = $(this).attr('name'); // get the current name attribute
        // construct a new name attribute using regular expressions
        // the match is divided into three groups (indicated by parentheses)
        // p1 will be 'v', p2 will be the number, p3 will be the remainder of the string
        var newNameAttr = currentNameAttr.replace(/^(v)(\d+)(.*)$/, function(match, p1, p2, p3) {
            return p1+(parseInt(p2)+1)+p3;
        });
        $(this).attr('name', newNameAttr);   // set the incremented name attribute 
    });
    // insert after is I assume what you want
    newClone.insertAfter(secondlast);
});

編集

// you could also simply increment any digit you find as Batman indicated
var newNameAttr = currentNameAttr.replace(/\d+/, function(match) {
    return (parseInt(match)+1);
});
于 2012-11-08T09:32:02.383 に答える
0

これらの入力のデータをサーバーに送信する必要がある場合、取得する必要のあるv *の数を判断するのは困難です...代わりに、[]を使用して配列に行を追加することをお勧めします。

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

<table>
<tr>
     <td><input type="text" name="v[label][]" /></td>
     <td><input type="text" name="v[observation][]" /></td>
     <td><input type="text" name="v[remarks][]" /></td>
</tr>
<tr>
     <td><input type="text" name="v[label][]" /></td>
     <td><input type="text" name="v[observation][]" /></td>
     <td><input type="text" name="v[remarks][]" /></td>
</tr>
<tr>
    <td colspan="3">
       <input type="button" id="addrow" value="Add One More Row">&nbsp;
       <input type="submit" name="proceed" value="Submit" />
    </td> 
</tr>
</table>

post変数は一意になりますv。データを取得するためにそれをループするのは簡単です。これがPHPの例です。

foreach($_POST['v']['label'] as $k=>$v){
    $_POST['v']['label'][$k]; // label
    $_POST['v']['observation'][$k]; // label
    $_POST['v']['remarks'][$k]; // label
}

これにより、入力の数に制限がなく、各クローンの名前の処理や再フォーマットが不要になり、使いやすくなります。

于 2012-11-08T09:20:51.143 に答える