javascript - 在 codeigniter 中使用 javascript 通过 "id"加载数据以用于编辑表单

Question

我正在尝试使用 JavaScript 从表中传递数据来编辑表单。问题是我是 JavaScript 的新手。有人至少可以给我一个代码示例来帮助我吗？

我没有做AJAX，只是用JavaScript简单地加载数据

我的模型:

function edit($a)
        {
        $d = $this->db->get_where('crud', array('idcrud' => $a))->row();
        return $d;
    }

我的 Controller :

function edit()
    {
        $kd = $this->uri->segment(3);
        if ($kd == NULL) {
            redirect('Chome');
        }
        $dt = $this->Mcrud->edit($kd);
        $data['fn'] = $dt->firstname;
        $data['ln'] = $dt->lastname;
        $data['ag'] = $dt->age;
        $data['ad'] = $dt->address;
        $data['id'] = $kd;

        $this->load->view('Vhome', $data);
    }

这是 View “Vhome”中的按钮，我将其用作编辑按钮:

<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>

该按钮将调用 JavaScript 编辑函数，该函数应通过“idcrud”调用数据:

function edit(idcrud)
    {
      $('#form')[0].reset(); // reset form on modals
      $('#modal_form').modal('show'); // show bootstrap modal
      $('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title

      // I dont know what must i do here to call my data in table crud by "idcrud"


    }

这是数据传递到的表单:

<div class="modal fade" id="modal_form" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">Surat Keluar</h3>
      </div>
      <div class="modal-body form">
        <form action="Chome/edit" method="post" id="form" class="form-horizontal">
          <input type="hidden" value="" name="id"/> 
          <div class="form-body">
            <div class="form-group">
              <label for="fn" class="control-label col-md-3">First Name</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
              </div>
            </div>
            <div class="form-group">
              <label for="ln" class="control-label col-md-3">Last Name</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
              </div>
            </div>
            <div class="form-group">
              <label for="ag" class="control-label col-md-3">Age</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="ag" name="ag" placeholder="age">
              </div>
            </div>
            <div class="form-group">
              <label for="ad" class="control-label col-md-3">Address</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <input type="submit" name="mit" class="btn btn-primary" value="Submit">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
          </div>
        </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

有人能给我一个示例，说明我必须在 JavaScript 函数编辑中编写什么内容吗？

编辑:

这是我的观点的完整代码 Vhome.php

Answer 1

好的，这很简单。首先在此部分放置一些标识符:

foreach(...){  
...  
<tr id="idcrud<?php echo $row->idcrud;?>">
     <td class="idcrud"><?php echo $row->idcrud; ?></td>
     <td class="fn"><?php echo $row->firstname; ?></td>
     <td class="ln"><?php echo $row->lastname; ?></td>
     <td class="age"><?php echo $row->age; ?></td>
     <td class="addr"><?php echo $row->address; ?></td>
    ...
</tr>

在你的 edit() 中功能:

 function edit(idcrud)
    {
        $('#form')[0].reset(); // reset form on modals
        $('#modal_form').modal('show'); // show bootstrap modal
        $('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
        // MY EDIT:
        $("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
        $("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
        //and so on
    }

一些观察:在你的表单中 <input type="hidden" value="" name="id"/>还需要 id属性:<input id="id" type="hidden" value="" name="id"/> 。然后您可以使用以下命令更新它的值:$("input #id").val(idcrud);在 edit()功能。