按钮上新添加的行在第二行

时间:2017-09-08 07:46:59

标签: javascript html

我有嵌套表父表和子表。如果需要,两个表都可以在按钮单击时添加行。我面临的问题是,当在父表中添加行然后在该行子表按钮不起作用时。它们适用于父表中第一行的子表,而不适用于第二行。请参阅片段进行演示。

  function addRow(tableID) {

      var table = document.getElementById(tableID);

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

      var colCount = table.rows[1].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;
          case "select-one":
              newcell.childNodes[0].selectedIndex = 0;
              break;
        }
      }
    }

    function deleteRow(tableID) {
      try {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;

      for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
          if(rowCount <= 1) {
            alert("Cannot delete all the rows.");
            break;
          }
          table.deleteRow(i);
          rowCount--;
          i--;
        }


      }
      }catch(e) {
        alert(e);
      }
    }
    
     function addRow1(tableID) {

      var table = document.getElementById(tableID);

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

      var colCount = table.rows[1].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;
          case "select-one":
              newcell.childNodes[0].selectedIndex = 0;
              break;
        }
      }
    }

    function deleteRow1(tableID) {
      try {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;

      for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
          if(rowCount <= 1) {
            alert("Cannot delete all the rows.");
            break;
          }
          table.deleteRow(i);
          rowCount--;
          i--;
        }


      }
      }catch(e) {
        alert(e);
      }
    }
table {
    border-collapse: collapse;
    width: 100%;
    border:1px solid #1E90FF;
}

th, td {
    text-align: left;
    padding: 8px;
    border:1px solid #1E90FF;

}



th {
    background-color: #1E90FF;
    color: white;
}
 <TABLE id="dataTable">
                  <thead>
                  <tr>
                  <th style="text-align: center;">&nbsp;Select&nbsp;</th>    
                  <th style="text-align: center;">&nbsp;<b>Size</b>&nbsp;</th>
                  <th style="text-align: center;">&nbsp;<b>Color & Quantity</b>&nbsp;</th>
                  </tr>
                  </thead>
                  
                  <tbody>
                  <tr id='C1' class='customer'>
                  <td><input type="checkbox" name="chk"/></td>
                  <td><select  name="size[]" id="size" required="" >
                  <option value="">Select Size</option></select></td>
                  <td>

                  <TABLE style="margin-top: 20px;" id="dataTable1" width="400px" border="1">
                  <thead>
                  <th>&nbsp;Select&nbsp;</th>    
                  <th>&nbsp;<b>Color&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity</b>&nbsp;</th>  
                  </thead> 
                  <TR>
                  <TD><INPUT type="checkbox" name="chk"/></TD>
                  <TD>
                  <select name="color[]" required="" >
                    <option value="">Select Color</option>
                    <option value="Red">Red</option>
                     <option value="Green">Green</option>  
                      <option value="Blue">Blue</option>  
                       <option value="Black">Black</option>  
                    
                  </select>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="number" name="dress_quantity[]" class="qty1" placeholder="Size Quantity" value="" required="">  
                  </TD>
                  </TR>
                  </TABLE>
                  
                  <INPUT type="button" value="Add Row" onclick="addRow1('dataTable1')" />
                  <INPUT type="button" value="Delete Row" onclick="deleteRow1('dataTable1')" />
                  </td>
                  </tr>
                  </tbody>
                  </TABLE>
                  <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
                  <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

1 个答案:

答案 0 :(得分:1)

<强>问题:

您正在将父HTML的HTML复制/克隆到子行,并且这反过来将父ID(基于您的代码的第一行)分配给子行。

addRow方法导致问题的代码:

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

<强>解决方案:

点击父Add Row按钮时,为新的子表和按钮分配不同的ID。

addRow方法中的以下行替换为:

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

