2

我在 javascript 中有片段，可以在表格中添加/删除多行。我想在 JQUERY 中实现同样的事情。目前，复选框不起作用，但我希望它们能够为用户提供方便。我现在对jquery一无所知。你能帮助实施吗？小提琴：http: //jsfiddle.net/ronn_nasso/qN2Z8/

<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <link rel="stylesheet" type="text/css" href="addRemove.css"/>
    <script language="JavaScript" type="text/javascript">
function hasClass(el, cssClass) {
  return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var rowNumber = 1;

function addRow(tableID) {
  var counter = document.getElementById(tableID).rows.length-1;
  var row = document.getElementById(tableID);
  var newRow0 = row.rows[1].cloneNode(true);
  var newRow1 = row.rows[counter].cloneNode(true);

  // Increment
  rowNumber ++;
  newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;

  // Update the child Names
  var items = newRow0.getElementsByTagName("input");
  for (var i = 0; i < items.length; i++) {
    items[i].value = null;
    items[i].name = counter + '_' + items[i].name;
  }

  var refRow = row.getElementsByTagName('tbody')[0];
  refRow.insertBefore(newRow0, refRow.nextSibling);
  refRow.insertBefore(newRow1, refRow.nextSibling);
}

function deleteRow(tableID) {
  var table =  document.getElementById(tableID);
  var i = table.rows.length - 1;

  while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
    table.deleteRow(i)
    i--;
  }
  if (2 < i) {
    table.deleteRow(i)
    rowNumber --;
  }
}

function addChildRow(e, tableID) {
  var table = document.getElementById(tableID);
  var newRow = table.rows[0].cloneNode(true);

  // Increment
  if (e > 0)

  if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)) 
    var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
  else
    var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)

  newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;

  // Update the child Names
  var items = newRow.getElementsByTagName("input");
  for (var i = 0; i < items.length; i++) {
    items[i].value = null;
    items[i].name = counter + '_' + items[i].name;
  }

  var i = e;
  while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
    i--;

  var parent = table.rows[i].getElementsByTagName('td');
  parent[0].rowSpan = counter+2;
  parent[1].rowSpan = counter+2;
  parent[2].rowSpan = counter+2;

  var refRow = table.getElementsByTagName('tr')[e-1];
  refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}


function deleteChildRow(e, tableID) {
  var table =  document.getElementById(tableID);
  var i = e;

  while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
    i--;

  if (e-1 > i)
    table.deleteRow(e-1)
}

</script>
</HEAD>

<BODY>
<form action="Untitled-2.php" name="dataTable" method="post">
  <table width="760" id="dataTable" border="1">
    <tr>
      <td width="20">
        <input type="checkbox" name="chk1" />
      </td>
      <td width="12">1</td>
      <td width="200">
        <input type="text" name="txtbox1[]" />
      </td>
      <td width="146">
        <input type="text" name="txtbox2[]" />
      </td>
      <td width="188">
        <input type="text" name="txtbox3[]" />
      </td>
    </tr>

    <tr class="row-parent">
      <td width="22" rowspan="2">
        <input type="checkbox" name="chk" />
      </td>
      <td width="12" rowspan="2">1</td>
      <td width="149" rowspan="2">
        <input type="text" name="txtbox[]" />
      </td>
      <td width="20">
        <input type="checkbox" name="chk1" />
      </td>
      <td width="12">1</td>
      <td width="200">
        <input type="text" name="txtbox1[]" />
      </td>
      <td width="146">
        <input type="text" name="txtbox2[]" />
      </td>
      <td width="188">
        <input type="text" name="txtbox3[]" />
      </td>
    </tr>
    <tr>
      <td width="20">&nbsp;</td>
      <td width="12">&nbsp;</td>
      <td>
        <input type="button" value="Add Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
        <input type="button" value="Delete Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
      </td>
      <td width="146">&nbsp;</td>
      <td width="188">&nbsp;</td>
    </tr>
  </table>
  <input type="button" value="Add Row" onClick="addRow('dataTable')" />
  <input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
</BODY>
</HTML>

小提琴：http: //jsfiddle.net/ronn_nasso/qN2Z8/

4

3 回答 3

1 
 $("#ADD").click(function(){
    $("table").append($("tr:last").clone(true)); 
    //clone the last row and add it to table
    $("tr:last input").val(""); 
    //reset all the inputs in the last row
 });

 $("#DEL").click(function(){
   $("table tr input:checked").parents('tr').remove(); 
  //find the rows with checked check boxes in them and remove them
 });

样本

于 2013-09-10T11:36:06.960 回答
0

将您的代码更新为：

$("#btnAddRow").on("click",function(){
    addRow('dataTable');
});
$("#btnDelRow").on("click",function(){
    deleteRow('dataTable');
});
$("#btnAddChildRow").on("click",function(){
    var index = $(this).closest('tr').index();
    addChildRow(index,'dataTable');
});
$("#btnDelChildRow").on("click",function(){
    var index = $(this).closest('tr').index();
    deleteChildRow(index,'dataTable');       
});

在这里工作小提琴：http: //jsfiddle.net/qN2Z8/5/（检查这个小提琴）

我希望它有帮助。

于 2013-09-10T11:44:48.773 回答
0

试试下面的代码

<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
    <table id="POITable" border="1">
        <tr>
            <td>1</td>
            <td><input type="checkbox" id="chck"/></td>
            <td><input size=25 type="text" id="latbox"/></td>
            <td><input size=25 type="text" id="lngbox" readonly=true/></td>
            <td><input type="button" id="delPOIbutton" value="Delete Row" onclick="deleteRow(this)"/></td>
            <td><input type="button" id="addmorePOIbutton" value="Add Row" onclick="insRow()"/></td>
        </tr>
    </table>

<script>
function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable');
    var new_row = x.rows[0].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    x.appendChild( new_row );
}

</script>

链接到这里小提琴

于 2013-09-10T11:38:04.560 回答