动态创建带有子行的HTML表

Question

我正在尝试为用户提供构建表的选项，用户可以使用该表创建表达式。用户尝试实现的以下屏幕截图表达式的示例是 （（（（c1 A / O c2）A / O C3）A / O C4），此处A / O表示用户从下拉菜单中选择的“和”和“或”条件，为简单起见，我到目前为止选择了A / O

如果我创建一行并从顶层开始添加子组，则我的代码正常工作，但是如果我确实尝试在中间创建子组，则它会失败。

前提条件：-到目前为止，分组最多只能是4级。然后，我必须从中生成表达式并将其存储。

有什么帮助吗？ 这是我的代码：-

// find elements
$(document).ready(function() {
  var RowCount = 0;

  $("#AddR").click(function() {

    if (RowCount == 0) {
      var x = "<tr><td></td><td></td><td></td><td></td><td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>";

      $("#Mtable tbody").append(x);
      RowCount++;
    } else {
      var x = "<tr><td>A/O</td><td></td><td></td><td></td><td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>";
      $("#Mtable tbody").append(x);
      RowCount++;
    }
  });


  $("#Mtable tbody").on('click', 'tr #AddRow', function() {
    //var x= $(this).closest("tr").find(("td:nth-child(1)")).attr('rowspan');
    var ColCount = 0;
    $(this).closest("tr").children("td").each(function() {
      ColCount++;
    });
    ColCount = ColCount - 2;
    if (ColCount == 4) {
      var x = "<tr><td>A/O</td><td></td><td></td><td></td><td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>";
      $("#Mtable tbody").append(x);
      RowCount++;
    } else {


    }


  });


  $("#Mtable tbody").on('click', 'tr #AddSRow', function() {


    var ColCount = 0;
    $(this).closest("tr").children("td").each(function() {
      ColCount++;
    });
    ColCount = ColCount - 2;

    //alert("Curent Col Count"+ColCount);

    var j = 1;
    //alert("Below Code for multi sub:"+ColCount);
    for (j = 1; j <= ColCount; j++) {
      var z = $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan');
      if (z == null)
        break;
      else
        $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan', 1 + parseInt(z));
    }

    $(this).closest("tr").find(("td:nth-child(" + j + ")")).html("A/O");
    $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan', 2);


    var rowNum = $(this).closest("tr").index();


    var currentrowNum = parseInt(rowNum) - 1;

    CurrentColCount = ColCount;
    CurrentColCount = CurrentColCount - 1;
    //alert("CurentColCount before Loop= "+CurrentColCount+ " Row:"+currentrowNum);

    //alert("Inside Loop :-");
    while (CurrentColCount < 4 && currentrowNum >= 0) {
      var loopCount = 0;
      $('#Mtable tbody tr').eq(currentrowNum).children("td").each(function() {
        loopCount++;
      });
      loopCount = loopCount - 2;

      //alert("Inside Loop, Loop Count :-"+loopCount);

      if (loopCount > CurrentColCount) {
        for (var k = 1; k < (loopCount - CurrentColCount); k++) {
          y = $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan');

          if (y == null) {
            $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 2)
          } else {
            $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 1 + parseInt(y));
          }

        }

        current = loopCount;
      }

      currentrowNum = currentrowNum - 1;
      CurrentColCount = loopCount;
    }

    var i = 1;
    var x = "<tr class='Row'" + RowCount + ">"
    //alert("J="+j+" and Col:-"+ColCount);
    //alert(ColCount);
    for (i = j; i < ColCount; i++) {

      x = x + "<td></td>";
    }
    x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>"
    //$("#Mtable tbody").append(x);
    $(x).insertAfter($(this).closest('tr'));

  });


  $("#Mtable tbody").on('click', 'tr #DelRow', function() {
    alert("Del row Clicked");

  });


});

#Mtable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#Mtable td,
#Mtable th {
  border: 1px solid #ddd;
  padding: 8px;
}

#Mtable tr:nth-child(even) {
  background-color: #f2f2f2;
}

#Mtable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <style></style>
</head>

<body>
  <button id="AddR">
Add row
</button>

  <table id="Mtable">
    <thead>
      <tr>
        <th>G1</th>
        <th>G2</th>
        <th>G3</th>
        <th>G4</th>
        <th>Condition</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</body>

</html>

任何插件或工具也都可以提供帮助。

Answer 1

这是我用来使其工作的代码：-

 // find elements
