<table class="table"> <tr> <th>@Html.DisplayNameFor(model=>model.Id)</th> <th> @Html.DisplayNameFor(model => model.Pid) </th> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Remark) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td>@item.Id</td> <td> @Html.DisplayFor(modelItem => item.Pid) </td> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Remark) </td> <td> <a href="javascript:void(0)" onclick="editDream(this)">edit</a> |<a href="javascript:void(0)" onclick="delDream(this)" >del</a> </td> </tr> } <tr> <td></td> <td><select id="cate" class="form-control"><option value="0">no select</option></select></td> <td><input class="form-control" type="text" name="Name" /></td> <td><input class="form-control" type="text" name="Reamrk" /></td> <td><a href="javascript:void(0)" onclick="addDream(this)">add</a></td> </tr> </table> <script type="text/javascript"> getCate(); function getCate() { $.ajax({ url: "/comm/dreamcomm.ashx", data:"action=getcate", dataType:"json", type: "post", success: function (data) { var msg = ""; for (var i = 0, len = data.length; i < len; i++) { msg += "<option value='" + data[i].Id + "'>" + data[i].Name + "</option>"; } $("#cate").append(msg); } }) } function editDream(thisObj) { } function delDream(thisObj) { var $td = $(thisObj).parents("tr").children("td"); var id = $td.eq(0).text(); var data = "action=deldream&id=" + id; dreamAjax(data); } function addDream(thisObj) { var $td = $(thisObj).parents("tr").children("td"); var pid = $td.eq(1).find("select").val(); var name = $td.eq(2).find("input").val(); var remark = $td.eq(3).find("input").val(); var data = "action=adddream&pid=" + pid + "&name=" + name + "&remark=" + remark; dreamAjax(data); } function dreamAjax(_data, _url) { $.ajax({ url:"/comm/dreamcomm.ashx", data: _data, type: "post", success: function (data) { if (data == 1) { alert("open is ok "); location.reload(); } else { alert("open is error:" + data); } } }) } </script>