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

Question

I have a table (built with div ) displayed on page. 我在页面上显示了一个表（使用div构建）。 When a user clicks a button, I would want to replicate that table in a text file with equal spacing between cells so that it resembles a table with invisible borders. 当用户单击按钮时，我想将该表复制到文本文件中，单元格之间的间距相等，以使其类似于带有不可见边框的表。

HTML 的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 Java脚本

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

Output 输出量

Expected 预期

Answer 1

Please try to strech your textarea element to the screen size and implement the below code and hopefully you'll get your desired result: 请尝试将您的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>

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

问题描述

HTML 的HTML

Javascript Java脚本

Output 输出量

Expected 预期

1 个解决方案

解决方案1
0 2017-11-11 11:10:12

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

问题描述

HTML 的HTML

Javascript Java脚本

Output 输出量

Expected 预期

1 个解决方案

解决方案1 0 2017-11-11 11:10:12

解决方案1
0 2017-11-11 11:10:12