入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

jQuery Json数组操作

创建时间:2017-03-07 投稿人: 浏览次数:3148

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
.assertive {color: #fff;float: left;width: 120px;height: 30px;line-height: 30px;margin: 0 5px 5px 0;text-align: center;border-radius: 5px;background-color: #ef473a;}
.assertive dt {width: 90px;float: left;}
.assertive dd {width: 30px;float: right;}
.assertive span {width: 30px;float: right;}
</style>

<div class="bd">
    <form id="registerform">
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="txtUserName" name="txtUserName" class="weui_input" type="text" placeholder="用户名称">
                </div>
            </div>
        </div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div id="dataHtml"></div>
                    <input type="hidden" id="hidCount" value="0" />
                </div>
            </div>
        </div>
        <div class="weui_btn_area">
            <button type="button" class="weui_btn weui_btn_primary" onclick="addData()">添加</button>
            <button type="button" class="weui_btn weui_btn_primary" onclick="getData()">查看数据</button>
        </div>
    </form>
</div>
<script>
    var arrayData = [];
    function addData() {
        var text = $("#txtUserName").val();
        if (text == "") {
            alert("请输入用户名称");
        } else {
            var index = $("#hidCount").val();
            arrayData.push({ "val": index, "text": text });
            var html = $("#dataHtml").html();
            //html += "<div class="assertive" id="rowid" + index + ""><dt>" + text + "</dt><dd onclick="DeleteById(" + index + ")">X</dd></div>";
            html += "<div class="assertive" id="rowid" + index + "">" + text + "<span onclick="DeleteById(" + index + ")">X</span></div>";
            $("#dataHtml").html(html);
            index++;
            $("#hidCount").val(index);
            $("#txtUserName").val("");
        }
    }

    function DeleteById(id) {
        $("#rowid" + id).remove();
        $.each(arrayData, function (index, item) {
            if (id == item.val.toString()) {
                arrayData.splice(index, 1);
                return;
            }
        });
    }

    function getData() {
        alert(JSON.stringify(arrayData));
    }
</script>
效果图:



var arrayObj = new Array();//创建一个数组
var arrayData = [];

arrayObj.push("1");
arrayObj.push("2");
arrayObj.push("3");
arrayObj.push("4");
arrayObj.push("5");

//Array追加数组对象
var moreData = [{ "vale": 100, "name": "电子商务" },{ "vale": 200, "name": "互联网" }];
Array.prototype.push.apply(arrayData, moreData);
arrayData = arrayData.concat(moreData);

arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });

arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });


//数组长度
alert(arrayObj.length);

//数组转字符串
alert(arrayObj.join(","))

//json转字符串
alert(JSON.stringify(arrayData));


///删除arrayData元素
function DeleteLawyer() {
    $("#liLawyer" + $("#hidEditId").val()).remove();
    $.each(arrayData, function (index, item) {
        if ($("#hidEditId").val() == item.objKey.toString()) {
            arrayData.splice(index, 1);
            return;
        }
    });
    //alert(JSON.stringify(arrayData));
}


声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。