PS:
游戏公司后台开发,工作模式:996。
于是写博客这事也荒废了....
想想还是写一点吧。
呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的。
我建两个相似的表是为了,给后台使用人员显示所操作的数据,同时方便把开发人员真正要操作的数据传到对应Action中,隐藏开发人员传参用的表。
运行效果:
只显示给管理系统使用人员看的表:(单击选中任意行即删除该行,修改相同道具个数直接修改表中对应行数据)
不隐藏传参表时效果:(单击选中任意行即删除该行,修改相同道具个数直接修改表中对应行数据)
隐藏表格实现:
<style type="text/css">
#tableNone{
display:none;/*表格以整个表格形式隐藏*/
}
</style>
两个表格的定义:
id="hidden"是用来传值,确定选中行的隐藏域。
id="tableNone"是不显示的表。
<input type="hidden" value="" id="hidden" />
<li>
<div style="padding-left:190px;">
<table border="1" cellspacing="0" id="table"></table>
</div>
</li>
<li>
<div style="padding-left:190px;">
<table border="1" cellspacing="0" id="tableNone"></table>
</div>
</li>
其余组件定义:
PS:
在此不讲述的: οnkeyup="searchCard(this)"是用来实现在“道具名、号”输入框中输入道具的名字或编号就让下拉菜单自动选中对应道具的。
id="choseNotice"的input框是用来验证输入内容是否符合要求的,输入符合要求时不显示。
<span style="font-family: Arial, Helvetica, sans-serif;"><strong style="font-size:13px;padding-left:120px;">道具名、号 </strong></span>
<input type="text" style="width: 50px; margin: 2px;" value="" οnkeyup="searchCard(this)"/>
<strong style="font-size:13px">道具个数 </strong>
<input id="propNum" type="text" style="width: 50px; margin: 4px;" value=""/>
<input type="button" value="添加" οnclick="addProp()" />
<li><input size="40"; style="padding-left:190px; color:red;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" id="choseNotice"/></li>
动态生成表格、选中删除任意行:
//添加按钮点击事件
function addProp()
{
//正则:非零和非零开头的数字:^([1-9][0-9]*)$
var propNumReg = /^([1-9][0-9]*)$/;
//得添加道具个数
var propNum = $("#propNum").val();
//得道具的配置id
var propSid=$("#propList").val();
//得当前下拉菜单选中option的文本值
var options =$("#propList option:selected");
//没有选择道具不能添加
if(options.text()=="--请选择道具--")
{
$("#choseNotice").val("请选择道具。");
//显示是否选择道具提示框
$("#choseNotice").show();
return ;
}
//没有填写道具数量不能添加
if(propNum == "")
{
$("#choseNotice").val("请填写道具数量。");
//显示是否选择道具提示框
$("#choseNotice").show();
return;
}else if(!propNumReg.test(propNum)){
$("#choseNotice").val("请填写零或非零开头的数字。");
//显示是否选择道具提示框
$("#choseNotice").show();
return;
}
//隐藏是否选择道具提示框
$("#choseNotice").hide();
//id选择器得表格中的行,行不存在,即该种道具没有添加过。加前辍是为了防止别的变量值刚好和表中id值一样。
if($("#proptdid_"+propSid+"").html()==undefined)
{
//动态生成tr
var tr = "<tr id='proptrid_"+propSid+"' οnclick='choseWho("+propSid+")' style='font-size:13px;'><td id='proptdid_"+propSid+"'>"+options.text()+"*"+propNum+"</td></tr>";
//隐藏表格每行内容为: 道具配置id*道具个数
var trNone = "<tr id='propNone_"+propSid+"' οnclick='choseWho("+propSid+")' style='font-size:13px;'><td id='propNone_"+propSid+"'>"+propSid+"*"+propNum+"!"+"</td></tr>";
//拼接表格
$("#table").append(tr);
$("#tableNone").append(trNone);
}
else
{
//该行已经存在,直接修改该行显示内容。
$("#proptdid_"+propSid+"").html(options.text()+"*"+propNum);
//对隐藏表格作同样操作
$("#propNone_"+propSid+"").html(options.text()+"*"+propNum);
}
//把选中行删除。
function choseWho(id){
//删除选中行
$("#proptrid_"+id+"").remove();
//对隐藏表格作同样操作
$("#propNone_"+id+"").remove();
}
隐藏表格每行内容多拼一个感叹号是为了服务端拿到数据便于拆分。