How to edit data in specific row and column in table? (like Microsoft Excel)

Question

I want to edit data in my table with specific row and column (example : row 1 column 2). After I click that specific data, I want show my Modal Pop-up that showed some buttons. If users click one of that button, that value will saved on that specific row.

Example:
After users clicked specific cell (example cell A2), it will show a modal that contain buttons (button example : M6). If user click button "M6", that value will showed at table & save in database (M6 will saved in cell A2). Got it?

Here is the code :

<section class="content container-fluid">
    <!-- TABLE: LATEST ORDERS -->

          <div class="box box-info">
            <div class="box-header with-border">              
                <select onChange="document.location.href=this.options[this.selectedIndex].value;">
                <option selected disabled>-- Pilih Bulan --</option>
                  <option value="<?php echo site_url('hrdpublicarea/edit_absen/jadwal_januari');?>">Januari</option>
                  <option value="<?php echo site_url('hrdpublicarea/edit_absen/jadwal_februari');?>">Februari</option>               
                </select>
                <h3 style="text-align: center; margin-top: -25px;"><?php echo $this->uri->segment('3');;?></h3>


            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="table-responsive">
                <table class="tabel" border="1" style="text-align: center; cursor: pointer;">
    <thead>
    <tr>
      <td width="40px">No</td>
      <td width="100px">Nama</td>
      <td width="120px">Section</td>
      <td width="40px">1</td>
      <td width="40px">2</td>
      <td width="40px">3</td>
      <td width="40px">4</td>
      <td width="40px">5</td>
      <td width="40px">6</td>
      <td width="40px">7</td>
      <td width="40px">8</td>
      <td width="40px">9</td>
      <td width="40px">10</td>
      <td width="40px">11</td>
      <td width="40px">12</td>
      <td width="40px">13</td>
      <td width="40px">14</td>
      <td width="40px">15</td>
      <td width="40px">16</td>
      <td width="40px">17</td>
      <td width="40px">18</td>
      <td width="40px">19</td>
      <td width="40px">20</td>
      <td width="40px">21</td>
      <td width="40px">22</td>
      <td width="40px">23</td>
      <td width="40px">24</td>
      <td width="40px">25</td>
      <td width="40px">26</td>
      <td width="40px">27</td>
      <td width="40px">28</td>
      <td width="40px">29</td>
      <td width="40px">30</td>
      <td width="40px">31</td>
    </tr>
    </thead>


    <?php $no=0; foreach($absen as $row):$no++?>
    <tr>
            <td ><?php echo $no ?></td>
            <td><?php echo $row['nama']; ?></td>
            <td><?php echo $row['section']; ?></td>

            <?php  
            if ($this->uri->segment('3')=='jadwal_januari' OR $this->uri->segment('3')=='jadwal_maret' 
             OR $this->uri->segment('3')=='jadwal_mei'     OR $this->uri->segment('3')=='jadwal_agustus' 
             OR $this->uri->segment('3')=='jadwal_juli'    OR $this->uri->segment('3')=='jadwal_oktober' 
             OR $this->uri->segment('3')=='jadwal_desember') {
              $bu = 32;
            } elseif ($this->uri->segment('3')=='jadwal_februari'){
              $bu = 29;
            } else {
              $bu = 31;
            }

            for ($a=1; $a<$bu; $a++) {
                  if ($row[$a]=='') {
                    echo"<td style='background-color: white;'>".$row[$a]."</td>";
                  } else if ($row[$a]=='M6' OR $row[$a]=='M7' OR $row[$a]=='M8' OR $row[$a]=='M9'
                          OR $row[$a]=='M10'OR $row[$a]=='M11'OR $row[$a]=='M12'OR $row[$a]=='M'
                          OR $row[$a]=='MD'){
                          echo"<td  class='printarea' style='background-color: #a7ea9a;'>".$row[$a]."</td>"; 
                  } else if ($row[$a]=='A13'OR $row[$a]=='A14'OR $row[$a]=='A15'OR $row[$a]=='A16'
                          OR $row[$a]=='A'){
                          echo"<td style='background-color: #f7e565;'>".$row[$a]."</td>"; 
                  } else if ($row[$a]=='N22'OR $row[$a]=='N23'OR $row[$a]=='N24'OR $row[$a]=='N'){
                    echo"<td style='background-color: #ff9287;'>".$row[$a]."</td>";
                  } else if ($row[$a]=='SM' OR $row[$a]=='SM1'OR $row[$a]=='SM2'OR $row[$a]=='SM3'
                          OR $row[$a]=='SM4'OR $row[$a]=='SN' OR $row[$a]=='SE1'OR $row[$a]=='SE2'
                          OR $row[$a]=='SE3'OR $row[$a]=='S'){
                    echo"<td style='background-color: #96c5ff;'>".$row[$a]."</td>";
                  } else if ($row[$a]=='#'OR $row[$a]=='DP'OR $row[$a]=='PH' OR $row[$a]=='O'
                            OR $row[$a]=='C'){
                    echo"<td style='background-color: #878787;'>".$row[$a]."</td>";
                  }
            }         
    ?>
              </tr> 
               <?php endforeach;?>    
  </table>

  <div id='out'></div>

  <div class="modal fade" id="myModal">
  <div class="modal-dialog" style="margin-left: 10px; width: 210px; margin-top: 60px;">
    <div class="modal-content">
      <div class="modal-header" style="height: 50px; background-color: #3a3a3a">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;"><span aria-hidden="true">&times;</span></button>
        <h4 style="margin-top: 0px; text-align: center; margin-bottom: 20px; color: white;" class="modal-title"> Here is The Modal :</h4>
      </div>
      <div class="modal-body">

        <p>Nama Karyawan : <input readonly type="text" class="form-control" id="txtfname"/></p>

        <button class="btn" 
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#a7ea9a; color : black; 
                       padding-right : 15px;"                                
                >M6</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#a7ea9a; color : black; 
                       padding-right : 15px;"                                
                >M7</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#a7ea9a; color : black;  
                       padding-right : 15px;"                                
                >M8</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#a7ea9a; color : black; 
                       padding-right : 15px;"                                
                >M9</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#a7ea9a; color : black; 
                       padding-right : 15px;"                                
                >M10</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#a7ea9a; color : black;  
                       padding-right : 15px;"                                
                >M11</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color : #a7ea9a; color : black; 
                       padding-right : 15px;"                                
                >M12</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#f7e565; color : black; 
                       padding-right : 15px;"                                
                >A13</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#f7e565; color : black; 
                       padding-right : 15px;"                                
                >A14</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#f7e565; color : black; 
                       padding-right : 15px;"                                
                >A15</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#f7e565; color : black; 
                       padding-right : 15px;"                                
                >A16</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#ff9287; color : black; 
                       padding-right : 15px;"                                
                >N22</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#ff9287; color : black; 
                       padding-right : 15px;"                                
                >N23</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#ff9287; color : black; 
                       padding-right : 15px;"                                
                >N24</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#96c5ff; color : black; 
                       padding-right : 15px;"                                
                >S</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#878787; color : black; 
                       padding-right : 15px;"                                
                >OFF</button>  
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#878787; color : black; 
                       padding-right : 15px;"                                
                >DP</button>
        <button class="btn"
                style="margin-top: 5px; width: 85px; height:35px; 
                       background-color :#878787; color : black; 
                       padding-right : 15px;"                                
                >C</button>        
      </div>
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary">Selesai</button>
      </div> -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




  </section>