$(document).ready(function () {
var RowCount = 0;

$("#AddR").click(function () {
    var rowCount1 = $('#Mtable tbody tr').length;



    if (rowCount1 == 0) {
        var x = "<tr><td></td><td></td><td></td><td></td><td><input type='text' class='ICondition'></td><td><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>";

        $("#Mtable tbody").append(x);
        RowCount++;
    }

});


$("#Mtable tbody").on('click', 'tr #DelRow', function () {
    var ColCount = 0;
    $(this).closest("tr").children("td").each(function () {
        ColCount++;
    });
    ColCount = ColCount - 2;

    console.log("Curent Col Count" + ColCount);

    var j = 1;
    for (j = 1; j <= ColCount; j++) {
        var z = $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan');
        if (z == null)
            break;
        else if (z == 2)
        {
            $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan', parseInt(z) - 1);
            $(this).closest("tr").find(("td:nth-child(" + j + ")")).html("");
        }
        else
            $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan',  parseInt(z)-1);
    }
    $(this).closest("tr").find(("td:nth-child(" + (j-1) + ")")).html("");



    var rowNum = $(this).closest("tr").index();
    console.log("Row Number :" + rowNum);

    var currentrowNum = parseInt(rowNum) - 1;

    CurrentColCount = ColCount - 1;
    //Col Count hold number of column already present in that row.

    console.log("CurentColCount before Loop= " + CurrentColCount + " Row:" + currentrowNum);
    while (CurrentColCount < 4 && currentrowNum >= 0) {
        var loopCount = 0;
        $('#Mtable tbody tr').eq(currentrowNum).children("td").each(function () {
            loopCount++;
        });
        loopCount = loopCount - 2;//4

        console.log("Inside Loop, Loop Count :-" + loopCount + "Currentcolcount:- " + CurrentColCount);



        if (loopCount > CurrentColCount) {
            for (var k = 1; k <= (loopCount - CurrentColCount) && k <= (loopCount - parseInt(ColCount)) ; k++) {
                y = $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan');

                if (y == null) {
                 //   $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 2)
                }
                else if(y==2) {
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', parseInt(y) - 1);
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).html("");
                }
                else {
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan',parseInt(y)-1);
                }
                console.log("Row Number=" + currentrowNum + " and Col:-" + k + "");
            }


            CurrentColCount = loopCount;
        }

        currentrowNum = currentrowNum - 1;

    }
    $(this).closest('tr').remove();
    var rowCount1 = $('#Mtable tbody tr').length;

    if (rowCount1 == 1) {
        $('#Mtable tbody tr').eq(0).find(("td:last-child")).html("<button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button>");


    }

});


$("#Mtable tbody").on('click', 'tr #AddRow', function () {
    //var x= $(this).closest("tr").find(("td:nth-child(1)")).attr('rowspan');
    var ColCount = 0;
    $(this).closest("tr").children("td").each(function () {
        ColCount++;
    });
    ColCount = ColCount - 2;

    console.log("Curent Col Count" + ColCount);

    var j = 1;
    for (j = 1; j <= ColCount; j++) {
        var z = $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan');
        if (z == null)
            break;
        else
            $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan', 1 + parseInt(z));
    }



    var rowNum = $(this).closest("tr").index();
    console.log("Row Number :" + rowNum);

    var currentrowNum = parseInt(rowNum) - 1;

    CurrentColCount = ColCount - 1;
    //Col Count hold number of column already present in that row.

    console.log("CurentColCount before Loop= " + CurrentColCount + " Row:" + currentrowNum);
    while (CurrentColCount < 4 && currentrowNum >= 0) {
        var loopCount = 0;
        $('#Mtable tbody tr').eq(currentrowNum).children("td").each(function () {
            loopCount++;
        });
        loopCount = loopCount - 2;//4

        console.log("Inside Loop, Loop Count :-" + loopCount + "Currentcolcount:- " + CurrentColCount);



        if (loopCount > CurrentColCount) {
            for (var k = 1; k <= (loopCount - CurrentColCount) && k <= (loopCount - parseInt(ColCount)) ; k++) {
                y = $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan');

                if (y == null) {
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 2)
                }
                else {
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 1 + parseInt(y));
                }
                console.log("Row Number=" + currentrowNum + " and Col:-" + k + "");
            }


            CurrentColCount = loopCount;
        }

        currentrowNum = currentrowNum - 1;

    }
    var i = 1;
    var x = "<tr class='Row'" + RowCount + ">"
    // console.log("J="+j+" and Col:-"+ColCount);
    // console.log(ColCount);
    var counter = 0;
    for (i = j; i <= ColCount; i++) {
        counter++;
        x = x + "<td></td>";
    }
    if (counter == 4)
        x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>"

    else if (counter == 0)
        x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='DelRow'>Del Row</button></td></tr>"

    else

        x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>"
    //$("#Mtable tbody").append(x);
    console.log(counter);
    $(x).insertAfter($(this).closest('tr'));


    if (j == (ColCount+1)) {
        $('#Mtable tbody tr').eq(parseInt(rowNum)).find(("td:last-child")).html("<button id='AddRow'>Add Row</button><button id='DelRow'>Del Row</button></td>");
    }



});


