Question

我对jquery很新。我有以下代码。在这里，我想在Fill 3中单击添加按钮获取表中的新行。我成功添加该行，但是当我获得新的div时，我想在填充3中单击添加按钮时在表中获取新行。添加到错误的div。

有人可以告诉我，我在这里做了什么错误吗？

＆＃13;

var id = 0; //global id to create unique id

$(document).ready(function() {
  //attach click event to element/button with id add and remove
  $("#add,#remove").on('click', function() {
	var currentElemID = $(this).attr('id'); //get the element clicked

	if (currentElemID == "add") { //if it is add elem
	  var cloneParent = $("#dataTes").clone(); //clone the dataTes element
	  id=$("div[id^=dataTes]").length + 1;//get the count of dataTes element
	  //it will be always more than last count each time
	  cloneParent.find('[id]').each(function() {
	   //loop through each element which has id attribute in cloned set and replace them 
	   //with incremented value
		var $el = $(this); //get the element
		$el.attr('id', $el.attr('id') + id);
		//ids would now be add1,add2 etc.,
	  });
	  cloneParent.attr('id', cloneParent.attr('id') + id);//replace cloneParent id
	  cloneParent.appendTo('#result');//append the element to fieldset
	  $("#remove").show();//show remove button only if there is more than one dataTes element
	} else {
	  $("div[id^=dataTes]:last").remove();
	  //just remove the last dataTes
	  //[id^=dataTes]:last annotates remove last div whose id begins with dataTes
	  //remember we have id like dataTes1,dataTes2 etc
	  if($("div[id^=dataTes]").length==1){
		 //check if only one element is present
		 $("#remove").hide();//if yes hide the remove button
	  }
	}
  });

});

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[0].cells[i].innerHTML;
        }

    }

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount > 1) {
        table.deleteRow(rowCount - 1);
    }
    else {
        alert("Tidak dapat menghapus semua baris!");
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="result">
  <legend>Test</legend>
  <input type="submit" class="button" id="add" value="+" title="#">
  <input type="submit" class="button" id="remove" value="-" style="display:none;" title="#">

  <!--hide the remove button with display:none initially-->

  <div id="dataTes">
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
  <tr>
    <td width="100px">Test</td>
    <td width="2px">:</td>
    <td>
      <input type="text" name="usrname">
    </td>
  </tr>

  <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
    <tr>
      <td width="2px"></td>
      <td width="100px">Fill 1</td>
      <td width="2px">:</td>
      <td>
        <input type="text" name="usrname">
      </td>
    </tr>
    <tr>
      <td width="2px"></td>
      <td width="100px">Fill 2</td>
      <td width="2px">:</td>
      <td>
        <input type="text" name="usrname">
      </td>
    </tr>
    <table id="dataIP" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
      <tr>
        <td width="2px"></td>
        <td width="100px">Fill 3</td>
        <td width="2px">:</td>
        <td width="2px">
          <input type="text" name="usrname">
        </td>
		<td>
			<input type="submit" class="button" value="+" onClick="addRow('dataIP')" title = "#">
			<input type="submit" class="button" value="-" onClick="deleteRow('dataIP')" title = "#">
		</td>
      </tr>
    </table>
  </table>

</table>
  </div>
</fieldset>

＆＃13;

提前致谢！

Answer 1

<table id="dataIP" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
      <tr>
        <td width="2px"></td>
        <td width="100px">Fill 3</td>
        <td width="2px">:</td>
        <td width="2px">
          <input type="text" name="usrname">
        </td>
        <td>
            <input type="submit" class="button" value="+" onClick="addRow('dataIP')" title = "#">
            <input type="submit" class="button" value="-" onClick="deleteRow('dataIP')" title = "#">
        </td>
      </tr>
    </table>`

所以我们在这里做的是我们将更改addRow（this）而不是addRow（＆＃39; dataIp＆＃39;）因为我们知道＆＃34;这个＆＃34;关键字在传递元素的ID方面具有高优先级。＆＃34; this＆＃34;关键字有一般用途vs将id传递给函数..只需尝试将所有参数更改为＆＃34; this＆＃34;。

Answer 2

function addRow(tableID) {
  var par = tableID.parentNode.parentNode.parentNode.id;
  var table = document.getElementById(par);
  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[0].cells[i].innerHTML;
}

当我在输入中更改add和delete函数的参数时，这就是我所做的事情我得到了param父节点元素，用于父元素中特定元素的目的...

}

Answer 3

顺便说一句..你必须将你的第三个索引表改为tbody。获取父节点的结果将是一个tbody。因为将表放在表中是冗余窗口，所以将其读作tbody 我们必须遵守规则 <table> <tbody> </tbody> <tfoot> </tfoot> </table>

Jquery - 将新行表添加到错误的div中

3 个答案: