[javascript]need some help

revolution · 07-01-2008, 09:55 PM

I'm looking for a pretty simple code. I can find codes to do the separate parts, but I can't manage to combine them to do what I need.

Contains the following:
1. A table
2. A textbox
3. Two buttons

What I want to be able to do is type something in the text box and click a button that says "Add Item". It then adds the input text to a cell in a row in the table and in the cell next to it, a button that says "Delete" that will delete that row, removing the item and its "Delete" button from the table. I'd like to be able to add as many items as I want.

EDIT

Also needs to be able to store the list so that you can update it later.

dyl1828 · 07-01-2008, 11:32 PM

Here you go,
Example: Example

Code:

<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function appendRow()
{
 var text= document.form.input.value;
 var button= '<input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">'
 var tbody = document.getElementById("t1").getElementsByTagName("tbody")[0];
 var row = document.createElement("TR");
 var cell1 = document.createElement("TD");
 cell1.innerHTML = text;
 var cell2 = document.createElement("TD");
 cell2.innerHTML = button;
 row.appendChild(cell1);
 row.appendChild(cell2);
 tbody.appendChild(row);
}
function deleteRow(i){
    document.getElementById('t1').deleteRow(i)
}
</script>
</head>
<body>

<table id="t1" border="1">
<tbody>
</tbody>
</table>
<form name="form" id="form">
<textarea id="input" name="input"></textarea>
<input onclick="appendRow()" value="Add Item" type="button">
</form>

</body>
</html>

Hope you enjoy

P.S.
This code was tested and created on Firefox 2.0.0.14 with Javascript enabled

revolution · 07-02-2008, 06:18 AM

Exactly what I was looking for. Hadn't planned on using a textarea, but that's not a problem.

EDIT

I forgot one thing, I need it to not delete every time I refresh or go back to the page. I want it to be able to store so that every time I go back to it, the list is still there and I can sitll add items or delete the ones on there like normal.

dyl1828 · 07-02-2008, 09:34 AM

do you mind if it includes php in the script, because that is the only way i know how to do that.

Also without php you cant save the it because javascript is only client side (so you cant save to the server)

Edit:
Sorry, but i cant think or find a way to save the table. Sorry.