Что касается ячеек таблицы, то нажмите

У меня есть таблица, и я динамически ввожу значения, потому что я ввел 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>

источник

2010-12-11 Sowri

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

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

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

источник

2010-12-11 11:51:56 RichardW1001

Я не хочу использовать jquery, я имею к нему только в javascript ... только для удаления, он будет работать, но редактирование тоже есть .. трудно найти, в какую ячейку мы нажали .. thats y am ask your help – Sowri

jQuery Я только javascript ... это просто библиотека javascript-функций, упрощающая общие задачи. Вы можете сделать то же самое без этого, самый простой способ - использовать это ключевое слово для передачи текущего элемента или одного из его свойств в функцию, то есть onclick = "removeElement (this)" и заставить вашу функцию работать с переданным ей элементом а не значение id. Использование сторонней библиотеки просто избегает изобретать колесо. – RichardW1001

, но мой сэр дал эту задачу только в javascript .. :( – Sowri

Здесь вы идете, чистая версия javaScript.

JavaScript:

<script type="text/javascript"> 

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

</script>

HTML-:

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

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

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

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

источник

2010-12-11 15:52:00 RichardW1001

Что касается ячеек таблицы, то нажмите

ответ

Смежные вопросы