Относительно нажатия на ячейки таблицы - PullRequest
Новая
       3

Относительно нажатия на ячейки таблицы

0 голосов
/ 11 декабря 2010

У меня есть таблица, и я ввожу значения динамически, так как я ввел 3 значения и 2 изображения, одно для удаления и одно для редактирования в строке, так что теперь, если я нажимаю на изображение для удаления, как я могу написать код для удаления? Я попытался с помощью идентификатора строки, который добавляется динамически. Вот мой код .. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
 <head>
 <title>Display rows dynamically </title>
 <script type="text/javascript">
 var sname=new Array();
 var sage=new Array();
 var sclass=new Array();
 var j=1;
 var cellref;
 var idnum=1;
 var prev=0;
 var i=0;
 var count=1;
function goSave()
{
sname.push(document.f1.tname.value);
sage.push(document.f1.tage.value);
sclass.push(document.f1.tclass.value);
document.getElementsByTagName('input')[0].value="";
document.getElementsByTagName('input')[1].value="";
document.getElementsByTagName('input')[2].value="";
document.f1.tname.focus();
}
function show()
{
if(sname.length==0)
{
alert("There are no items to display..");
return ;
}
if(sname.length!=0)
{
 document.getElementById('mytable').style.visibility ='visible' ;
 var table=document.getElementById('mytable');

 var rowcount=table.rows.length;
 for (var rnum=0;rnum<sname.length;rnum++ )
 {
 var row=table.insertRow(i+1);
 i++;
 row.id=idnum;
 idnum++;
 var cell1=row.insertCell(0);
 var cell2=row.insertCell(1);
 var cell3=row.insertCell(2);
 var cell4=row.insertCell(3);
 var cell5=row.insertCell(4);
 //alert(table.rows.length);

 cell1.innerHTML=sname[rnum];
 cell2.innerHTML=sage[rnum];
 cell3.innerHTML=sclass[rnum];
 var elm1=document.createElement('img');
 elm1.src="icondelete.gif";
 elm1.title="delete this";
 elm1.style.cursor="hand";
 cell4.appendChild(elm1);
 //cell4.onclick=function(){ alert("Clicked"); }
 row.onclick=function(){ 
          rowdel(this.id);
          }; 

 var elm2=document.createElement('img');
 elm2.src="edit.gif";
 elm2.title="Edit this";
 elm2.style.cursor="hand";
 cell5.appendChild(elm2);

 }
 //alert(table.rows[1].cells[3].innerText);
 sname.splice(0,sname.length);
 sage.splice(0,sage.length);
 sclass.splice(0,sclass.length);
 }

}
function rowdel(id)
{
 //alert("id is this is **** :" +id);
 var tabid=document.getElementById('mytable');
 alert(tabid.rows[1].cells[3].isclicked)
 /*if(tabid.rows[1].cells[3].click())
  alert("working");
 else
  alert("Not working");*/



}

 </script>
 </head>
 <body>
  <form name="f1"> <!-- onload="hidetable(),document.f1.tname.focus()"> -->
  <table>
<tr><th>Name:</th><td><input type="text" name="tname" size="15"></td></tr>
<tr><th>Age:</th><td><input type="text" name="tage" size="15"></td></tr>
<tr><th>Class:</th><td><input type="text" name="tclass" size="15"></td></tr>
<tr><td><input type="button" value="Save" onClick="goSave()"></td>
<td><input type="button" value="show" onClick="show()"></td></tr>
</table>
<table border=1 name="stable" id="mytable" style="visibility:hidden">
<tr><th>Name</th><th>Age</th><th>Class</th><th>Delete</th><th>Edit</th></tr>
</table>
</form>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 11 декабря 2010

Вот, пожалуйста, чистая версия javaScript.

javaScript: 

<script type="text/javascript">

    function removeObject(element) {
        element.parentNode.removeChild(element);
    }

</script>

HTML: 

<div onclick="removeObject(this)">Click to remove me</div>

В реальном развертывании вы должныпроверьте входные данные для функции, потому что, если вы не передадите элемент DOM, вы получите ошибки, но я решил, что это для академических целей ...

Он будет работать с любым элементом, сВ качестве примера таблицы вы можете перейти вверх и удалить строку, а также ячейку или все, что вы хотите сделать.

У вас все еще есть доступ ко всем свойствам / атрибутам любого элемента, который находится внутри вашегофункции, так что вы могли бы так что-то вроде window.alert(element.id); или что-то еще.

0 голосов
/ 11 декабря 2010

Рассматривали ли вы использование библиотеки jQuery?Это обеспечивает очень чистый синтаксис для такого рода вещей.Вот демонстрация чего-то очень похожего на то, что вы ищете:

http://api.jquery.com/remove/

Вы можете использовать ключевое слово this для представления текущего элемента, что означает, что вы можете написать что-тонапример $(this).remove(); для удаления текущего элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...