2016-11-08 17 views
0

私は動的な編集フォームを作成しようとしています。ユーザーは、行を追加したり、行を削除したりすることができます。動的入力フィールドに複数の行を表示

私のPHPでは問題ありません。問題はMy Jqueryにあります。ここで

は私のHTML

<?php 
       $attributes = array('class' => 'form-horizontal', 'id' => ''); 
       echo form_open_multipart($controller.'/save',$attributes); 
       ?> 

       <div class="form-group"> 
        <label class="col-sm-3 control-label">Attendance Date </label> 
        <div class="col-sm-7"> 
        <div class="input-group"> 
         <div class="input-group-addon"> 
         <i class="fa fa-calendar"></i> 
         </div> 
         <input id="datetimepicker_mask" type="text" value="<?=inggris_date($master->startdate)?>" readonly name="attendance_date" class="form-control"/> 
        </div> 
        </div> 
        </div> 


        <div class="form-group"> 
         <label class="col-sm-3 control-label">Keterangan</label> 
         <div class="col-sm-5"> 
         <textarea class="form-control" required name="keterangan"><?=$master->keterangan;?></textarea> 
         </div> 
        </div> 

        <table width="100%" id="example1" class="table table-bordered table-striped"> 
         <tr> <td> 
           No. 
          </td> 
          <td> Nama Lengkap </td> 

         </tr> 

         <?php 
         $x = 0; 
         foreach($detail as $det) { 
         $x++; 
         ?> 
         <tr id = 'ke<?=$x;?>'> 
          <td> <?=$x;?> </td> 
          <td> 
           <select name="nip[]" class="form-control select2"> 
           <option> -- </option> 
           <?php foreach($emp as $orang){ ?> 
           <option <?php if($det->nip == $orang->Nip) echo "selected"; ?> value="<?=$orang->Nip;?>"> [<?=$orang->Nip;?>] - [<?=$orang->FullName;?>] </option> 
           <?php } ?> 
           </select> 
          </td> 
         </tr> 
         <?php } ?> 


        </table> 
         <div><a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a>&nbsp;&nbsp;&nbsp;<a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a></div> 
          <br> 
          <br> 

       <div class="box-footer"> 
        <button type="reset" class="btn btn-default">Reset</button> 
        <button type="submit" class="btn btn-info pull-right">Save</button> 
        </div><!-- /.box-footer --> 
       </form> 

であり、ここで私のjqueryのは、だから、

 <?php $totaldata = count($detail); echo "Total data = ".$totaldata; ?> 
<script type="text/javascript">  
$(document).ready(function(){ 

     var i=<?=$totaldata;?>; 
    $("#add_row").click(function(){ 
     $('#ke'+i).html("<td>"+ (i+1) +"</td><td><select name='nip[]' class='form-control'>"+ 
           "<option> -- </option>"+ 
           <?php foreach($emp as $orang){ ?> 
           "<option value='<?=$orang->Nip;?>'> [<?=$orang->Nip;?>] - [<?=$orang->FullName;?>] </option>"+ 
           <?php } ?> 
           "</select> </td>"); 
     $('#example1').append('<tr id="ke'+(i+1)+'"></tr>'); 
     i++; 
    }); 
    $("#delete_row").click(function(){ 
     if(i>1){ 
     $("#ke"+(i-1)).html(''); 
     i--; 
     } 
    }); 


}); 
</script> 

あり、ここに私の問題は、最初の時間から、ページの読み込みです。ビューは、この

enter image description here

のようなものです。そしてここに私が行っているTambah Baris Baru

enter image description here

二行をクリックしたときに起こるものです。番号は間違っています。

そして起こる何これは私が予想通り Hapus Baris

enter image description here

それは仕事だをクリックします。しかし番号は間違っています。

どうすれば修正できますか?私の悪い英語のために申し訳ありません。ありがとう。

JsFiddle https://jsfiddle.net/0z2fcg39/

+0

私はあなたがVARを加算または減算されている場合、それは増加の問題であると言うでしょう私 – Icewine

+0

私はそう思います。しかし、私は詳細から来る 'totaldata 'で価値を与えることを試みている。 – YVS1102

+0

あなたが最後のものを削除したい行を削除すると、私のフィドルhttps://jsfiddle.net/0z2fcg39/ – YVS1102

答えて

2

問題は、あなたが疑われるようiの値です。 iの最初の実行値はすでに2番目の行を持つ2で、新たに追加された値(slno 3)で上書きされます。あなたのコードのクイックビューを取っ

