JQuery: 插入大块或者多行html代码,Multi-line HTML insert using JQuery

Should be simple, right?

All you want to do is add multiple lines of HTML using JQuery without having to squish everything into one line. So you try something like this:

$("body").append("
<tr>
    <td class="text-center">
        AprOfficeA
    </td>
    <td class="text-center">
        3-12-14 12:12
    </td>
    <td class="text-center">
        19384
    </td>
    <td class="text-center">
        3-12-14 to 3-29-14
    </td>
    <td class="text-center">
        <input type="checkbox" id="checkbox-1">
    </td>
    <td style="width: 15%;" class="text-center">
        <a href="#" class="table-link">
            <span class="fa-stack">
                <i class="fa fa-square fa-stack-2x"></i>
                <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
            </span>
        </a>
        <a href="#" class="table-link">
            <span class="fa-stack">
                <i class="fa fa-square fa-stack-2x"></i>
                <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
            </span>
        </a>
        <a href="#" class="table-link danger">
            <span class="fa-stack">
                <i class="fa fa-square fa-stack-2x"></i>
                <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </td>
</tr>
")

这样肯定是不行的!

The problem of course is that you need to add a “/” to the end of every line and change all attribute double-quotes to single-quotes or else you’ll see jack. And doing all that will make you want to kill yourself.

So what to do?

Here’s a sweet solution: 解决方法:

<script id="batchInsert">
    <tr>
        <td class="text-center">
            AprOfficeA
        </td>
        <td class="text-center">
            3-12-14 12:12
        </td>
        <td class="text-center">
            19384
        </td>
        <td class="text-center">
            3-12-14 to 3-29-14
        </td>
        <td class="text-center">
            <input type="checkbox" id="checkbox-1">
        </td>
        <td style="width: 15%;" class="text-center">
            <a href="#" class="table-link">
                <span class="fa-stack">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            <a href="#" class="table-link">
                <span class="fa-stack">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                </span>
            </a>
            <a href="#" class="table-link danger">
                <span class="fa-stack">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>
                </span>
            </a>
        </td>
    </tr>
</script>

<script>
    $('#body').append( $("#batchInsert").html() );
</script>

 

 

本文:JQuery: 插入大块或者多行html代码,Multi-line HTML insert using JQuery

Leave a Reply