Question

我的主index.html页面中有很多类似于以下内容的用户记录：

double answer = -1,temp;
for(int i=0;i<n;i++){                                       
    if((temp = array[i]) != (sqrt(array[i])*sqrt(array[i]))){
        if(temp > answer){
            answer = temp;
        }
    }
}

这当然是在一张桌子上。现在，我想做的就是让这个充满活力。每次更新用户记录时，我都无法修改原始的index.html页面。所以我的问题是，我如何从文件中读取html并将记录插入原始index.html文件中的表中的文件中？

我的index.html文件有一个代码，允许您在搜索框中键入用户名，并弹出该特定用户的记录。首选解决方案将使用此已存在的代码，以便在html从外部文件的记录中读取后，管理员仍然可以搜索用户名并弹出用户名，就像它仍然嵌入在原始索引中一样.html文件。

我试图自己做，但没有成功：

<tr>
    <td>Angelica Ramos</td>
    <td>Chief Executive Officer (CEO)</td>
    <td>London</td>
    <td>47</td>
    <td>2009/10/09</td>
    <td>$1,200,000</td>
    <td>504</td>
</tr>

通过搜索框搜索时，记录未显示。

Answer 1

以下适用于CSV文件。在进行程序化之前，您可能需要do this。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>StackOverflow</title>
</head>
<body>
    <input type="text" id="searchvalue"><button onclick="search()">Search</button>
    <table id="userslist"></table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var data = [],keys,values=[],delimeter=";";
        function getData(onsuccess)
        {
            $.ajax({
                url:"/Users/Default/Downloads/test.csv",
                type:"GET",
                datatype:"csv",
                success:onsuccess
            });
        }

        function parseData()
        {
            keys = data.splice(0,1)[0].split(delimeter);
            values = [];
            for(var i=0,n=data.length;i<n;i++)
            {
                values.push(data[i].split(delimeter));
            }
        }

        function getTableRow(data,isheading)
        {
            var rowtype = isheading ? 'th' : 'td';
            var rowhtml = '<tr>';
            for(var key in data)
            {
                rowhtml+='<'+rowtype+'>'+data[key]+'</'+rowtype+'>';
            }
            return (rowhtml+'</tr>');
        }

        function populateData()
        {
            var htmldata = "";
            htmldata = getTableRow(keys,true);
            for(var index in values)
            {
                htmldata+=getTableRow(values[index]);
            }

            document.getElementById("userslist").innerHTML = htmldata;
        }

        function search()
        {
            var data = [], keys = [], values = [];;
            function addRecord()
            {
                for(var i=0,n=data.length;i<n;i++)
                {
                    var value = data[i].split(delimeter);
                    if(value[0].toLowerCase().includes(searchvalue.toLowerCase()))
                    {
                        values.push(value);
                    }
                }
                if(values.length)
                {
                    for(var index in values)
                    {
                        table.insertAdjacentHTML("beforeend",getTableRow(values[index]));
                    }
                }
                else
                {
                    alert("No records found.")
                }

            }
            var searchvalue = document.getElementById("searchvalue").value;
            var table = document.getElementById("userslist");
            getData(function(response){
                data = response.split(/\n/);
                addRecord();
            });
        }

        getData(function(response){ data = response.split(/\n/); parseData(); populateData();});
    </script>
</body>
</html>

从平面文件将数据插入到html表中

1 个答案: