我想用 onl html css 和 javascript 制作一个表格，我可以在其中创建、删除数据和编辑每一列或每一行的数据。但我现在被困在其中将近 4 天了。我是编程初学者，请帮助我学习 javascript 和编程，我们将不胜感激。谢谢!
<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function deleteRow(mytable) {
try {
var table = document.getElementById('mytable');
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleterow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function insert()
{
var table=document.getElementById("myTable");
var row=table.insertRow(1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtauthor').value;
cell3.innerHTML=document.getElementById('txtcdate').value;
cell4.innerHTML=document.getElementById('txtcontent').value;
}
function editbtn(){
var buttonedit= document.getElementById('form2');
buttonedit.style.visibility="visible";
}
</script>
</head>
<body>
HTML
<div id="main" style="width:800px; height:600px; background-color:#CCCCCC;">
<table id="myTable" border="1" style="width:600px; height:100px; margin-left:150px;">
<thead style="background-color:#00FFFF;">
<tr>
<th colspan="2" style="width:200px;">Name</th>
<th width="200" style="width:200px;">Author</th>
<th width="200" style="width:200px;">Creation Date</th>
</thead>
<tbody style="background-color:#BFDBDF; text-align:center;">
<tr>
<td width="31" id="boxtd" ><input type="checkbox" id="tickbox1" name="tickbox1" / ></td>
<td width="163" >cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td><form name="formbox" id="formbox" ><input type="checkbox" id="tickbox2" name="tickbox2" onChange="checkbox()"/ ></form></td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<br>
<button type="button" onClick="insert()">Enter a New Blog</button>
<button type="button" onClick="deleteRow('mytable')">delete</button>
<button type="button" onClick="editbtn()">Edit</button>
</div>
<div id="main" style="width:500px; height:600px; background-color:#CCCCCC; position:absolute; left: 206px; top: 625px;">
<form name="create" style="width:100px;">
Name: <input type="text" id="txtname" /><br/>
Author: <input type="text" id="txtauthor" name="txtauthor" /><br/>
Date: <input type="text" id="txtcdate" name="txtcdate" /><br/>
Content: <input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />
</form>
</div>
</body>
</html>
最佳答案
下面:
function deleteRow(mytable) {
try {
var table = document.getElementById('mytable');
var rowCount = table.rows.length;
您将字符串文字“mytable”传递给 getElementById 而不是 mytable 变量的值。使用变量名而不是文字。
然后在这一行:
<button type="button" onClick="deleteRow('mytable')">delete</button>
DOM 区分大小写。所以如果你想从你定义的表中删除行:
<table id="myTable"
您需要确保传递给 deleteRow 的值与表元素上的 id 元素相同。
关于javascript - 仅用 javascript css 和 html 编写的可编辑表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19198813/