您的位置:首页 > Web前端 > JavaScript

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("最后一条不允许删除。");
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: