0

すべての列または行のデータを作成、削除、および編集できる唯一の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>
4

1 に答える 1

0

下：

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

変数getElementByIdの値の代わりに文字列リテラル「mytable」を渡しています。mytableリテラルの代わりに変数名を使用します。

次に、この行で：

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

DOM は大文字と小文字を区別します。したがって、次のように定義したテーブルから行を削除する場合:

<table id="myTable"

渡す値がdeleteRowtable 要素の id 要素と同じであることを確認する必要があります。

于 2013-10-05T14:33:24.737 に答える