if (i == colCount - 1) //last column which adds child table
{
    //Get child table id of first row
    var tableID = table.rows[1].cells[i].childNodes[1].getAttribute("id"); 

    //Replace all occurances of parent table id's with new unique table id for child table before writing the information to DOM
    newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(new RegExp(tableID,"g"), "dataTable" + Math.floor((Math.random() * 1000) + 1));
}
else  //For other columns there is no need to assign unique id for controls
    newcell.innerHTML = table.rows[1].cells[i].innerHTML;

注意:我使用Math.floor((Math.random() * 1000) + 1))生成随机数。您可能想要更改为自己的逻辑。

&#13;
&#13;
function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);

	var colCount = table.rows[1].cells.length;

	for (var i = 0; i < colCount; i++) {
		var newcell = row.insertCell(i);

		if (i == colCount - 1) //last column
		{
			//Get child table id of first row
			var tableID = table.rows[1].cells[i].childNodes[1].getAttribute("id"); 
			newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(new RegExp(tableID,"g"), "dataTable" + Math.floor((Math.random() * 1000) + 1));
		}
		else
			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;
			case "select-one":
				newcell.childNodes[0].selectedIndex = 0;
				break;
		}
	}
}

function deleteRow(tableID) {
	try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;

		for (var i = 0; i < rowCount; i++) {
			var row = table.rows[i];
			var chkbox = row.cells[0].childNodes[0];
			if (null != chkbox && true == chkbox.checked) {
				if (rowCount <= 1) {
					alert("Cannot delete all the rows.");
					break;
				}
				table.deleteRow(i);
				rowCount--;
				i--;
			}
		}
	} catch (e) {
		alert(e);
	}
}

function addRow1(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	var colCount = table.rows[1].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;
			case "select-one":
				newcell.childNodes[0].selectedIndex = 0;
				break;
		}
	}
}

function deleteRow1(tableID) {
	try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;

		for (var i = 0; i < rowCount; i++) {
			var row = table.rows[i];
			var chkbox = row.cells[0].childNodes[0];
			if (null != chkbox && true == chkbox.checked) {
				if (rowCount <= 1) {
					alert("Cannot delete all the rows.");
					break;
				}
				table.deleteRow(i);
				rowCount--;
				i--;
			}
		}
	} catch (e) {
		alert(e);
	}
}
&#13;
<style type="text/css">
	table {
		border-collapse: collapse;
		width: 100%;
		border: 1px solid #1E90FF;
	}

	th,
	td {
		text-align: left;
		padding: 8px;
		border: 1px solid #1E90FF;
	}

	th {
		background-color: #1E90FF;
		color: white;
	}
</style>

<TABLE id="dataTable">
	<thead>
		<tr>
			<th style="text-align: center;">&nbsp;Select&nbsp;</th>
			<th style="text-align: center;">&nbsp;<b>Size</b>&nbsp;</th>
			<th style="text-align: center;">&nbsp;<b>Color & Quantity</b>&nbsp;</th>
		</tr>
	</thead>

	<tbody>
		<tr id='C1' class='customer'>
			<td><input type="checkbox" name="chk" /></td>
			<td><select name="size[]" id="size" required="">
			  <option value="">Select Size</option></select></td>
			<td>
				<TABLE style="margin-top: 20px;" id="dataTable1" width="400px" border="1">
					<thead>
						<th>&nbsp;Select&nbsp;</th>
						<th>&nbsp;<b>Color&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity</b>&nbsp;</th>
					</thead>
					<TR>
						<TD>
							<INPUT type="checkbox" name="chk" />
						</TD>
						<TD>
							<select name="color[]" required="">
								<option value="">Select Color</option>
								<option value="Red">Red</option>
								<option value="Green">Green</option>  
								<option value="Blue">Blue</option>  
								<option value="Black">Black</option>  
							</select> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="number" name="dress_quantity[]" class="qty1" placeholder="Size Quantity" value="" required="">
						</TD>
					</TR>
				</TABLE>

				<INPUT type="button" value="Add Row" onclick="addRow1('dataTable1')" />
				<INPUT type="button" value="Delete Row" onclick="deleteRow1('dataTable1')" />
			</td>
		</tr>
	</tbody>
</TABLE>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
&#13;
&#13;
&#13;