2015-06-02 关于mvc表格点击按钮自动添加一行<tr></tr>

前台代码:

@using (Html.BeginForm("ContactPerson", "User", FormMethod.Post, new { @class = "ContactPerson" }))
{
<div class="ope clearfix">
<input type="button" id="addNewPeople" class="btn" value="新增联系人" />
<input type="hidden" name="totalCount" id="totalCount" value="@rowCount" />
<input type="hidden" name="currentCount" id="currentCount" value="@rowCount" /> @*当前数量*@
</div>
<table class="user_list t_data" id="NewContactPerson">
<thead>
<tr>
<th>序号</th>
<th>类型</th>
<th>姓名</th>
<th>座机</th>
<th>手机号</th>
<th>传真</th>
<th>邮箱</th>
<th>QQ</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@{int rowIndex = 1;}
@foreach (var item in Model)
{
<tr>
<td>@rowIndex</td>
<td>
@item.ContactTypeName
</td>
<td>
@item.ContactName
</td>
<td>
@item.Telephone
</td>
<td>
@item.MobilePhone
</td>
<td>
@item.Fax
</td>
<td>
@item.EmailAddress
</td>
<td>
@item.QQ
</td>
<td>
<input id="b_delete" class="btn" style="width:54px;text-align:center" onclick="Invalid(@item.ContactId)" value="无效" />
</td>
</tr>
rowIndex++;
}
</tbody>
</table>
<div class="ope clearfix">
<input id="b_save" class="btn" type="submit" onclick="Validate()" value="保存" />
</div>
}

js代码如下

$(function () {
$("#addNewPeople").click(function () {
var row = Number($("#totalCount").val()) + 1;
$("#totalCount").val(row);
$str = ‘‘;
$str += "<tr>";
$str += " <td>";
$str += row.toString();
$str += " </td>";
$str += " <td>";
$str += ‘<select name=\"ContactTypeId‘ + row + ‘\"><option value=\"\">==请选择==</option>‘ + ‘@(Html.Raw((string)ViewBag.HTMLContactType))‘ + ‘</select>‘;
$str += " </td>";
$str += " <td>";
$str += " <input type=\"text\" name=\"Name" + row + "\" />";
$str += " </td>";
$str += " <td>";
$str += " <input type=\"text\" name=\"TelePhone" + row + "\" />";
$str += " </td>";
$str += " <td>";
$str += " <input type=\"text\" name=\"MobilePhone" + row + "\" />";
$str += " </td>";
$str += " <td>";
$str += " <input type=\"text\" name=\"Fax" + row + "\" />";
$str += " </td>";
$str += " <td>";
$str += " <input type=\"text\" name=\"Email" + row + "\" />";
$str += " </td>";
$str += " <td>";
$str += " <input type=\"text\" name=\"Qq" + row + "\" />";
$str += " </td>";
$str += " <td>";
$str += " ";
$str += " </td>";
$str += "</tr>";
$("#NewContactPerson").append($str);
});
});

绑定的下拉框代码如下:

页面显示如下:

时间: 2024-10-07 10:23:36

2015-06-02 关于mvc表格点击按钮自动添加一行<tr></tr>的相关文章

微信开发-点击链接自动添加关注

这个功能和微信提供的接口无关,只牵扯到微信的图文消息的另一种应用. 1.登录进入需要被关注的微信公众号,进入管理->素材管理,新增一条单图文消息,标题为点击下方链接关注XXX,图片可以是一张白色的图片,正文可以是此微信公众号的一些简介. 2.保存后回到图文消息列表,打开刚才保存的图文消息,复制打开窗口的URL地址,这个地址就是在微信上点击以后跳转到图文消息,在图文消息第二行有一行蓝色字,点击就会弹出关注提示 微信开发-点击链接自动添加关注,布布扣,bubuko.com

新浪微博——点击按钮自动加关注代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Repeater中添加按钮,点击按钮获取某一行的数据

1.添加编辑按钮和删除按钮 <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <table width="100%" border="1" cellpadding="0" cellspacing="0&q

2015.06.02,学习,读书笔记-《把你的英语用起来》学习笔记(2)

因为自己阅读英文原著也好,翻译也好,总感语法有些力不从心,自己以前总以为是句子结构的问题,可现在发现,可能还是语法这一关从高中之后,便遗忘殆尽,所以要想读懂复杂的长句难句,可能还是得从语法开始. 这次阅读学习的是<把你的英语用起来>的2.5 英文语法的学习. 他这里只推荐了一本语法书,台湾施元佑老师的<文法俱乐部>,简体版叫做<语法俱乐部>.自己有这本书的两种版本的pdf文件,有需要可以跟自己发邮件索取. 书里总结了学习语法的目的: 为了能看懂句式复杂的段落文章: 写作

mvc jQuery 点击按钮实现导出Excel功能 参数长短不限

1 var exportSubmit=function(url, obj){ 2 var form = $("<form>"); //定义一个form表单 3 form.attr("class", "wdi-TempDownloadForm"); 4 form.appendTo(document.body); 5 form.attr('style', 'display:none'); //在form表单中添加查询参数 6 form.a

php 点击按钮自动下载,IE下有问题,求解答!

直接看代码! test.php <?php include_once('index.php'); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="#" id="b

点击按钮自动刷新页面

<问题> <button type="button" style="height: 29px; float: left; width: 18%; border: none; border-left: 1px solid #d07878; border-radius: 0 4px 5px 0; padding-top: 3px" onclick="return search()"> 点击上述按钮,页面自动刷新 <原因&

vue.js如何实现点击按钮动态添加li

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="todo-l

JQuery实现点击按钮动态添加input文本框,限制个数

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script src="jquery-min.js" type="text/javascript"></script><script type=&