从HTML操作javascript数组

Manipulating a javascript array from HTML

本文关键字：数组 javascript 操作 HTML      更新时间：2023-09-26

我正在创建一个web应用程序，我允许用户在Javascript数组中操纵一些数据。它很容易生成一系列div或HTML列表来表示数组(简单地迭代并添加HTML)，但我也希望每个数组元素在HTML中有一个"删除"按钮，删除相应的Javascript数组元素，然后更新HTML列表。

对于用户来说，列表看起来应该是这样的:

Item 1 (Delete)
Item 2 (Delete)

理想情况下，我希望'Delete'链接，点击时，调用Javascript方法与项目索引('remove_item(index)'为例)。

我想到了一些尴尬的方法来做到这一点，但我觉得这一定是以前做过的事情，不知道是否有人有一个强大的，快速的解决方案?

获取delete按钮同级的内部HTML，然后在数组中查找该值。然后删除它，并从DOM中删除delete按钮的父按钮。

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>

虽然这有点过分，但您可以考虑使用一些JS网格实现，例如JQuery的datattables。

编辑

认为在DataTables中删除一行可能不直接;下面是一个例子:

$(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只是一个空表:<table cellpadding="0" cellspacing="0" border="0" id="example"></table>

(当然你需要包括JQuery和数据表在你的<head> .)

您可以使用splice()从数组中删除一个元素:

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

删除后，根据需要重新生成HTML列表

您是否考虑过在脚本块中创建一个具有所有属性/数据的对象?然后您可以为属性赋值，这样至少可以将UI与代码分开。

您可能需要考虑如何表达数据(数组)和视图(html)之间的关系。

您可以将delete函数从数组中删除，然后循环遍历数组以修改DOM，或者您可以从视图方向控制它并首先从DOM中删除，然后循环遍历元素并重建数组。

相关文章：