使用带有JQUERY的复选框添加/删除多行

Question

I have snippet in javascript that add/remove multiple rows within a table. 我在javascript中有一段代码可以添加/删除表中的多行。 I would like to implement the same thing into JQUERY. 我想在JQUERY中实现相同的功能。 At the moment, the checkboxes does'nt work, but I would like them to work for the sake of userbility. 目前，该复选框不起作用，但是我希望它们为方便起见而起作用。 I got no clue on jquery at moment. 我暂时对jquery不了解。 Would you help on the implementation. 您对实施有帮助吗？ Fiddle: http://jsfiddle.net/ronn_nasso/qN2Z8/ 小提琴： 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>

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

Answer 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
 });

SAMPLE 样品

Answer 2

Try following code 尝试以下代码

<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>

Link to fiddle here 链接到这里的小提琴

Answer 3

updated your code to this: 将您的代码更新为：

$("#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');       
});

working fiddle here: http://jsfiddle.net/qN2Z8/5/ (check this fiddle) 在这里工作的小提琴： http : //jsfiddle.net/qN2Z8/5/ （检查此小提琴）

i hope it helps. 我希望这会有所帮助。

使用带有JQUERY的复选框添加/删除多行

问题描述

3 个解决方案

解决方案1
1

解决方案2
0 2013-09-10 11:38:04

解决方案3
0 2013-09-10 11:44:48

使用带有JQUERY的复选框添加/删除多行

问题描述

3 个解决方案

解决方案1 1

解决方案2 0 2013-09-10 11:38:04

解决方案3 0 2013-09-10 11:44:48

解决方案1
1

解决方案2
0 2013-09-10 11:38:04

解决方案3
0 2013-09-10 11:44:48