Javascript:

<script type="text/javascript"> $('table tbody tr  td').on('click',function(){
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[1].textContent);

</script>

Please try and provide us with a [Complete, minimal and verifiable](https://stackoverflow.com/help/mcve) example. — bendl, Aug 28 '17 at 15:19
@MoshFeu I want to users can edit specific row (like Microsoft Excel), how? — Yugo, Aug 28 '17 at 15:24
I see that you are trying to solve it with modal. So what exactly you are looking for? Are you need a popup script? — Mosh Feu, Aug 28 '17 at 15:26
@MoshFeu Yeah I tried to solve with modal. After users clicked specific cell (example cell A2), it will show a modal that contain buttons (button example : 123). If user click one of that button, that value will showed at table & save in database (123 will saved in cell A2). Got it? — Yugo, Aug 28 '17 at 15:33
That I understand, so what are missing if you implemented it all? — Mosh Feu, Aug 28 '17 at 15:38
Instead of writing your own spreadsheet type functionality you may want to use a library like [Slickgrid](https://github.com/6pac/SlickGrid/wiki). — clav, Aug 28 '17 at 15:38
@MoshFeu Until now, I only can showed that modal & buttons, then how I can save it? — Yugo, Aug 28 '17 at 15:40
@clav I have 33 columns, and if I use Slickgrid, that interface is not great, so I want to solve it by modal :( — Yugo, Aug 28 '17 at 15:43
I don't know how your server works but you can handle the button click by send an ajax request to the server. I guess that you will want to send the `txtfname` value. — Mosh Feu, Aug 28 '17 at 15:44
I'm not sure due I can't see the final html (your code includes the php code) but it seems right. Try to `console.log` the `$("#txtfname").val()` and see if it right. — Mosh Feu, Aug 28 '17 at 15:49
@MoshFeu or you can make your own table, and explain how to save "123 in cell A2" by clicking button in modal — Yugo, Aug 28 '17 at 15:50
Good answer about: [`console.log`](https://stackoverflow.com/q/4539253/863110) — Mosh Feu, Aug 28 '17 at 15:54

How to edit data in specific row and column in table? (like Microsoft Excel)

0 Answers0