javascript - 将 html 数据传递到 Bootstrap 模式内的表单

Question

我有一个简单的脚本，它从链接收集数据并将其传递到 Bootstrap 模式内的表单:

来自链接

 <a id="editDetails" title="Edit Details"  href='#myModal2' data-id='<?=$company['id'];?>' class='btn btn-default btn-sm open-EditCompanyDialog'>

到模态

<input id="companyid" name="companyid" type="hidden" class="formBlock btn btn-success"  value=""/>

脚本

<script>
$(document).on("click", ".open-EditCompanyDialog", function (e) {

    e.preventDefault();

    var _self = $(this);

    var compid = _self.data('id');
    $("#companyid").val(compid);


    $(_self.attr('href')).modal('show');
});
</script>

这在获取 id 时效果很好。但是如果我想传递所有其他信息怎么办？有没有办法使用 html5 数据属性来做到这一点？

标记

 <?php while($company=mysqli_fetch_array($result)){ ?>
  <tr>
      <td data-name="<?=$company['title'];?>" data-th="Name"><?=$company['title'];?></td>
    <td   data-description="<?=$company['description'];?>" data-th="Description"><?=$company['description'];?></td>
    <td  data-type="<?=$company['type'];?>" data-th="Type"><?=$company['type'];?></td>
    <td data-address="<?=$company['address'];?>" data-th="Address"><?=$company['address'];?></td>
    <td data-country="<?=$company['country'];?>" data-th="Country"><?=$company['country'];?></td>
    <td data-timezone="<?=$company['timezone'];?>" data-th="Time Zone"><?=$company['timezone'];?></td>
    <td data-th="ID" sorttable_customkey="2">
       <a id="editDetails" title="Edit Details"  href='#myModal2' data-id='<?=$company['id'];?>' class='btn btn-default btn-sm open-EditCompanyDialog'>
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>

    </td>
  </tr>
  <?php };?>

编辑

$(document).on("click", ".open-EditCompanyDialog", function (e) {
    e.preventDefault();
    var _self = $(this);

    var _parent=$(_self.closest('tr')); //get its parent with closest
    var compid = _self.data('id');
    var compTitle=_parent.find("td[data-th='title']").attr('data-name');
    var compDesc=_parent.find("td[data-th='description']").attr('data-description');
    var compType=_parent.find("td[data-th='type']").attr('data-type');
    var compAdd=_parent.find("td[data-th='address']").attr('data-address');
    var compZone=_parent.find("td[data-th='timezone']").attr('data-timezone');
    var compCountry=_parent.find("td[data-th='country']").attr('data-country');

    $("#companyid").val(compid);
    $("#compname").val(compTitle);
    $("#description").val(compDesc);
    $("#type").val(compType);
    $("#address").val(compAdd);
    $("#timezone").val(compZone);
    $("#country").val(compCountry);
    $(_self.attr('href')).modal('show');
});

使用 FORM INSIDE 编辑完整模态

<form id="editCompany" method="POST" action="core/query.php">
     <input id='compname'name='title' value='' type='text' placeholder="Name...">
     <input id="companyid" name="companyid" type="hidden"value=""/>

     <select name='type'>
     <option> Type...</option>
     <option id='type' value="" selected></option>
     </select>

     <select name='description'>
     <option  value="">Description...</option>
     <option id='description' value="" selected></option>
     </select> 

     <input id='address' name='address' value='' type='text' placeholder="Address">

     <select name="country" value='' type='text' placeholder="Country">
     <option value="">Country...</option>
     <option  id='country' value="" selected></option>
     </select>

     <select name="timezone">
     <option value=''>Timezone...</option>
     <option  id='timezone' value="" selected></option>
     </select>

     <input name="editCompany" id="submit" type="submit" value="Modify Data"/>

</form>

Answer 1

您可以访问以下其他信息:

var com_type = _self.parent().parent().find('[data-type]').html()
var com_name = _self.parent().parent().find('[data-name]').html()
....

希望对您有所帮助!