Question

我正在尝试使用JavaScript从表中传递数据来编辑表单。问题是我是JavaScript的全新手。有人可以通过给我一个代码应该是什么的例子来帮助我吗？

我不是在做AJAX，只是使用JavaScript加载数据

我的模特：

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

我的控制器：

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);
    }

这是视图中的按钮，＆＃34; Vhome＆＃34;，我用作编辑按钮：

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

该按钮将调用JavaScript编辑功能，该功能应通过＆＃34; idcrud＆＃34; ：

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()更新其值。

通过＆＃34; id＆＃34;加载数据用于在codeigniter中使用javascript编辑表单

1 个答案: