删除表，但不删除表单和文件 jQuery

Remove table but not delete form and fileds with jQuery

本文关键字：删除 文件 jQuery 表单      更新时间：2023-09-26

我在表格中有一个HTML表单，我想完全摆脱该表，并希望在div中添加form和fields我想用jQuery做到这一点 任何机构都有办法做到这一点吗？这是我当前的代码。

<div class="widgetGuts shortcode">
    <form action="" method="post" id="frm-subscriptionFront" novalidate="">
        <table>
            <tbody>
                <tr class="required">
                    <th>
                        <label for="frm-email" class="required"></label>
                    </th>
                    <td>
                        <input type="text" name="email" id="frm-email" required="" value="" class="text form-control" placeholder="Enter your email address here">
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>        
                        <input type="submit" name="_submit" class="subscribeButton button" value="Subscribe">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="hidden" name="_form_" value="subscriptionFront">
            <!--[if IE]>
                <input type=IEbug disabled style="display:none">
            <![endif]-->
        </div>
    </form>
</div>

这是我想要的代码示例。

<div class="widgetGuts shortcode">
    <form action="" method="post" id="frm-subscriptionFront" novalidate="">
        <input type="text" name="email" id="frm-email" required="" value="" class="text form-control" placeholder="Enter your email address here">
        <input type="submit" name="_submit" class="subscribeButton button" value="Subscribe">
        <div>
            <input type="hidden" name="_form_" value="subscriptionFront">
            <!--[if IE]>
                <input type=IEbug disabled style="display:none">
            <![endif]-->
        </div>
    </form>
</div>

$('#frm-subscriptionFront table').replaceWith( $('td > *, th > *') );

http://jsfiddle.net/ptapy47b/1

编辑以澄清：它将用td和th元素的内容替换表格，因此表格中的所有元素都将以您的形式结束，而不仅仅是input元素。这是IMO的好主意。

使用 jquery 非常简单：

var form = $('#frm-subscriptionFront');
form.prepend(form.find('input'));
form.find('table').remove();
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="widgetGuts shortcode">
    <form action="" method="post" id="frm-subscriptionFront" novalidate="">
        <table>
            <tbody>
                <tr class="required">
                    <th>
                        <label for="frm-email" class="required"></label>
                    </th>
                    <td>
                        <input type="text" name="email" id="frm-email" required="" value="" class="text form-control" placeholder="Enter your email address here">
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="submit" name="_submit" class="subscribeButton button" value="Subscribe">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="hidden" name="_form_" value="subscriptionFront">
            <!--[if IE]>
                <input type=IEbug disabled style="display:none">
            <![endif]-->
        </div>
    </form>
</div>

相关文章：