Редактируемая таблица написана только на JavaScript и HTML

Question

Редактируемая таблица написана только на JavaScript и HTML

0

Я хочу создать таблицу с html 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>

Syed Ali Ahmed 05 окт. 2013, в 16:36

Источник

3

В чем проблема / вопрос? Вы застряли с какими-либо ошибками? У удаления будет ошибка, потому что идентификатор таблицы - myTable а не mytable .
Harry 05 окт. 2013, в 14:25
0

@ Гарри мой код не удаляет и не редактирует данные. Я просто хотел знать логику или код, чтобы я мог удалить любую строку с помощью флажка или отредактировать таблицу.
Syed Ali Ahmed 05 окт. 2013, в 14:31
0

Кажется, есть много вопросов для решения. Например, в Edit вы ссылаетесь на элемент с id как form2 но в коде такой элемент не найден. Также код, который вы разместили, кажется частичным. Событие, которое вызывается при смене флажка, отсутствует.
Harry 05 окт. 2013, в 14:38

Показать ещё 1 комментарий

Теги:

javascript

html

css

1 ответ

Ещё вопросы

В чем проблема / вопрос? Вы застряли с какими-либо ошибками? У удаления будет ошибка, потому что идентификатор таблицы - myTable а не mytable .
@ Гарри мой код не удаляет и не редактирует данные. Я просто хотел знать логику или код, чтобы я мог удалить любую строку с помощью флажка или отредактировать таблицу.
Кажется, есть много вопросов для решения. Например, в Edit вы ссылаетесь на элемент с id как form2 но в коде такой элемент не найден. Также код, который вы разместили, кажется частичным. Событие, которое вызывается при смене флажка, отсутствует.

Ryan Norris · Accepted Answer · 2013-10-05T12-22-00.000Z

Ниже:

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 вашего элемента таблицы.