我正在开发要求用户输入主项目和子项目的系统。
提交表单后,这些条目将保存在数据库中,因此顺序很重要。
例子:
1- Main item 1 (row 1) and has someFunction(1)
-->sub item a parent 1 (row 2) and has someFunction(2)
-->sub item b parent 1 (row 3) and has someFunction(3)
2- Main Item 2 (row 4) and has someFunction(4)
-->sub item c parent 2 (row 5) and has someFunction(5)
-->sub item d parent 2 (row 6) and has someFunction(6)
我的问题是当我尝试将另一个子项添加到主项 1 说子项 E 时,该行将是(第 7 行)。
我所追求的是将其添加为第 4 行并将后面的行移动一格,如下所示:
1- Main item 1 (row 1)
-->sub item a parent 1 (row 2) and has someFunction(2)
-->sub item b parent 1 (row 3) and has someFunction(3)
-->sub item E parent 1 (row 4) and has someFunction(4)
2- Main Item 2 (row 5) and has someFunction(5)
-->sub item c parent 2 (row 6) and has someFunction(6)
-->sub item d parent 2 (row 7) and has someFunction(7)
我可以通过在代码中使用下面的这个函数“setRowIds”来重置行 id,但这对行 id 执行此操作,我也想为该行中的行元素和函数变量执行此操作。
html:
<html>
<head>
<title>Table Add test</title>
<style type="text/css">@import url("themes/softed/style.css");br { display: block; margin: 2px; }</style>
<script type="text/javascript" src="table.js"></script>
</head>
<body class=small style="font-size: 12px; margin: 2px; padding: 2px;">
<h2>My Table</h2>
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" class="crmTable" id="proTab">
<tr>
<td colspan="3" class="dvInnerHeader">
<b>ITEM_DETAILS</b>
</td>
</tr>
<!-- Header for the Product Details -->
<tr valign="top">
<td width=5% valign="top" class="lvtCol" align="right"><b>Row no.</b></td>
<td width=40% class="lvtCol"><font color='red'>*</font><b>Item</b></td>
</tr>
<!-- Following code is added for form the first row. Based on these we should form additional rows using script -->
<!-- Product Details First row - Starts -->
<tr valign="top" id="row1">
<!-- column 1 - delete link - starts -->
<td class="crmTableRow small lineOnTop">
<input type="hidden" id="deleted1" name="deleted1" value="0">
Line No.1
</td>
<!-- column 1 - delete link - ends -->
<!-- column 2 - Product Name - starts -->
<td class="crmTableRow small lineOnTop">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="small">
<input type="text" id="productName1" name="productName1" class="small" style="width:70%" value="" />
<br>
(+) <b><a href="javascript:doNothing();" onClick="fnAddSubProductRow_SS(1);">Add Child Type 1</a> </b>
(+) <b><a href="javascript:doNothing();" onClick="fnAddNONProductRow_SS(1);">Add Child Type 2</a></b>
</td>
</tr>
<tr valign="bottom">
<td class="small" id="setComment">
<textarea id="comment1" name="comment1" class=small style="width:70%;height:40px"></textarea>
<img src="themes/images/clear_field.gif" onClick="" style="cursor:pointer;" />
</td>
</tr>
</table>
</td>
<!-- column 2 - Product Name - ends -->
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" class="crmTable">
<!-- Add Product Button -->
<tr>
<td colspan="3">
<input type="button" name="Button" class="crmbutton small create" value="ADD Main Item" onclick="fnAddProductRow_SS();" />
</td>
</tr>
</table>
</table>
</body>
JavaScript 代码:
function fnAddSubProductRow_SS(ParentRow)
{
var tableName = document.getElementById('proTab');
var row = tableName.rows.length;
var count = eval(row)-1;
var prevRow = getRowNo(ParentRow);
var prev= prevRow;
var target = document.getElementById('row'+prev);
var newElement = document.createElement('tr');
newElement.id = "row"+count;
newElement.style.backgroundColor = "#F2F2F2"
newElement.innerHTML = '<td>Line No. '+count+'</td><td>Parent Row<input type="text" id="parentRow'+count+'" name="parentRow'+count+'" value="'+ParentRow+'" readonly/> Name:<input type="text" id="child'+count+'" name="child'+count+'" class="small" style="width:70%" value="" onchange="someFunction('+count+')" /></td>';
target.parentNode.insertBefore(newElement, target.nextSibling );
setRowIds()
}
function fnAddNONProductRow_SS(ParentRow){
var tableName = document.getElementById('proTab');
var row = tableName.rows.length;
var count = eval(row)-1;
var prevRow = getRowNo(ParentRow);
var prev= prevRow;
var target = document.getElementById('row'+prev);
var newElement = document.createElement('tr');
newElement.id = "row"+count;
newElement.style.backgroundColor = "#EDF5FA"//"#EDF5FA"
newElement.innerHTML = '<td >Line No. '+count+'</td><td>Parent Row<input type="text" id="parentRow'+count+'" name="parentRow'+count+'" value="'+ParentRow+'" readonly/> Name:<input type="text" id="child'+count+'" name="child'+count+'" class="small" style="width:70%" value="" onchange="someFunction('+count+')" /></td>';
target.parentNode.insertBefore(newElement, target.nextSibling );
setRowIds()
}
function fnAddProductRow_SS(){
var tableName = document.getElementById('proTab');
var prev = tableName.rows.length;
var count = eval(prev)-2;//Because the table has two header rows. so we will reduce two from row length
var target = document.getElementById('row'+count);
var newElement = document.createElement('tr')
var count = count+1
newElement.id = "row"+count;
newElement.innerHTML = '<td class="crmTableRow small lineOnTop">Line NO:'+count+''+
//column 2
'<td class="crmTableRow small lineOnTop">' +
' <table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td>'+
'<input type="text" id="productName'+count+'" name="productName'+count+'" class="small" style="width:70%" value="" /><br>'+
'(+) <b><a href="javascript:doNothing();" onClick="fnAddSubProductRow_SS('+count+')">Add Child Type 1</a> </b>' +
'(+) <b><a href="javascript:doNothing();" onClick="fnAddNONProductRow_SS('+count+');">Add Child Type 2</a></b></td></tr>' +
'<tr><td>'+
'<textarea id="comment1" name="comment1" class=small style="width:70%;height:40px"></textarea>'+
'<img src="themes/images/clear_field.gif" onClick="" style="cursor:pointer;" />' +
'</td></tr></table>' +
'</td>';
target.parentNode.insertBefore(newElement, null );
setRowIds()
}
function getRowNo(parentRow)
{
var max_row_count = document.getElementById('proTab').rows.length;
max_row_count = eval(max_row_count)-2;//Because the table has two header rows. so we will reduce two from row length
var j = eval(parentRow);
for (var i=1;i<=max_row_count;i++)
{
if(document.getElementById('parentRow'+i)){
if(document.getElementById('parentRow'+i).value == parentRow)
{
j++;
}
} else {continue; }
}
return j;
}
function setRowIds()
{
var tableName = document.getElementById('proTab');
var Total = tableName.rows.length;
var rowNO =0;
for (var i = 0, row; i<Total; i++)
{
if (i == 0 || i == 1){
continue;
}
rowNO = i-1;
tableName.rows[i].id = "row"+rowNO;
}
}