Question

我有几种需要打印机友好的表格。我试图用最简单的方法来遍历每个textarea，获取值并将其放在一个span标签下面，类名为“forprint”。到目前为止，我只想出了如何将值复制到容器中，但我无法弄清楚如何将每个值复制到相应的容器中。请帮忙！这是我现在正在做的一个例子：

<div class="fullWidth">
    <span class="label">Personalized Menus: </span><span class="forscreen">@Html.TextAreaFor(a => a.PersonalizedMenues, AdminOnlyAttribute(new Dictionary<string, object>() { { "class", "k-textbox" }, { "rows", "4" } }))</span>
    <span class="forprint"></span>
    <br /><br />
</div>

<div class="fullWidth">
    <span class="label">Food Labels: </span><span class="forscreen">@Html.TextAreaFor(a => a.FoodLabels, AdminOnlyAttribute(new Dictionary<string, object>() { { "class", "k-textbox" }, { "rows", "4" } }))</span>
    <span class="forprint"></span>
    <br /><br />
</div>

<div class="fullWidth">
    <span class="label">Table/Seating Signs: </span><span class="forscreen">@Html.TextAreaFor(a => a.TableSigns, AdminOnlyAttribute(new Dictionary<string, object>() { { "class", "k-textbox" }, { "rows", "4" } }))</span>
    <span class="forprint"></span>
        <br /><br />
</div>

<script>
    $('textarea').blur(function () {
        var copyText = $(this).val().replace(/\n/g, '<br/>');
        $(".forprint").html(copyText);
    });
</script>

<style>
.forprint {
    display: none;
}

@media print {
    .forprint {
        display: block;
        height: auto;
    }

    .forscreen {
        display: none;
    }
}
</style>

非常感谢任何帮助！

另外值得注意的是，并非每个表格上的所有textareas都是这样的顺序所以我不能只抓住所有这些并将它们放在一个容器中。

Answer 1

您需要获取父级，然后获取其中的forprint。

$('textarea').blur(function () {
    var copyText = $(this).val().replace(/\n/g, '<br/>'),
        parent = $(this).parents(".fullWidth");
    $(parent).find(".forprint").html(copyText);
});

这是一个有效的jsfiddle http://jsfiddle.net/weEX8/

jquery循环遍历每个textarea并复制到相应的span类

1 个答案: