动态增加删除Table中的行

最新推荐文章于 2022-08-25 17:38:49 发布

周庆飞

最新推荐文章于 2022-08-25 17:38:49 发布

阅读量387

点赞数

分类专栏： table动态删除增加文章标签： table 动态删除增加

本文链接：https://blog.csdn.net/zhou_dahui/article/details/78043146

版权

table动态删除增加专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta charset="utf-8">
<title>新增</title>

<script>
function addTestCase(a){
var thisRowIndex = $(a).parent().prev().prev().text()
var thisSelId = "tc" + thisRowIndex + "Sel";
var rowCount = parseInt(document.getElementById("testCaseListTable").rows.length);
if(hasUnselected()){
alert("请先选择再增加！")
}
else{
$("#testCaseInfo").val(updateTCListInfo());
var trId = "tc" + thisRowIndex;
var newRowIndex = parseInt(thisRowIndex) + 1;

for(i=rowCount;i>=parseInt(thisRowIndex)+1;i--){
var indexId = "tc" + i + "Index";
var obj = $("#" + indexId);
obj.text(i+1);
var j = i+1;
var test = "tc" + j + "Index";
obj.attr("id",test);

var thisSelId = "tc" + i + "Sel";
var selObj = $("#" + thisSelId);
var j = i+1;
var test = "tc" + j + "Sel";
selObj.attr("id",test);
}

insertTr(thisRowIndex);
addOptions(newRowIndex);
document.getElementById("testSuitInfoTable").rows[6].cells[0].rowSpan = rowCount + 1;
}
}

function insertTr(index){
var newIndex = parseInt(index) + 1;
var newRow=document.getElementById('testCaseListTable').insertRow(index)
newRow.style = "margin-top:5px;border:1px solid #ddd;";
var td1=newRow.insertCell(0)
td1.innerHTML="<td>" + newIndex + "</td>";
td1.id = "tc" + newIndex + "Index";;
td1.style = "width:150px"
var td2=newRow.insertCell(1)
td2.innerHTML="<td><div><select class='inputClass' id='tc" + newIndex + "Sel' οnchange='selChange(this)'></select></div></td>";
var td3=newRow.insertCell(2)
td3.innerHTML="<td><a>确认</a> <a>说明</a> <a οnclick='deleteRow(this)'>删除</a> <a οnclick='addTestCase(this)'>插入</a></td>";
}

function addOptions(newRowIndex){
var newSelId = "tc" + newRowIndex + "Sel";
var tc1Sel = document.getElementById("tc1Sel");
var optionsCount = tc1Sel.options.length;
var newTestCaseSel = document.getElementById(newSelId);
for(var i = 0;i < optionsCount;i++){
var newOption = document.createElement("option");
newOption.value = i;
newOption.innerText = tc1Sel.options[i].innerText;
newTestCaseSel.appendChild(newOption);
}
}

function deleteRow(a){
var rowNum = parseInt($(a).parent().prev().prev().text());
var rowCount = parseInt(document.getElementById("testSuitInfoTable").rows[6].cells[0].getAttribute("rowSpan"));
if(rowCount == 1){
alert("第一行不能删除！");
}
else{
$(a).parent().parent().remove();
for(i=rowCount;i>=parseInt(rowNum)+1;i--){
var indexId = "tc" + i + "Index";
var indexObj = $("#" + indexId);
indexObj.text(i-1);
var j = i-1;
var test = "tc" + j + "Index";
indexObj.attr("id",test);

var selId = "tc" + i + "Sel";
var selObj = $("#" + selId);
var j = i-1;
var test = "tc" + j + "Sel";
selObj.attr("id",test);
}
var newRowSpan = parseInt(rowCount) - 1;
document.getElementById("testSuitInfoTable").rows[6].cells[0].rowSpan = newRowSpan;
}
$("#testCaseInfo").val(updateTCListInfo());
}
function updateTCListInfo(){
var len = document.getElementById("testCaseListTable").rows.length;
var tcListInfo = "";
for(var i=1;i<=len;i++){
var tcSelId = "tc" + i + "Sel";
var tcSelValue = $("#" + tcSelId).val();
var info = "," + i + ":" + tcSelValue;
if(i == 1){
tcListInfo += i + ":" + tcSelValue;
}
else{
tcListInfo += info;
}
}
return tcListInfo;
}
function selChange(a){
var selValue = $(a).val();

if(selValue != 0){
$("#testCaseInfo").val(updateTCListInfo());
}
}
function hasUnselected(){
var len = document.getElementById("testCaseListTable").rows.length;
var result = false;
for(var i=1;i<=len;i++){
var tcSelId = "tc" + i + "Sel";
var tcSelValue = $("#" + tcSelId).val();
if(tcSelValue == 0){
result = true;
}
}
return result;
}
</script>
</head>

