如何在使用Javascript添加行之前更新行中的元素id

我正在开发一个系统，它要求用户输入主项和子项

提交表单后，这些条目将保存在数据库中，因此顺序很重要

例如：

1-主项1（第1行）并具有某些功能（1）
-->子项a父项1（第2行）并具有某些功能（2）
-->子项b父项1（第3行）并具有某些功能（3）
2-主要项目2（第4行）并具有某些功能（4）
-->子项c父项2（第5行）并具有某些功能（5）
-->子项d父项2（第6行）并具有某些功能（6）

我的问题是，当我尝试将另一个子项添加到主项1（即子项E）时，该行将是（第7行）

我要做的是将其添加为第4行，并将后面的行移动一行，如下所示：

1-主要项目1（第1行）
-->子项a父项1（第2行）并具有某些功能（2）
-->子项b父项1（第3行）并具有某些功能（3）
-->子项E父项1（第4行）并具有某些功能（4）
2-主要项目2（第5行）并具有某些功能（5）
-->子项c父项2（第6行）并具有某些功能（6）
-->子项d父项2（第7行）并具有某些功能（7）

我可以通过在代码中使用下面的函数“setRowIds”来重置行id，但这是为行id做的，我还想为该行中的行元素和函数变量做

html:

表添加测试
@导入url（“themes/softed/style.css”）；br{显示：块；边距：2px；}
我的桌子
项目(详情)
第二排。
*项目
一号线


(+)  
(+) 

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>'+
    '(+)&nbsp;<b><a href="javascript:doNothing();" onClick="fnAddSubProductRow_SS('+count+')">Add Child Type 1</a> </b>' +
    '(+)&nbsp;<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;


}
} 

函数fnAddSubProductRow\u SS（ParentRow）
{
var tableName=document.getElementById（'proTab'）；
var row=tableName.rows.length；
var计数=评估（行）-1；
var prevRow=getRowNo（ParentRow）；
var prev=prevRow；
var target=document.getElementById（'row'+prev）；
var newElement=document.createElement（'tr'）；
newElement.id=“行”+计数；
newElement.style.backgroundColor=“#f2f2”
newElement.innerHTML='行号'+计数+'父行名称：'；
target.parentNode.insertBefore（新元素，target.nextSibling）；
setRowIds（）
}
函数fnAddNONProductRow\u SS（父行）{
var tableName=document.getElementById（'proTab'）；
var row=tableName.rows.length；
var计数=评估（行）-1；
var prevRow=getRowNo（ParentRow）；
var prev=prevRow；
var target=document.getElementById（'row'+prev）；
var newElement=document.createElement（'tr'）；
newElement.id=“行”+计数；
newElement.style.backgroundColor=“#EDF5FA”//“#EDF5FA”
newElement.innerHTML='行号'+计数+'父行名称：'；
target.parentNode.insertBefore（新元素，target.nextSibling）；
setRowIds（）
}
函数fnAddProductRow_SS（）{
var tableName=document.getElementById（'proTab'）；
var prev=tableName.rows.length；
var count=eval（prev）-2；//因为表有两个标题行。所以我们将从行长度中减少两行
var target=document.getElementById（'行'+计数）；
var newElement=document.createElement（'tr'）
变量计数=计数+1
newElement.id=“行”+计数；
newElement.innerHTML='行号：'+count+''+
//第2栏
'' +
' '+
“
”+
'(+)  ' +
'(+) ' +
''+
''+
'' +
'' +
'';
target.parentNode.insertBefore（新元素，null）；
setRowIds（）
}
函数getRowNo（parentRow）
{
var max_row_count=document.getElementById（'proTab'）.rows.length；
max\u row\u count=eval（max\u row\u count）-2；//因为表有两个标题行。所以我们将从行长度中减少两行
var j=评估（parentRow）；
对于（var i=1；我为什么不使用像jQuery这样的JavaScript框架？@ZlatanO。我不熟悉jQuery，也不知道如何使用jQuery来实现这一点。这是开始学习它的好日子。如果使用jQuery，可以少写20行。谢谢@ZlatanO.，除了谷歌，还有什么提示吗：）这是你的火箭发射台！
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>'+
    '(+)&nbsp;<b><a href="javascript:doNothing();" onClick="fnAddSubProductRow_SS('+count+')">Add Child Type 1</a> </b>' +
    '(+)&nbsp;<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;


}
}