Question

我尝试将html导出为pdf，但我无法导出表单输入字段，因此我需要将form标签替换为其值。

我有一个表单，其中包含多个标签和表单输入，如文本，复选框，单选按钮，选择等。

我想用其value属性替换该输入标记，但我不知道如何操作..

即

<div id="Content">
    Name  : <input type="text" value="abc"/>
    Hobby : <input type="checkbox" value="abc" checked/>
            <input type="checkbox" value="abc"/>
    City  :<select class="form-control" id="EmployeeId" name="EmployeeId">
             <option value="">--Select One--</option>
             <option value="2454">Abc</option>
             <option value="2454">Def</option>
             <option value="2454" selected>Gif</option>
           </select>
</div>

如果我有这个div的html以上，那么我想输出

Name : abc
Hobby : abc
City  : Gif

Answer 1

使用.replaceWith，将匹配元素集中的每个元素替换为提供的新内容

:input选择所有input，textarea，select和button元素。

要在另一个element中显示输出，请克隆target元素并对克隆的（clone()）元素进行操作。

$('#preview').on('click', function() {
  var temp = $("#Content").clone(true);
  $("#target").append(temp);
  temp.find(":input").each(function() {
    $(this).replaceWith(this.value);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Content">
  Name :
  <input type="text" value="abc" />
  <br>Hobby :
  <input type="checkbox" value="abc" checked/>
  <input type="checkbox" value="abc" />
  <br>City :
  <select class="form-control" id="EmployeeId" name="EmployeeId">
    <option value="">--Select One--</option>
    <option value="2454">Abc</option>
    <option value="2454">Def</option>
    <option value="2454" selected>Gif</option>
  </select>
</div>
<br>
<button id='preview'>Show Preview</button>
<h5>Target Elem</h5>
<div id='target'></div>

修改：要应用check-box的条件，请使用ternary，如下所示：$(this).replaceWith(this.type == 'checkbox' ? (this.checked ? this.value : "") : this.value);

Answer 2

循环遍历所有元素，然后使用.after（），将新元素放在特定输入之后。然后删除当前的输入元素。

<ul class="grid effect-2" id="grid">

    <?php
    if( have_rows('gallery') ):
        while ( have_rows('gallery') ) : the_row(); ?>

            <?php
            $image_location = get_sub_field('image_location');

            if (empty($_GET['filter'])) {
                $image_filter = $image_location == 'Nottingham' || $image_location == 'Corby';
            } else {
                $image_filter = $image_location == $_GET['filter'];
            }

            ?>

            <?php 
            if($image_filter) {
            ?>

                <li><a class="fancybox" rel="gallery" href="<?php the_sub_field('image'); ?>" title="<?php echo $image_location . ' @ Planet Bounce ' . get_sub_field('image_location'); ?>"><img src="<?php the_sub_field('image'); ?>" alt="<?php echo get_sub_field('image_caption') . ' @ Planet Bounce ' . $image_location; ?>" /></a></li>

            <?php } ?>

        <?php endwhile;
    else : endif;
    ?>

</ul>

Fiddle

将value中的每个输入替换为其value属性

2 个答案: