1

だから私はこれを手に入れました：

HTML

<table id="mytable">
<tr>
   <td>

   </td>
   <td>

   </td>
</tr>
<tr>
   <td>
      3. Choose elements:
   </td>
   <td>
      <select name="antal_tidspunkter" id="antal_tidspunkter">
         <option value="1" SELECTED>1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
   </td>
</tr>
    <tr class="highlightedRowStart">
   <td class="borderLeft">
      Time
   </td>
   <td class="borderRight">
      <select name="seats_timeclock[29]">
         <option value="08:00">08:00</option>
         <option value="08:30">08:30</option>
         <option value="09:00">09:00</option>
         <option value="09:30">09:30</option>
         <option value="10:00">10:00</option>
         <option value="10:30">10:30</option>
         <option value="11:00">11:00</option>
         <option value="11:30">11:30</option>
         <option value="12:00">12:00</option>
         <option value="12:30">12:30</option>
         <option value="13:00">13:00</option>
         <option value="13:30">13:30</option>
         <option value="14:00">14:00</option>
         <option value="14:30">14:30</option>
         <option value="15:00">15:00</option>
         <option value="15:30">15:30</option>
         <option value="16:00">16:00</option>
         <option value="16:30">16:30</option>
         <option value="17:00">17:00</option>
         <option value="17:30">17:30</option>
         <option value="18:00" SELECTED>18:00</option>
         <option value="18:30">18:30</option>
         <option value="19:00">19:00</option>
         <option value="19:30">19:30</option>
         <option value="20:00">20:00</option>
         <option value="20:30">20:30</option>
         <option value="21:00">21:00</option>
         <option value="21:30">21:30</option>
         <option value="22:00">22:00</option>
         <option value="22:30">22:30</option>
      </select>
   </td>
</tr>
<tr class="highlightedRowMiddle">
   <td class="borderLeft">
      2:
   </td>
   <td class="borderRight">
      <select name="seats_free_2tables[29]">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2" SELECTED>2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
      </select>
   </td>
</tr>
<tr class="">
   <td class="borderLeft">
     4:
   </td>
   <td class="borderRight">
      <select name="seats_free_4tables[29]">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4" SELECTED>4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
      </select>
   </td>
</tr>
<tr class="highlightedRowEnd">
   <td class="borderLeft">
      Converttable
   </td>
   <td class="borderRight">
      <select name="seats_converttables[29]">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2" SELECTED>2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
         <option value="13">13</option>
         <option value="14">14</option>
         <option value="15">15</option>
         <option value="16">16</option>
         <option value="17">17</option>
         <option value="18">18</option>
         <option value="19">19</option>
         <option value="20">20</option>
      </select>
   </td>
</tr>
<tr class="spacer">
   <td></td>
</tr>
</table>

jQuery

$(document).ready(function() {

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            $("#mytable tr:gt(1):lt(5)").clone().appendTo("#mytable");
        }
    });
});

デモ：http： //jsfiddle.net/bTWQg/

このように機能し、セレクターの要素数を変更すると、さらに要素が追加されます。

これに関する私の問題は、要素を複製するときに名前が保持されることです。seats_timeclock[29]したがって、後でフォーム（PHP）の処理を操作するときに、1つの要素のデータのみを受け取ります。

[]要素が複製さ11111, 99999れるたびに、内部に乱数を追加する方法はありますか？そうしないと、新しい要素に入力されたデータを取得できません。

4

5 に答える 5

1

このコードを使用します：

$(document).ready(function(){

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            $("#mytable tr:gt(1):lt(5)").clone().children("select").attr("name", "seats_free_2tables[" + random() + "]").appendTo("#mytable");
        }
     });
});​

そして、そのrandom()関数には、次のコードを使用します。

function random()
{
    return Math.floor(Math.random()*10);
}

更新：このコードは完全に機能します：

function random()
{
    return Math.floor(Math.random()*10);
}
$(document).ready(function(){
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            var a = $("#mytable tr:gt(1):lt(5)").clone();
            a.find(".random").attr("name", "seats_free_2tables[" + random() + "]");
            a.appendTo("#mytable");
        }
    });
});​

このフィドルを参照してください。randomあなたが変える必要があるすべての人にクラスを与えてください！