$("#Mtable tbody").on('click', 'tr #AddSRow', function () {


    var ColCount = 0;
    $(this).closest("tr").children("td").each(function () {
        ColCount++;
    });
    ColCount = ColCount - 2;

    console.log("Curent Col Count" + ColCount);

    var j = 1;
    for (j = 1; j <= ColCount; j++) {
        var z = $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan');
        if (z == null)
            break;
        else
            $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan', 1 + parseInt(z));
    }

    $(this).closest("tr").find(("td:nth-child(" + j + ")")).html("<select><option val=''></option><option val='And'>And</option><option val='Or'>Or</option></select>");
    $(this).closest("tr").find(("td:nth-child(" + j + ")")).attr('rowspan', 2);
    console.log("Value of J:" + j);


    var rowNum = $(this).closest("tr").index();
    console.log("Row Number :" + rowNum);

    var currentrowNum = parseInt(rowNum) - 1;

    CurrentColCount = ColCount - 1;
    //Col Count hold number of column already present in that row.

    console.log("CurentColCount before Loop= " + CurrentColCount + " Row:" + currentrowNum);
     while (CurrentColCount < 4 && currentrowNum >= 0) {
        var loopCount = 0;
        $('#Mtable tbody tr').eq(currentrowNum).children("td").each(function () {
            loopCount++;
        });
        loopCount = loopCount - 2;//4

        console.log("Inside Loop, Loop Count :-" + loopCount + "Currentcolcount:- " + CurrentColCount);



        if (loopCount > CurrentColCount) {
            for (var k = 1; k <= (loopCount - CurrentColCount) && k <= (loopCount - parseInt(ColCount)) ; k++) {
                y = $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan');

                if (y == null) {
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 2)
                }
                else {
                    $('#Mtable tbody tr').eq(currentrowNum).find(("td:nth-child(" + k + ")")).attr('rowspan', 1 + parseInt(y));
                }
                console.log("Row Number=" + currentrowNum + " and Col:-" + k + "");
            }


            CurrentColCount = loopCount;
        }

        currentrowNum = currentrowNum - 1;

    }

    var i = 1;
    var x = "<tr class='Row'" + RowCount + ">"
    // console.log("J="+j+" and Col:-"+ColCount);
    // console.log(ColCount);
    var counter = 0;
    for (i = j; i < ColCount; i++) {
        counter++;
        x = x + "<td></td>";
    }
    if (counter == 4)
        x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>"

    else if(counter==0)
        x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='DelRow'>Del Row</button></td></tr>"

            else

    x = x + "<td><input type='text' class='ICondition'></td><td><button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td></tr>"
    //$("#Mtable tbody").append(x);
    console.log (counter);
    $(x).insertAfter($(this).closest('tr'));


    if (j == ColCount) {
         $('#Mtable tbody tr').eq(parseInt(rowNum)).find(("td:last-child")).html("<button id='AddRow'>Add Row</button><button id='DelRow'>Del Row</button></td>");
    }

    if (rowNum == 0 && j < ColCount) {
        $('#Mtable tbody tr').eq(0).find(("td:last-child")).html("<button id='AddRow'>Add Row</button><button id='AddSRow'>Add Subrow</button><button id='DelRow'>Del Row</button></td>");

    }
    else if (rowNum == 0 && j == ColCount)
    {
        $('#Mtable tbody tr').eq(0).find(("td:last-child")).html("<button id='AddRow'>Add Row</button><button id='DelRow'>Del Row</button></td>");

    }

});





});

HTML相同：-

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="Script.js"></script>
    <style type="text/css">
        #Mtable {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

            #Mtable td, #Mtable th {
                border: 1px solid #ddd;
                padding: 8px;
            }

            #Mtable tr:nth-child(even) {
                background-color: #f2f2f2;
            }


            #Mtable th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #4CAF50;
                color: white;
            }
    </style>


</head>

<body>
    <button id="AddR">
        Add row
    </button>

    <table id="Mtable">
        <thead>
            <tr>
                <th>G1</th>
                <th>G2</th>
                <th>G3</th>
                <th>G4</th>
                <th>Condition</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>