table 里面的 checkbox 全选，取消，单选，选中一行后选中行高亮

<script type="text/javascript">

//复选框

$(function () {

//表头中的checkbox （全选 反选）

$("#cb1").click(function () {//thead>tr th:first :checkbox:first

//判断当前是否选中

var hasSelected = $("#cb1").attr("checked");

//如果没选中，则移出clickedtr类，否则就加上clickedtr类

$('tbody>tr')[hasSelected ? "addClass" : "removeClass"]("clickedtr").find(':checkbox').attr('checked', hasSelected); ;

if (hasSelected) {

// $('tbody>tr :checkbox').attr("checked", true); // $("th:first :checkbox:first").attr("checked", true);

//$("#selCheckbox").attr("checked", true);

}

else { // $('tbody>tr :checkbox').attr("checked", false); //$("th:first :checkbox:first").attr("checked", false);

//$("#selCheckbox").attr("checked", false);

}

});

$("#trid", this).click(function () {//tbody>tr, 直接给 tbody 里面的tr 命一个id=trid,然后这里用这个id

//判断当前是否选中

var hasSelected = $(this).hasClass("clickedtr");

//如果选中，则移出selected类，否则就加上selected类 //find 是 查找内部的checkbox,设置对应的属性。

$(this)[hasSelected ? "removeClass" : "addClass"]("clickedtr").find(':checkbox').attr('checked', !hasSelected);

});

// 练习可以用这种方法 $(this).find("#selCheckbox").attr("checked", "checked");

// $(this).find("#selCheckbox").removeAttr("checked");

});

$(function () {

$("tr").addClass("clicktr"); //添加css，鼠标放到tr上为手型，css里面的

$("tr").click(function () {

//$("tr").removeClass("clickedtr"); //去掉所有的clickedtr样式

// $(this).addClass("clickedtr"); //单击某tr后，将该行的颜色标记下

});

});

</script>

ViewBag.Title = "泰鸿库存管理首页";

}

<h2>泰鸿科技

@Html.ActionLink("添加商品", "Create")

<table id="tb1">

<tr style="height:25px;">

<th>

<input type="checkbox" id="cb1" />

</th>

<th>

商品名称

</th>

<th>

商品编号

</th>

<th>

入库时间

</th>

<th>

出库时间

</th>

<th>

操作时间

</th>

<th>

记录者

</th>

<th>

仓库编号

</th>

<th>

商品数量

</th>

<th style=" width:200px;">

备注

</th>

<th style=" width:200px;">

状态

</th>

<th></th>

</tr>

@foreach (var item in Model)

{

<tr style=" height:25px;"id="trid">

<td style=" width:20px;">

<input id="selCheckbox" type="checkbox"/>

</td>

<td>

@Html.DisplayFor(modelItem =>item.CommodityName)

</td>

<td>

@Html.DisplayFor(modelItem =>item.CommodityID)

</td>

<td>

@Html.DisplayFor(modelItem =>item.PutInStartDate)

</td>

<td>

@Html.DisplayFor(modelItem => item.OutEndDate)

</td>

<td>

@Html.DisplayFor(modelItem =>item.OperateDate)

</td>

<td>

@Html.DisplayFor(modelItem =>item.RecorderName)

</td>

<td>

@Html.DisplayFor(modelItem =>item.WarehouseID)

</td>

<td>

@Html.DisplayFor(modelItem =>item.CommodityNum)

</td>

<td style=" width:200px;white-space:nowrap;height:25px; overflow:hidden; ">

@Html.DisplayFor(modelItem =>(item.Commands))

</td>

<td style="width:50px;">

@Html.DisplayFor(modelItem =>item.WarehouseStatus)

</td>



<td>

@Html.ActionLink("修改", "CommodityEditByID", new { CommodityID =item.CommodityID }) |

@* @Html.ActionLink("详细信息","CommodityDetails", new { CommodityID = item.CommodityID })|*@

@* @Html.ActionLink("删除", "CommodityDelete", new { CommodityID =item.CommodityID })

*@ </td>

</tr>

}

</table>

<div id="menucontainer">

<ul id="menu">

<li><buttonid="btn_Delete">删除</button></li>

</ul>