于 2012-06-23T16:23:07.540 に答える
1 
$(document).ready(function() {

    // function to generate random number
    // between 1111 to 9999

    function randNum() {
        return Math.floor(Math.random() * (9999 - 1111 + 1)) + 1111;
    }

    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            $("#mytable tr:gt(1):lt(5)")
                .clone()
                .find('select[name^=seats_timeclock]')
                attr('name', function() { // changing the name
                    return 'seats_timeclock_[' + randNum() + ']';
                })
                .end() // go back to clone element
                .appendTo("#mytable");
        }
    });
});

デモ

上記のコードは、HTMLを変更せずに、単一のチェーンステートメントで機能します。

あなたのデモによると

$(document).ready(function() {
    // function to generate random number
    function randNum() {
        return Math.floor(Math.random() * (9999 - 1111 + 1)) + 1111;
    }
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            var randnr = randNum();
            
            $("#mytable tr:gt(1):lt(5)")
                .clone()
                .find('select[name^=seats_timeclock]')
                .attr('name', function() { // changing the name
                    return 'seats_timeclock[' + randnr + ']';
                })
                .end() // need to put end to jump to clone
                .find('select[name^=seats_free_2tables]')
                .attr('name', function() { // changing the name
                    return 'seats_free_2tables[' + randnr + ']';
                })
                .end()  // need to put end to jump to clone
                .find('select[name^=seats_free_4tables]')
                .attr('name', function() { // changing the name
                    return 'seats_free_4tables[' + randnr + ']';
                })
                .end()  // need to put end to jump to clone
                .find('select[name^=seats_converttables]')
                .attr('name', function() { // changing the name
                    return 'seats_converttables[' + randnr + ']';
                })
                .end() // go back to clone element
                .appendTo("#mytable");
        }
    });
});

デモ

于 2012-06-23T16:55:14.293 に答える
0

配列入力を使用できます。

<select name="seats_timeclock[]">

そうすれば、フォームに必要な数の入力を追加でき、それらはブラウザによって適切にパックされて送信されます。

次に、PHPでは、などがあり$_POST['seats_timeclock'][0]ます $_POST['seats_timeclock'][1]。その配列を簡単にループできます。

foreach($_POST['seats_timeclock'] as $key => $seats_timeclock) {
    // the other array posts, will be serialized in the same way, 
    // so you can access the other fields having the same index
    $seats_free_2tables = $_POST['seats_free_2tables'][$key];
    $seats_free_4tables = $_POST['seats_free_4tables'][$key];
    ...
}
于 2012-06-23T16:24:19.970 に答える
0

name要素のクローンを作成した後、属性を変更できます。

  var clone = $("#mytable tr:gt(1):lt(5)").clone();
  var min = 1111;
  var max = 9999;
  var number = Math.round(Math.random() * (max-min)) + min ; 
  clone.find('select[name^=seats_timeclock]')
       .attr('name','seats_timeclock['+number+']');
  clone.appendTo("#mytable");

これがデモです：http：//jsfiddle.net/bTWQg/3/

于 2012-06-23T16:26:19.187 に答える
0 
$(document).ready(function(){
    var clonedObj;
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            clonedObj = $("#mytable tr:gt(1):lt(5)").clone();
            $(clonedObj).find('select[name="seats_timeclock[29]"]').attr('name', 'seats_timeclock[' + Math.floor((Math.random()*100000)+1) + ']');
            $(clonedObj).appendTo("#mytable");
        }
     });
});​

編集：内の変数番号のサポート付きseats_timeclock。jQuery filter（）関数と単純な正規表現を利用します。

$(document).ready(function(){
    var clonedObj;
    $("#antal_tidspunkter").bind("change", function() {
        $("#mytable tr:gt(6)").remove();
        for (var i = 1; i < this.value; i++) {
            clonedObj = $("#mytable tr:gt(1):lt(5)").clone();
            $(clonedObj).find('select').filter(function(){
                if($(this).attr('name').match(/seats_timeclock/)){
                    return true;
                } else {
                    return false;
                }                   
            }).attr('name', 'seats_timeclock[' + Math.floor((Math.random()*100000)+1) + ']');
            $(clonedObj).appendTo("#mytable");
        }
     });
});​
于 2012-06-23T16:27:11.463 に答える