javascript - 使用 javascript 创建表格，同时保留第一个单元格行

Question

我有一个 html 和 javascript 程序，我想在新的数据队列中将表格清除为空，同时保留包含表格内容名称的第一个单元格行。我怎样才能使它成为可能 这是我的

<script>
    function showAdTool(option){
        var readData = document.getElementById('readData');
        var addData = document.getElementById('addData');
        var editData = document.getElementById('editData');
        var deleteData = document.getElementById('deleteData');
        if(option == '0'){
            readData.style.display = 'inline';
            addData.style.display = 'none';
            editData.style.display = 'none';
            deleteData.style.display = 'none';
        }else if (option == '1'){
            readData.style.display = 'none';
            addData.style.display = 'inline';
            editData.style.display = 'none';
            deleteData.style.display = 'none';
        }else if (option == '2'){
            readData.style.display = 'none';
            addData.style.display = 'none';
            editData.style.display = 'inline';
            deleteData.style.display = 'none';
        }else{
            readData.style.display = 'none';
            addData.style.display = 'none';
            editData.style.display = 'none';
            deleteData.style.display = 'inline';
        }
    }

    function dbOutputSelect(){
        var option = document.getElementById('dbselector');
        var dbvalue = document.getElementById('dbvalue');
        if (option.value == '0'){
            dbvalue.style.display = 'none';
        }
        else if (option.value == '1'){
            dbvalue.style.display = 'inline';
        }else if (option.value == '2'){
            dbvalue.style.display = 'inline';
        }else if (option.value == '3'){
            dbvalue.style.display = 'inline';
        }else if (option.value == '4'){
            dbvalue.style.display = 'inline';
        }else{
            dbvalue.style.display = 'inline';
        }
    }

    function ajaxRequest(){
        clearTables();
        var option = document.getElementById('dbselector').value;
        var content = document.getElementById('contentholder').value;
        var date = new Date();
        var request= (date.getMonth()+1) + (date.getFullYear()) + (date.getHours()) + (date.getMinutes()) + (date.getSeconds()) + parseInt(((Math.random()*1000000)));
        var url = './designIncludes/phpLogicIncludes/showdbcontent.php?option='+ option + '&content=' + content + '&request=' + request ;
        downloadUrl(url,function(data){
            var xml = parseXml(data);
            var markerNodes = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markerNodes.length; i++){
                var name = markerNodes[i].getAttribute("name");
                var address = markerNodes[i].getAttribute("address");
                var info = markerNodes[i].getAttribute("info");
                var budget = markerNodes[i].getAttribute("budget");
                var tts = markerNodes[i].getAttribute("tts");
                var type = markerNodes[i].getAttribute("type");
                createTables(i,name,address,info,budget,tts,type);
            }
        });     
    }

    function clearTables(){

    }

    function createTables(i,name,address,info,budget,tts,type){
        var table = document.getElementById('tableDataContent');
        var row = table.insertRow(-1);
        var idCell = row.insertCell(0);
        var nameCell = row.insertCell(1);
        var addCell = row.insertCell(2);
        var infoCell = row.insertCell(3);
        var budgetCell = row.insertCell(4);
        var ttsCell = row.insertCell(5);
        var typeCell = row.insertCell(6);
        idCell.innerHTML = i;
        nameCell.innerHTML = name;
        addCell.innerHTML = address;
        infoCell.innerHTML = info;
        budgetCell.innerHTML = budget;
        ttsCell.innerHTML = tts;
        typeCell.innerHTML = type;
    }

    function downloadUrl(url, callback){
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback (request.responseText, request.status);
            }
        };

        request.open('GET', url, true);
        request.send(null);
    }

    function parseXml(str) {
        if (window.ActiveXObject){
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(str);
            return doc;
        }else if (window.DOMParser){
            return (new DOMParser).parseFromString(str, 'text/xml');
        }
    }

    function doNothing() {}
</script>

这是我的

<!DOCTYPE html>
<html lang="en">
    <head>
    <body>


<div id="MainContent">
</div>
<hr>
<div id="adminPanel">
    <p>Administrator Tools:</p>
    <p><a href="#" onclick="showAdTool('0');">Read Database Content</a> | <a href="#" onclick="showAdTool('1');">Add Data</a> | <a href="#" onclick="showAdTool('2');">Edit Data</a> | <a href="#" onclick="showAdTool('3');">Delete Data</a></p>

    <div id="adminPanelContent">
        <div id="readData">
            <form>
                Show Database data by: <select id="dbselector" onchange = "dbOutputSelect();">
                                            <option value = '0'>All Data</option>
                                            <option value = '1'>By Name</option>
                                            <option value = '2'>By Address</option>
                                            <option value = '3'>Budget</option>
                                            <option value = '4'>Time to spend</option>
                                            <option value = '5'>Marker Type</option>
                                       </select>
                <p id="dbvalue" style="display:none;"> Content: <input type="text" size="16" id="contentholder"></p>
                <input type="button" value="Submit" onclick="ajaxRequest();">
            </form>
            <div id="tableData">
                <table id="tableDataContent" border="1" widht="100%">
                    <tr><td>Id No.</td><td>Name</td><td>Address</td><td>Information</td><td>Budget</td><td>Time to Spend</td><td>Site Type</td></tr>
                </table>
            </div>
        </div>
        <div id="addData">Mysel</div>
        <div id="editData">Myse</div>
        <div id="deleteData">Mys</div>
        </div>
        </div>
    </div>


</div>

    </body>
</html>

在我的表格上，我想在 HTML 页面中保留原始表格内容，例如 ID、名称、地址信息等。

Answer 1

我建议在表格中使用 thead 和 tbody 元素。 MDN link

那么你只需要将数据添加到tbody中，并清除tbody中的数据

<table id="tableDataContent">
    <thead>
        <tr>
            <th>Id No.</th>
            <th>Name</th>
            <th>Address</th>
            <th>Information</th>
            <th>Budget</th>
            <th>Time to Spend</th>
            <th>Site Type</th>
        </tr>
    </thead>
    <tbody>
        <!-- Table Data -->
    </tbody>
</table>