javascript - 如何在选中复选框的行之后插入行

Question

我需要能够在检查的行之后直接插入一行。下面列出了 HTML，这里是 JSFiddle 。基本上，如果选中第 1 行，我需要在第 1 行和第 2 行之间插入一行，或者如果选中最后一行，我需要追加一个新行。我能够编写一个脚本，在表末尾添加一行，但这不是我需要的。

<INPUT type="button" value="Add Row" onclick="addRow('requestTable')" />

<TABLE id="requestTable">
  <tr>
    <th></th>
    <th>Example column</th>
    <th>Example column 2</th>
  </tr>

  <tr>
    <td><input type="checkbox" /></td>
    <td><input name="Example1" /></td>
    <td><input name="Example2" /></td>
  </tr>

  <tr>
    <td><input type="checkbox" /></td>
    <td><input name="Example1" /></td>
    <td><input name="Example2" /></td>
  </tr>
</TABLE>

<script>
function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                }
            }
        }
</script>

Answer 1

这将按照您的要求进行:它将在选中的行之后添加一个新行，如果选中多行，则不会添加一行:

Html:我修改了它，在添加按钮上有一个 id 属性，用于添加事件处理程序，并向您的复选框添加了一个公共(public)类名。:

<INPUT id="btnAdd" type="button" value="Add Row" />

<TABLE id="requestTable">
  <tr>
    <th></th>
    <th>Example column</th>
    <th>Example column 2</th>
  </tr>

  <tr>
    <td><input class="chkInfo" type="checkbox" /></td>
    <td><input name="Example1" /></td>
    <td><input name="Example2" /></td>
  </tr>

  <tr>
    <td><input class="chkInfo" type="checkbox" /></td>
    <td><input name="Example1" /></td>
    <td><input name="Example2" /></td>
  </tr>
</TABLE>

脚本:

//On DOM Ready add the click event to the Add Button
$(function(){
   //Uses JQuery's .on to add eventHandler to the button when the DOM is ready
   $('#btnAdd').on('click', function(){
      addRow("requestTable"); 
   });
});

//Modified the addRow metthod to look for the checked checkboxes
//with className of chkInfo, if the number of checked checkboxes is greater
//than 1 it does nothing, else it finds the parent row of the checkbox which is checked with JQuery's .closest()
//and uses JQuery's .after() to append the row after the checked row
function addRow(tableID) {
    const checkboxes = $('#' + tableID).find('.chkInfo:checked');
    if($(checkboxes).length === 1){
       const newRow = '<tr><td><input class="chkInfo" type="checkbox" /></td><td><input name="Example1" /></td><td><input name="Example2" /></td></tr>';
       $($(checkboxes)[0]).closest('tr').after(newRow);
    } else{
       return;
    }

}

工作中的 JSFiddle ( https://jsfiddle.net/Lf5cbdt0/ )