delete a row in html table using a hidden type and javascript
I have a table with HTML constructed using my servlet class. When trying to delete a row in this table using a javascript function I must first of all put different id to separate elements.and i resolove it with hidden type like that:
retour.append("<td>");
retour.append("<input type=\"hidden\" id=\"id_"+nomTab+"_"+compteur+"\" value=\""+object.getIdDailyTimeSheet()+"\"/>");
retour.append("<button id=\"del\" name=\"del\" type=\"button\" onClick=DeleteARow('+id_"+nomTab+"_"+compteur+"')>开发者_如何转开发");
retour.append("<img src=icon_delete.gif />");
retour.append("</button>");
retour.append("</td>");
As you can see each element has a delete button. What i want to know how can i delete one row.
thinks.
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
You should check out this dom page:
http://www.w3schools.com/js/js_ex_dom.asp
hope this helps.
I don't understand why you're using the <input type="hidden" />. Instead you should use some DOM scripting. (or jQuery)
Here's an example using DOM scripting:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Delete a Row Example</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var table = document.getElementById("the-table");
var buttons = table.getElementsByTagName("input"); // all the <input /> elements which were in the table
for(var i=0; i<buttons.length; i++) { // loop all over the <input /> elements in the table
if(buttons[i].name=="delete-this-row") { // if they are marked as "delete this row" inputs...
buttons[i].onclick = function() { // give them onclick even handlers
var buttonCell = this.parentNode; // now buttonCell is the <td> which contains the <input />
var deleteThisRow = buttonCell.parentNode; // now deleteThisRow is the row we want to delete
deleteThisRow.parentNode.removeChild(deleteThisRow);
}
}
}
}
//]]>
</script>
</head>
<body>
<table id="the-table">
<tbody>
<tr>
<td>0,0</td>
<td>1,0</td>
<td>2,0</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
<tr>
<td>0,1</td>
<td>1,1</td>
<td>2,1</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
<tr>
<td>0,2</td>
<td>1,2</td>
<td>2,2</td>
<td><input type="button" name="delete-this-row" value="Delete This Row" /></td>
</tr>
</tbody>
</table>
</body>
</html>
The idea I'm using here is not to use an identifier on the row; instead use the position of the button to determine which row to delete. You delete the row its in.
Since I define the onclick event handler in my javascript (not in an onclick attribute) the function I used can access the clicked element, using the this keyword. From there, I can start climbing up this.parendNodes all the way to my <tr> element.
You should be able to do the same thing I've done with <input type="button" /> elements with a <button> element.
Alternately you could also use deleteRow(...).
The DeleteRow javascript method should have code to loop through the Table element, identify the row you want to delete and then invoke the delete method of the document object.
function DeleteARow(id) {
var row = document.getElementById(id);
if ( row ) {
row.parentNode.removeChild(row);
}
}
加载中,请稍侯......
精彩评论