应用错误收集

格式化字符串以显示为HTML表格

时间：2017-11-11 09:51:20

标签： javascript jquery html

我在页面上显示了一个表（由div构建）。当用户单击一个按钮时，我希望在一个文本文件中复制该表，在单元格之间具有相等的间距，这样它就像一个具有不可见边框的表。

HTML

<div class="tbody first-bat">
    <div class="tr">
        <div class="td"><span class="for-comm">Alistair Cook</span></div>
        <div class="td"><span class="for-comm">hitwicket. K.Yadav</span></div>
        <div class="td text-center"><span class="for-comm">118 (26)</span></div>
        <div class="td text-center"><span class="for-comm">2/0</span></div>
        <div class="td text-center"><span class="for-comm">69.23</span></div>
    </div>
    <div class="tr">
        <div class="td"><span class="for-comm">Ben Stokes</span></div>
        <div class="td"><span class="for-comm">b. J.Bumrah</span></div>
        <div class="td text-center"><span class="for-comm">30 (25)</span></div>
        <div class="td text-center"><span class="for-comm">2/0</span></div>
        <div class="td text-center"><span class="for-comm">120.00</span></div>
    </div>
    <div class="tr">
        <div class="td"><span class="for-comm">Chris Woakes</span></div>
        <div class="td"><span class="for-comm"></span></div>
        <div class="td text-center"><span class="for-comm">13 (21)</span></div>
        <div class="td text-center"><span class="for-comm">0/0</span></div>
        <div class="td text-center"><span class="for-comm">61.90</span></div>
    </div>
    <div class="tr">
        <div class="td"><span class="for-comm">Eoin Morgan</span></div>
        <div class="td"><span class="for-comm"></span></div>
        <div class="td text-center"><span class="for-comm">66 (79)</span></div>
        <div class="td text-center"><span class="for-comm">3/0</span></div>
        <div class="td text-center"><span class="for-comm">83.54</span></div>
    </div>
</div>

的Javascript

var f_bat = jQuery('.first-bat > .tr');
var cell_width = 50;
var str = "";
for(var i = 0; i < f_bat.length; i++)
{
    var tr = jQuery(f_bat[i]);

    var td = tr.find('.td');
    for(var j = 0; j < td.length; j++)
    {
        var col = jQuery(td[j]);
        var txt = jQuery.trim(col.find('.for-comm').text());    
        var num_of_spaces = 0;
        if(txt && txt.length > 0)                                       
        {
            num_of_spaces = cell_width - txt.length;
        }
        else
        {
            num_of_spaces = cell_width;
        }
        str += txt;
        for(k = 1; k <= num_of_spaces; k++)
        {
            str += " ";
        }       
    }
    str += "\r\n";
}
// use str to show the text inside a textarea

输出

预期

1 个答案:

答案 0 :(得分：0)

请尝试将textarea元素拉伸到屏幕大小并实现以下代码，希望您能获得所需的结果：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <style id="style" type="text/css">
        p {
            background: green;
            height: 40px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.tr').each(function (element) {
                var result = new Array();
                var data = ($(this).text()).replace('"', '');
                result = data.split("\n");
                $.each(result, function (index) {
                    if (index != 0) {
                        var add_space = "";
                        var length = result[index];
                        if (length.length != 30) {
                            add_space = 30 - length.length;
                        }
                        $('#getval').append(result[index].trim());

                        for(var i=0;i<=add_space;i++ )
                        {
                            $('#getval').append(' ');
                        }
                    }
                });
                $('#getval').append("\n");
            });
        });
    </script>

</head>
<body>
    <div class="tbody first-bat">
        <div class="tr">
            <div class="td"><span class="for-comm">Alistair Cook</span></div>
            <div class="td"><span class="for-comm">hitwicket. K.Yadav</span></div>
            <div class="td text-center"><span class="for-comm">118 (26)</span></div>
            <div class="td text-center"><span class="for-comm">2/0</span></div>
            <div class="td text-center"><span class="for-comm">69.23</span></div>
        </div>
        <div class="tr">
            <div class="td"><span class="for-comm">Ben Stokes</span></div>
            <div class="td"><span class="for-comm">b. J.Bumrah</span></div>
            <div class="td text-center"><span class="for-comm">30 (25)</span></div>
            <div class="td text-center"><span class="for-comm">2/0</span></div>
            <div class="td text-center"><span class="for-comm">120.00</span></div>
        </div>
        <div class="tr">
            <div class="td"><span class="for-comm">Chris Woakes</span></div>
            <div class="td"><span class="for-comm"></span></div>
            <div class="td text-center"><span class="for-comm">13 (21)</span></div>
            <div class="td text-center"><span class="for-comm">0/0</span></div>
            <div class="td text-center"><span class="for-comm">61.90</span></div>
        </div>
        <div class="tr">
            <div class="td"><span class="for-comm">Eoin Morgan</span></div>
            <div class="td"><span class="for-comm"></span></div>
            <div class="td text-center"><span class="for-comm">66 (79)</span></div>
            <div class="td text-center"><span class="for-comm">3/0</span></div>
            <div class="td text-center"><span class="for-comm">83.54</span></div>
        </div>
    </div>
    <textarea id="getval"></textarea>
</body>
</html>