如何使用js或php将充满类名的表保存为html文件在我的本地磁盘中？

Question

 ob_submit = document.getElementById("submit"); function formatted(){ var fobs = document.querySelectorAll("td input[type='text']"); for(var i=0;i<fobs.length;i++){ var myStr = fobs[i].value; var cell = fobs[i].parentNode; cell.removeChild(cell.childNodes[0]); cell.innerText = myStr; } } ob_submit.addEventListener("click",formatted); 

 table,tr,td{ border:1px solid black; text-align:center; } 

 <table> <tr> <td></td> <td>mon</td> <td>tue</td> <td>web</td> <td>thu</td> <td>fri</td> </tr> <tr> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> <tr> <td>2</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> <tr> <td>3</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> <tr> <td>4</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> <tr> <td colspan="3"> <input type="button" value="submit" id="submit"> </td> <td colspan="3"> <input type="button" value="saveas" id="saveas"> </td> </tr> </table> 

我用JavaScript代码创建了一个表，您可以在td每个输入中输入您的班级名称，当您在表中填写所有班级一周后单击提交，它将成为一周的班级时间表。

我想用JS写一个saveas函数，以将充满类名的表保存在/home/classSchedule.html ，也许JS无法在本地磁盘中写表，我该如何用PHP来完成这项工作？

这里的课程表，我需要一个saveas函数来保存它。 HTML文件比数据库更具可读性，可以将其保存在我的智能手机中并在其中读取。

Answer 1

在您的js中添加以下功能：

save_as = document.getElementById("saveas");

// this functions submits the html structure needed to be saved, via an ajax request
function generateHtmlFile(){

    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
            if (xmlhttp.status == 200) {
                alert(xmlhttp.responseText);
            }
            else if (xmlhttp.status == 400) {
                alert('There was an error 400');
            }
            else {
                alert('something else other than 200 was returned');
            }
        }
    };

    xmlhttp.open("POST", "generate_html_file.php", true);

    // the style, in case it's needed in the output html page
    var style = '<style>table,tr,td{border:1px solid black;text-align:center;}</style>';

    // get all table rows, except the one that contains the buttons
    var my_table_children = document.querySelectorAll('#my_table tr:not(.buttons)');

    var my_table_html = '<table>';

    // loop over table rows to filter them from white spaces & line breaks.
    for(var i = 0; i < my_table_children.length; i++){

        my_table_html += my_table_children[i].outerHTML.replace(/>\s+</g, "><")
    }

    my_table_html += '</table>';

    var data = new FormData();
    data.append('html',style + my_table_html);

    xmlhttp.send(data);
}
save_as.addEventListener("click",generateHtmlFile);

在表格元素中添加一个ID：

<table id="my_table">

向您的按钮容器行“”添加一个类：

<tr class="buttons">

因此，您的html应该如下所示：

<table id="my_table">
    <tr>
        <td></td>
        <td>mon</td>
        <td>tue</td>
        <td>web</td>
        <td>thu</td>
        <td>fri</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td>4</td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr class="buttons">
        <td colspan="3">
            <input type="button" value="submit" id="submit">
        </td>
        <td colspan="3">
            <input type="button" value="saveas"   id="saveas">
        </td>
    </tr>
</table>

然后，这是生成html文件的php脚本：

<?php

if(!empty($_POST['html']))
{
    $html_file = fopen("html_output.html", "w") or die("Unable to open file!");
    fwrite($html_file, $_POST['html']);
    fclose($html_file);

    echo "saved successfully";
}
else{

    echo "false";
}