@{
    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));
}