Manipulating a javascript array from HTML_问答_开发者

Manipulating a javascript array from HTML

开发者 https://www.devze.com 2023-03-19 14:48 出处：网络

开发者_如何学运维I am creating a web app where I allow the user to manipulate some data held in Javascript array. Its easy enough to generate a series of divs or an HTML list to represent the array (s

开发者_如何学运维

I am creating a web app where I allow the user to manipulate some data held in Javascript array. Its easy enough to generate a series of divs or an HTML list to represent the array (simply iterating through and adding the HTML) but I also want each array element to have a 'delete' button in the HTML that removes the corresponding Javascript array element and then update the HTML list.

To clarify the list would look something like this to the user:

Item 1 (Delete)
Item 2 (Delete)

Ideally I would like the 'Delete' link to, when clicked, call a Javascript method with the item index ('remove_item(index)' for example).

I have thought of a couple of awkward ways of doing this but I feel this is something that must have been done before and wondered if anyone had a sturdy, fast solution to this?

Grab the inner HTML of the sibling of the delete button, then look for that value in the array. Then remove it, and remove the parent of the delete button from the DOM.

http://api.jquery.com/siblings/

http://api.jquery.com/parent/

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            for (var i=0; i<10; i++){
                var $div = $('<div id="myDiv' + i + '"></div>');
                $span=$("<span>" + i + "</span>");
                $button=$('<button type="button" id="button-' + i + '">Delete Me!</button>');
                $button.click(function(){
                    var id = this.id.split("-")[1];
                    $("#myDiv" + id).remove();
                });
                $div.append($span);
                $div.append($button);
                $("#wrapper").append($div)
            }
        });
    </script>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>

Though this is an overkill, you might consider using some JS grid implementation, for example DataTables for JQuery.

EDIT

Thought that deleting a row in a DataTables might be not straightforward; here's an example:

$(function () {
    $('#example').dataTable( {
        "aaData": [
            //your data array goes here, each row should be an array itself
        ],
        "aoColumns": [
            { "sTitle": "Column Title" },
                //other column declarations
            { "sTitle": "Delete", "fnRender": function(obj) {return "<a href='#' class='delete'>DELETE</a>";} }
        ]
    } 
    );  
    $('.delete').live('click', function () {
        $('#example').dataTable().fnDeleteRow($(this).closest('tr').get(0));
        return false;
    });
});

#example is just an empty table: <table cellpadding="0" cellspacing="0" border="0" id="example"></table>

(Of course you'll need to include JQuery and DataTables in your <head>.)

You can use splice() to remove an element from an array:

myArray = ['a', 'b', 'c', 'd'];
myArray.splice (0,1); 
['b', 'c', 'd'];

After removal, regenerate the HTML list as needed.

Have you considered creating an object with all the properties / data in it in the script block? Then you can assign values to the properties, then at least you separate the UI a bit from the code.

You might want to consider how you want to express the relationship between the data (array) and the view (html).

You could have your delete function remove from the array and then cycle through your array to modify the DOM, or you can control it from the direction of the view and delete from the DOM first and then cycle over the elements and rebuild your array.