0

我正在开发要求用户输入主项目和子项目的系统。

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

例子：

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


}
}
4

0 回答 0