Question

我想用onl html css和javascript创建一个表格，我可以在其中创建，删除数据并编辑每个列或行的数据..但我现在已经陷入其中近4天了。我是编程的初学者，请帮助我学习javascript和编程，因为它将非常感激。 TNX！

<!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>

Answer 1

下面：

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 css和html编写的可编辑表

1 个答案: