js操作新增和删除行同时重写编号和每行的id和name值
2015-08-21 09:24
573 查看
html代码如下
<tr class='text-center' style="border-bottom:0px"> <td style="border-bottom:0px" ><input name="nums" type="text" style="border: 0;background-color: white" size=3 value="<?php echo 1;?>" readOnly></td> <td style="border-bottom:0px"><?php echo html::input("comments[1]", $todo->comment, "class='form-control'");?></td> <td style="border-bottom:0px"><?php echo html::input("timeConsumings[1]", $timeConsuming, "onchange='isAbs(this.value,this)' class='form-control' autocomplete='off'");?></td> <td style="border-bottom:0px"><?php echo html::input("spareTimes[1]", $spareTime, "onchange='isAbs(this.value,this)' class='form-control' autocomplete='off'");?></td> <td style="border-bottom:0px"> <?php ?> <?php echo html::selectlogs("taskId[1]", $tasks, $todo->taskId, "class='form-control'");?></td> <td class='text-center w-100px' style="border-bottom:1px;border-color: red"> <a href='javascript:void()' class='btn-icon' onclick='addItem(this)'><i class='icon-plus'></i></a> <a href='javascript:void()' onclick='delItem(this)' class='btn-icon'><i class='icon-remove'></i></a> </td> </tr>
<?php for($i = 2; $i < 6; $i++):?> <tr class='text-center'> <td><input name="nums" type="text" style="border: 0;background-color: white" size=3 value="<?php echo $i;?>" readOnly></td> <td><?php echo html::input("comments[$i]", $todo->comment, "class='form-control'");?></td> <td><?php echo html::input("timeConsumings[$i]", $timeConsuming, "onchange='isAbs(this.value,this)' class='form-control' autocomplete='off'");?></td> <td><?php echo html::input("spareTimes[$i]", $spareTime, "onchange='isAbs(this.value,this)' class='form-control' autocomplete='off'");?></td> <td style="border-bottom:0px"> <?php ?> <?php echo html::selectlogs("taskId[$i]", $tasks, $todo->taskId, "class='form-control'");?></td> <td class='text-center w-100px' style=""> <a href='javascript:void()' class='btn-icon' onclick='addItem(this)'><i class='icon-plus'></i></a> <a href='javascript:void()' onclick='delItem(this)' class='btn-icon'><i class='icon-remove'></i></a> </td> </tr> <?php endfor;?>
js代码
添加行
function addItem(clickedButton) { //复制tr var myTable = document.getElementById("myTable"); var ls = myTable.rows.length-3; var newTr = myTable.rows[1].cloneNode(true); var tds = newTr.getElementsByTagName("td"); var len= ls+1; var nums = document.getElementsByName("nums"); var rowiner = Number(nums[nums.length-1].value)+1; for (var i = 0; i < tds.length; i++) { if(i==0){ tds[i].getElementsByTagName("input")[0].value=rowiner; }else if(i==1){ tds[i].getElementsByTagName("input")[0].id="comments["+rowiner+"]"; tds[i].getElementsByTagName("input")[0].name="comments["+rowiner+"]"; tds[i].getElementsByTagName("input")[0].value=""; }else if(i==2){ tds[i].getElementsByTagName("input")[0].id="timeConsumings["+rowiner+"]"; tds[i].getElementsByTagName("input")[0].name="timeConsumings["+rowiner+"]"; tds[i].getElementsByTagName("input")[0].value="0"; }else if(i==3){ tds[i].getElementsByTagName("input")[0].id="spareTimes["+rowiner+"]"; tds[i].getElementsByTagName("input")[0].name="spareTimes["+rowiner+"]"; tds[i].getElementsByTagName("input")[0].value="0"; }else if(i==4){ tds[i].getElementsByTagName("select")[0].id="taskId"+rowiner+""; tds[i].getElementsByTagName("select")[0].name="taskId["+rowiner+"]"; rowiner++; } } myTable.appendChild(newTr); var nums = document.getElementsByName("nums"); for (var j = 0; j < nums.length; j++) { nums[j].value=j+1; } }
删除行js
function delItem(clickedButton) { var nums = document.getElementsByName("nums"); if(nums.length>1){ $(clickedButton).parent().parent().remove(); for (var j = 0; j < nums.length; j++) { var ss = nums[j].value; var as = j+1; nums[j].value=as; document.getElementById("timeConsumings["+ss+"]").id="timeConsumings["+as+"]"; document.getElementById("timeConsumings["+as+"]").name="timeConsumings["+as+"]"; document.getElementById("comments["+ss+"]").id="comments["+as+"]"; document.getElementById("comments["+as+"]").name="comments["+as+"]"; document.getElementById("spareTimes["+ss+"]").id="spareTimes["+as+"]"; document.getElementById("spareTimes["+as+"]").name="spareTimes["+as+"]"; document.getElementById("taskId"+ss).id="taskId"+as; document.getElementById("taskId"+as).name="taskId["+as+"]"; } }else{ alert("最后一条不允许删除。"); } }
相关文章推荐
- 情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
- 省市区js(可以得到省、市、区的行政代码和名称)
- javascript逻辑运算符“||”和“&&”
- 纯javascript实现图片延时加载方法
- js中操作时间
- js金额转换大写(转)
- 原生js实现ajax用于简单的签到或登录
- JSP缓存问题导致页面显示不全
- 每日五题(jsp)
- JavaScript parser
- 转载翻译文章:JavaScript Module Pattern: In-Dept
- 纯javascript实现图片延时加载方法
- 情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
- JavaScript实现将数组数据添加到Select下拉框的方法
- js实现不提交表单获取单选按钮值的方法
- JavaScript实现为input与textarea自定义hover,focus效果的方法
- JS实现表单中checkbox对勾选中增加边框显示效果
- JS打字效果的动态菜单代码分享
- js实现select跳转菜单新窗口效果代码分享(超简单)
- js实现温度计时间样式代码分享