$(document).ready(function() { 
 

 
    var i = 2; 
 
    $("#add_row").click(function() { 
 
    i++; 
 
    var $tr = $('<tr id="ke' + i + '"></tr>').appendTo('#example1'); 
 

 
    $tr.html("<td>" + (i) + "</td><td><select name='nip[]' class='form-control'>" + 
 
     "<option> -- </option>" + 
 
     "<option value='0600260'> [0600260] - [ZAENAL ABIDIN] </option>" + 
 
     "<option value='0802781'> [0802781] - [SATIBI ] </option>" + 
 
     "<option value='0903380'> [0903380] - [JUDY SJARIP] </option>" + 
 
     "<option value='1105605'> [1105605] - [YULIANTI HENDARSIH] </option>" + 
 
     "<option value='1106975'> [1106975] - [ABDUL ROCHIM] </option>" + 
 
     "<option value='120442130008'> [120442130008] - [CHOIRUL ILYAS] </option>" + 
 
     "<option value='1207246'> [1207246] - [ACHMAD MAULANA] </option>" + 
 
     "<option value='123456'> [123456] - [Test] </option>" + 
 
     "<option value='1309713'> [1309713] - [LITICIA SOCA LAWRENDRA ] </option>" + 
 
     "<option value='1411097'> [1411097] - [RAMDAN NUR] </option>" + 
 
     "<option value='1411517'> [1411517] - [JULIMAN YASONASA GEA ] </option>" + 
 
     "<option value='1411795'> [1411795] - [NOVIANTO CHRIS HENDARWAN] </option>" + 
 
     "<option value='1412021'> [1412021] - [WALUYO SUPRIADI] </option>" + 
 
     "<option value='1412717'> [1412717] - [ADDINUL FAUZAN ] </option>" + 
 
     "<option value='1412774'> [1412774] - [ABDUL FATAH] </option>" + 
 
     "<option value='1500575'> [1500575] - [BAGUS SUSETYO] </option>" + 
 
     "<option value='1500701'> [1500701] - [AHMAT SUPARDI] </option>" + 
 
     "<option value='1501815'> [1501815] - [KHAIRUNNAS ] </option>" + 
 
     "<option value='1501971'> [1501971] - [SHELLY DINI DEBYANZAH] </option>" + 
 
     "<option value='1502017'> [1502017] - [CHOIRUL ILYAS] </option>" + 
 
     "<option value='1602762'> [1602762] - [BOBY KURNIAWAN] </option>" + 
 
     "<option value='1603240'> [1603240] - [TOTO MARYOTO] </option>" + 
 
     "</select> </td>"); 
 
    }); 
 

 
    $("#delete_row").click(function() { 
 
    if (i > 1) { 
 
     $("#ke" + i).remove(); 
 
     i--; 
 
    } 
 
    }); 
 

 

 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="http://localhost:84/payroll2/dinas_ho_other/save" method="post" accept-charset="utf-8" class="form-horizontal" id="" enctype="multipart/form-data"> 
 
    <div class="form-group"> 
 
    <label class="col-sm-3 control-label">Attendance Date</label> 
 
    <div class="col-sm-7"> 
 
     <div class="input-group"> 
 
     <div class="input-group-addon"> 
 
      <i class="fa fa-calendar"></i> 
 
     </div> 
 
     <input id="datetimepicker_mask" type="text" value="2016-11-08" readonly name="attendance_date" class="form-control" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="form-group"> 
 
    <label class="col-sm-3 control-label">Keterangan</label> 
 
    <div class="col-sm-5"> 
 
     <textarea class="form-control" required name="keterangan">TEST 2</textarea> 
 
    </div> 
 
    </div> 
 

 
    <table width="100%" id="example1" class="table table-bordered table-striped"> 
 
    <tr> 
 
     <td> 
 
     No. 
 
     </td> 
 
     <td>Nama Lengkap</td> 
 

 
    </tr> 
 

 

 
    <tr id='ke1'> 
 
     <td>1</td> 
 
     <td> 
 
     <select name="nip[]" class="form-control select2"> 
 
      <option>--</option> 
 
      <option value="0600260">[0600260] - [ZAENAL ABIDIN]</option> 
 
      <option value="0802781">[0802781] - [SATIBI ]</option> 
 
      <option value="0903380">[0903380] - [JUDY SJARIP]</option> 
 
      <option value="1105605">[1105605] - [YULIANTI HENDARSIH]</option> 
 
      <option value="1106975">[1106975] - [ABDUL ROCHIM]</option> 
 
      <option value="120442130008">[120442130008] - [CHOIRUL ILYAS]</option> 
 
      <option value="1207246">[1207246] - [ACHMAD MAULANA]</option> 
 
      <option value="123456">[123456] - [Test]</option> 
 
      <option value="1309713">[1309713] - [LITICIA SOCA LAWRENDRA ]</option> 
 
      <option value="1411097">[1411097] - [RAMDAN NUR]</option> 
 
      <option value="1411517">[1411517] - [JULIMAN YASONASA GEA ]</option> 
 
      <option value="1411795">[1411795] - [NOVIANTO CHRIS HENDARWAN]</option> 
 
      <option value="1412021">[1412021] - [WALUYO SUPRIADI]</option> 
 
      <option value="1412717">[1412717] - [ADDINUL FAUZAN ]</option> 
 
      <option value="1412774">[1412774] - [ABDUL FATAH]</option> 
 
      <option value="1500575">[1500575] - [BAGUS SUSETYO]</option> 
 
      <option value="1500701">[1500701] - [AHMAT SUPARDI]</option> 
 
      <option value="1501815">[1501815] - [KHAIRUNNAS ]</option> 
 
      <option selected value="1501971">[1501971] - [SHELLY DINI DEBYANZAH]</option> 
 
      <option value="1502017">[1502017] - [CHOIRUL ILYAS]</option> 
 
      <option value="1602762">[1602762] - [BOBY KURNIAWAN]</option> 
 
      <option value="1603240">[1603240] - [TOTO MARYOTO]</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 

 
    <tr id='ke2'> 
 
     <td>2</td> 
 
     <td> 
 
     <select name="nip[]" class="form-control select2"> 
 
      <option>--</option> 
 
      <option value="0600260">[0600260] - [ZAENAL ABIDIN]</option> 
 
      <option value="0802781">[0802781] - [SATIBI ]</option> 
 
      <option value="0903380">[0903380] - [JUDY SJARIP]</option> 
 
      <option value="1105605">[1105605] - [YULIANTI HENDARSIH]</option> 
 
      <option value="1106975">[1106975] - [ABDUL ROCHIM]</option> 
 
      <option value="120442130008">[120442130008] - [CHOIRUL ILYAS]</option> 
 
      <option value="1207246">[1207246] - [ACHMAD MAULANA]</option> 
 
      <option value="123456">[123456] - [Test]</option> 
 
      <option value="1309713">[1309713] - [LITICIA SOCA LAWRENDRA ]</option> 
 
      <option value="1411097">[1411097] - [RAMDAN NUR]</option> 
 
      <option value="1411517">[1411517] - [JULIMAN YASONASA GEA ]</option> 
 
      <option value="1411795">[1411795] - [NOVIANTO CHRIS HENDARWAN]</option> 
 
      <option value="1412021">[1412021] - [WALUYO SUPRIADI]</option> 
 
      <option value="1412717">[1412717] - [ADDINUL FAUZAN ]</option> 
 
      <option selected value="1412774">[1412774] - [ABDUL FATAH]</option> 
 
      <option value="1500575">[1500575] - [BAGUS SUSETYO]</option> 
 
      <option value="1500701">[1500701] - [AHMAT SUPARDI]</option> 
 
      <option value="1501815">[1501815] - [KHAIRUNNAS ]</option> 
 
      <option value="1501971">[1501971] - [SHELLY DINI DEBYANZAH]</option> 
 
      <option value="1502017">[1502017] - [CHOIRUL ILYAS]</option> 
 
      <option value="1602762">[1602762] - [BOBY KURNIAWAN]</option> 
 
      <option value="1603240">[1603240] - [TOTO MARYOTO]</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 

 

 
    </table> 
 
    <div><a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a>&nbsp;&nbsp;&nbsp;<a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a> 
 
    </div> 
 
    <br> 
 
    <br> 
 

 
    <div class="box-footer"> 
 
    <button type="reset" class="btn btn-default">Reset</button> 
 
    <button type="submit" class="btn btn-info pull-right">Save</button> 
 
    </div> 
 
    <!-- /.box-footer --> 
 
</form>

+0

https://jsfiddle.net/arunpjohny/u7shLjhf/ –

関連する問題