使用 javascript 创建表,同时保留第一个单元格行
Creating a table using javascript while retaining the first cell row
我有一个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,名称,地址信息等。
我建议在你的表格中使用thead和tbody元素。MDN 链接
然后你只需要将数据添加到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>
尝试这样的事情:
while(table.rows.length > 1){
table.rows[1].parentElement.removeChild(table.rows[1]);
}
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- IE11中的第二个调用取消了第一个Fetch API调用
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- RxJS油门行为;立即获取第一个值
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 选择多个实例中的第一个
- 如何在调用下一个请求之前完成第一个Ajax Get请求
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 看起来第一个console.log是'It’不太对
- 与杜兰达尔合作的第一个JavaScript项目.尝试从第三方 API 获取数据
- 节点发布错误对象的第一个“属性”
- Javascript:表单验证getElementById仅返回第一个id元素
- 仅将 CSS 规则应用于
中的第一个 ,而不分配类/ID - JS在隐藏未定义的值后仅从数组中返回第一个id的值
- 高图表,检测点是否在堆栈中的第一个
- json结果显示第一个值
- 我的设备后退按钮工作不正常,它转到第一个html,但返回到第二个html