0

我想用只有 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>
4

1 回答 1

0

Below:

function deleteRow(mytable) {
    try {
        var table = document.getElementById('mytable');
        var rowCount = table.rows.length;

You're passing the string literal "mytable" to getElementById instead of the value of the mytable variable. Use the variable name instead of the literal.

Then in this line:

<button type="button" onClick="deleteRow('mytable')">delete</button>

The DOM is case sensitive. So if you want to delete the row from a table that you define like this:

<table id="myTable"

You'll want to make sure the value you pass to deleteRow is the same as the id element on your table element.

于 2013-10-05T14:33:24.737 回答