<body>
<div class="view-body">
<div class="container">
<form class="form-inline" action="${pageContext.request.contextPath}/testSuit.do/add" method="post" id="addTestSuitForm">
<table class="table table-striped table-bordered table-hover" name="testSuitInfoTable" id="testSuitInfoTable">
<caption style="color:black;font-size:23px;font-family:LiSu">xxx</caption>
<tr>
<th width="150px">xxx</td>
<td colspan="3"><input class="inputClass" readonly="true" name="id" id="id" type=text value=""/></td>
</tr>

<tr>
<th>xxx</th>
<td colspan="3">
<div class="inputDivClass">
<input class="inputClass" name="testSuitName" id="testSuitName" type=text value=""/>
<label class="errorClass" id="testSuitNameError"></label>
</div>
</td>
</tr>

<tr>
<th>xxx</th>
<td colspan="3">
<div class="inputDivClass">
<select class="inputClass" name="temSut" id="temSut" style="width:100%;height:30px;">
<option value="0">==请选择==</option>
<option value="1">xxx</option>
<option value="2">xxx</option>
</select>
<label class="errorClass" id="temSutError"></label>
</div>
</td>
</tr>

<tr>
<th>测试类别</th>
<td colspan="3" style="padding:0 0 0 0;">
<div class="inputDivClass">
<select class="inputClass" name="testSuitCategory" id="testSuitCategory" style="width:100%;height:30px;">
<option value="0">==请选择==</option>
<option value="1">xxx</option>
<option value="2">xxx</option>
<option value="3">xxx</option>
<option value="4">xxx</option>
</select>
<label class="errorClass" id="testSuitCategoryError"></label>
</div>
</td>
</tr>

<tr>
<th>测试描述</th>
<td colspan="3">
<div class="inputDivClass">
<input class="inputClass" name="testDescibe" id="testDescibe" type=text value="" placeholder="&nbspxxx......"/>
<label class="errorClass" id="testDescibeError"></label>
</div>
</td>
</tr>

<tr>
<th>xxx</th>
<td colspan="3">
<div class="inputDivClass">
<input class="inputClass" name="testSuitDescribe" id="testSuitDescribe" type=text value="" placeholder="&nbspxxx......"/>
<label class="errorClass" id="testSuitDescribeError"></label>
</div>
</td>
</tr>

<tr id="tcList">
<th rowSpan="1" style="background:#FFF;">xxx</th>
<td>
<table style="width:100%;" id="testCaseListTable" name="testCaseListTable" colspan="3">
<tr style="border:1px #ddd" id="tc1">
<td width="150px" id="tc1Index">1</td>
<td width="400px">
<select class="inputClass" id="tc1Sel" style="width:100%;height:30px;" οnchange="selChange(this)">
<option value="0">==xxx==</option>
<option value="1">xxx</option>
<option value="2">xxx</option>
<option value="3">xxx</option>
<option value="4">TEM_F000001_BMC_IPMI04</option>
</select>
</td>
<td>
<a>确认</a> <a>说明</a> <a οnclick="deleteRow(this)">删除</a> <a οnclick="addTestCase(this)">插入</a>
</td>
</tr>
<table>
</td>
</tr>
</table>

<div class="sideBut">
<a href="testSuitAdmin.html" class="btn btn-large btn-primary" style="position:absolute;right:20px;top:160px;">xxx</a>
<a href="testSuitAdmin.html" class="btn btn-large btn-primary" style="position:absolute;right:20px;top:220px;">xxx</a>
<input id="testCaseInfo" style="position:absolute;right:20px;top:260px;" type=text value="" />
</div>
</form>
</div>
</div>
</body>
</html>