Question

我有PHP生成的div，它有来自数据库的一些数据。他们每个人都有唯一的身份证。我需要从选定的div中获取数据（我有这个编码）并通过它的ID它应该将数据从这个div放到模态中。

模态：

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="form-horizontal" id="edit-form">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
            </div>
          </div>
          <div class="form-group">
            <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
            </div>
          </div>
          <div class="form-group">
            <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
            </div>
          </div>
          <div class="form-group">
            <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
            </div>
          </div>
          <div class="form-group">
            <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
            </div>
          </div>
          <div class="form-group">
            <label for="b" class="col-sm-2 control-label">Płeć</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
            </div>
          </div>
          <div class="form-group">
            <label for="d" class="col-sm-2 control-label">Typ Konta</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
          <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
        </div>
      </form>
    </div>
  </div>
</div>

调用模态输出的函数：

function edit(){
    $('#edit-modal').modal('show');
}

其中一个div：

<div class="panel panel-kol" mid="4"><div class="panel-body profile white">
  <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
  <div class="profile-data">
    <div class="profile-data-name" style="font-weight: bold;">Krzysztof Marczewski</div>
    <div class="profile-data-title">Recepcjonista</div>
  </div>
</div>                                
<div class="panel-body">                                    
  <div class="contact-info text-center" style="margin-top: -20px;">
    <p><small>Telefon komórkowy</small><br>997998999</p>
    <p><small>Od - Do</small></p>
    <div class="row">
      <div class="col-md-2"></div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" value="00:00:12">
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" value="00:00:19">
          </div>
        </div>
        <div class="col-md-2"></div>
      </div>            
    </div>
  </div>
</div>

“mid”是分配给PHP生成的每个div的唯一ID。我只需要将已生成的div中的数据转换为模态

SS：

ss v2。

Answer 1

要将模态中的输入分配给div中的数据，我建议为每个节点设置一个data-*属性，并提供我们需要的信息。例如：

<div class="profile-data-name" style="font-weight: bold;">
  <span data-imie="firstname">Krzysztof</span> 
  <span data-nazwisko="lastname">Marczewski</span>

它应与模态的相关输入的name属性相等。

然后，在edit()函数中，您应该遍历所有输入并使用关联数据设置它们的值：

function edit(mid){
  var inputs = $('#edit-modal').find('.modal-body').find('input);
  inputs.forEach(function(input) {
    $(input)
      .val($("div[mid='" + mid + "']")
      .find('[data-name="' + $(input).attr('name') + '"]).text())
  })
  $('#edit-modal').modal('show');
}

Answer 2

如果我理解正确的话，请注意这一点......

＆＃13;

$(document).ready(function(){
function edit(){
            $('#edit-modal').modal('show');
        }
function insertData(mid){
  var panel = $('.panel[data-mid="'+mid+'"]'),
      fullName = panel.find('.full-name').text(),
      arrName = fullName.split(" "),
      modal = $('#edit-modal');
				
  modal.find('#add-firstname').val(arrName[0]);
  modal.find('#add-nazwisko').val(arrName[1]);
  modal.find('#add-pesel').val(panel.find('.phone').text());
  modal.find('#g').val(panel.find('.start-time').val());
  modal.find('#t').val(panel.find('.end-time').val());
}
				
				edit();
				insertData(4);
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class="form-horizontal" id="edit-form">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="add-modal-label"><i class="fa fa-user-md"></i> Edytuj Pracownika</h4>
              </div>
              <div class="modal-body">
                    <div class="form-group">
                        <label for="add-firstname" class="col-sm-2 control-label">Imie</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-firstname" name="imie" placeholder="Imie" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-nazwisko" class="col-sm-2 control-label">Nazwisko</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-nazwisko" name="nazwisko" placeholder="Nazwisko" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-pesel" class="col-sm-2 control-label">Telefon</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add-pesel" name="telefon" placeholder="Telefon" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="g" class="col-sm-2 control-label">Godzina rozpoczęcia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="g" name="od" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="t" class="col-sm-2 control-label">Godzina zakończenia</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="t" name="do" placeholder="00:00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="b" class="col-sm-2 control-label">Płeć</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="b" name="plec" placeholder="Mężczyzna" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="d" class="col-sm-2 control-label">Typ Konta</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="d" name="typ" placeholder="Lekarz" required>
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                <button type="submit" class="btn btn-success"><i class="fa fa-user-edit"></i> Edytuj Pracownika</button>
              </div>
            </form>
        </div>
      </div>
    </div>
		
		<div class="panel panel-kol" data-mid="4"><div class="panel-body profile white">
                                <div class="profile-image"><img src="../assets/images/users/rec.svg" alt="Osoba"></div>
                                <div class="profile-data">
                                    <div class="profile-data-name full-name" style="font-weight: bold;">Krzysztof Marczewski</div>

                                    <div class="profile-data-title">Recepcjonista</div>
                               </div>
                            </div>                                
                            <div class="panel-body">                                    
                                <div class="contact-info text-center" style="margin-top: -20px;">
																<p><small>Telefon komórkowy</small><br><span class="phone">997998999</span></p>
                                    <p><small>Od - Do</small></p>
                                    <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control start-time" value="00:00:12">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control end-time" value="00:00:19">
                                        </div>
                                    </div>
                                     <div class="col-md-2"></div>
                                </div>            
                        </div>
                    </div>
                </div>

＆＃13;

Answer 3

如果我理解错误是什么，请原谅我。试试var divValue = $( "div[mid='4']" ).val()并将其推送到模态:) Here的aQuery jQuery文档等于select。

通过jQuery

3 个答案: