With the Js implementation of the dynamic increase table example itself
- 2020-03-26 21:35:04
- OfStack
function addEvent (o,c,h){
if(o.attachEvent){
o.attachEvent('on'+c,h);
}else{
o.addEventListener(c,h,false);
}
return true;}
var selectRow;//Page-level js variable that stores the selected row and assigns it to the pop-up window
function addnode()
{
var table=document.getElementById("Dy_table");
var tr=table.insertRow();
var cell0=tr.insertCell();
var cell1=tr.insertCell();
var cell2=tr.insertCell();
var cell3=tr.insertCell();
var cell4=tr.insertCell();
var cell5=tr.insertCell();
var cell6=tr.insertCell();
var cell7=tr.insertCell();
var cell8=tr.insertCell();
var cell9=tr.insertCell();
var hidden1=document.createElement("<input name='Dy_hd_cpdm' onpropertychange='textChange(this)' type='hidden' >");
var hidden2=document.createElement("<input name='Dy_hd_sx' type='hidden' >");
var hidden3=document.createElement("<input name='Dy_hd_mxid' type='hidden' >");
var hidden4=document.createElement("<input name='Dy_hd_rowState' type='hidden' value='1'>");//Line status
var hidden5=document.createElement("<input name='Dy_hd_dj' type='hidden' value='0'>");//Hide the unit price
var input1=document.createElement("<Input type='text' ondblclick='selectLj(this)' style='width:100px' name='Dy_text_ljh' >");
var input2=document.createElement("<Input type='text' style='width:100px' name='Dy_text_cpmc' >");
var input3=document.createElement("<Input type='text' onKeyPress='onlyNumberIn1(this)' style='width:40px' value='1' name='Dy_text_sl' >");
var input4=document.createElement("<Input type='text' onKeyPress='onlyNumberIn(this)' style='width:60px' name='Dy_text_dj' >");
var input5=document.createElement("<Input type='text' style='width:100px' name='Dy_text_sccj' >");
var input6=document.createElement("<select name='Dy_select_clly' >");
var input7=document.createElement("<Input type='text' readonly='true' style='width:40px' name='Dy_text_glf' >");
var input8=document.createElement("<Input type='text' readonly='true' style='width:60px' name='Dy_text_je' >");
var input9=document.createElement("<Input type='button' name='del' value=' delete In addition to ' class='input-button' onclick='delnode1(this)' >")
var oOption1=document.createElement("option");
var oOption2=document.createElement("option");
var oOption3=document.createElement("option");
var oOption4=document.createElement("option");
input6.options.add(oOption1);
input6.options.add(oOption2);
input6.options.add(oOption3);
input6.options.add(oOption4);
oOption1.innerText=" The contract a ";
oOption1.value=" The contract a ";
oOption2.innerText=" Purchased components ";
oOption2.value=" Purchased components ";
oOption3.innerText=" The spare parts department ";
oOption3.value=" The spare parts department ";
oOption4.innerText=" Manufacturer for a ";
oOption4.value=" Manufacturer for a ";
var rowIndex;
rowIndex = table.rows.length-2;
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//Number of rows visible to the user
cell0.innerText=parseInt(rowCount)+1;
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount)+1;
hidden2.value = parseInt(table.rows[0].cells[0].getElementsByTagName("input")[1].value) + 1;
table.rows[0].cells[0].getElementsByTagName("input")[1].value=hidden2.value;
cell1.appendChild(input1);
cell1.appendChild(hidden1);//Product code
cell1.appendChild(hidden2);//Internal order
cell1.appendChild(hidden3);//The Id of the row for modification and deletion
cell1.appendChild(hidden4);//State of the row
cell2.appendChild(input2);
cell3.appendChild(input3);
cell4.appendChild(input4);
cell4.appendChild(hidden5);
cell5.appendChild(input5);
cell6.appendChild(input6);
cell9.appendChild(input9);
cell8.appendChild(input8);
cell7.appendChild(input7);
var tt=function(obj)
{
return function(){textChange(obj);}
}
var ttt=function(obj)
{
return function(){selectChange(obj);}
}
addEvent(input1,"change",tt(input1));
addEvent(input2,"change",tt(input1));
addEvent(input3,"change",tt(input1));
addEvent(input4,"change",tt(input1));
addEvent(input5,"change",tt(input1));
addEvent(input6,"change",ttt(input6));
addEvent(input7,"change",tt(input1));
// addEvent(input8,"change",tt(input1));
}
function delnode()//Delete the event
{
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//Number of rows visible to the user
var row;//Save the last visible row
for( var i=table.rows.length-1; i>=0 ;i--)
{
if(table.rows[i].style.display!="none")
{
row=table.rows[i];
break;
}
}
var rowId=row.cells[1].getElementsByTagName("input")[3].value;
if( rowCount > 1 )
{
if(rowId=="")//When new rows are not written to the database, they are deleted
{
row.removeNode(true);
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
}
else//If you need to delete from the database, set the delete tag
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount-1);
}
}
else
{
if(rowId == "")//Empty when new rows are not written to the database
{
row.cells.item(1).getElementsByTagName("input")[0].value="";
row.cells.item(1).getElementsByTagName("input")[1].value="";
row.cells.item(2).getElementsByTagName("input")[0].value="";
row.cells.item(3).getElementsByTagName("input")[0].value="1";
row.cells.item(4).getElementsByTagName("input")[0].value="";
row.cells.item(7).getElementsByTagName("input")[0].value="";
row.cells.item(5).getElementsByTagName("input")[0].value="";
row.cells.item(6).getElementsByTagName("select")[0].selectedIndex=0;
}
else//If you need to delete from the database, set the delete tag
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
addnode();
}
}
setClf();
}
function delnode1(o)//Delete the event
{
var tr=o.parentElement.parentElement;
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//Number of rows visible to the user
var rowId=tr.cells[1].getElementsByTagName("input")[3].value;
if( rowCount > 1 )
{
if(rowId=="")//When new rows are not written to the database, they are deleted
{
tr.removeNode(true);
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
}
else
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount-1);
}
}
else
{
if(rowId=="")//When new rows are not written to the database, clean them up
{
tr.cells.item(1).getElementsByTagName("input")[0].value="";
tr.cells.item(1).getElementsByTagName("input")[1].value="";
tr.cells.item(2).getElementsByTagName("input")[0].value="";
tr.cells.item(3).getElementsByTagName("input")[0].value="1";
tr.cells.item(4).getElementsByTagName("input")[0].value="";
tr.cells.item(7).getElementsByTagName("input")[0].value="";
tr.cells.item(5).getElementsByTagName("input")[0].value="";
tr.cells.item(6).getElementsByTagName("select")[0].selectedIndex=0;
}
else//If you need to delete from the database, set the delete tag
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parseInt(rowCount) - 1;
addnode();
}
}
//The following loop is used to update the table row number when deleted from the middle
rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;
for( var i= 1,p = 1; i < table.rows.length ;i++)
{
if(table.rows[i].style.display!="none")
{
table.rows[i].cells[0].innerText = p;
p++;
}
}
setClf();
}
//An event that occurs when a change is made
function textChange(o)
{
setClf();
var tr=o.parentElement.parentElement;
var rowState = tr.cells[1].getElementsByTagName("input")[4].value;
if( rowState == "1")
return;
else
tr.cells[1].getElementsByTagName("input")[4].value = "3";
}
//The drop-down option to change setClf() is to calculate the amount, which is not given
function selectChange(o)
{
var tr=o.parentElement.parentElement;
var glf = tr.cells[7].getElementsByTagName("input")[0];
var dj = tr.cells[4].getElementsByTagName("input")[0];
var dj1 = tr.cells[4].getElementsByTagName("input")[1];
if( o.selectedIndex==0)//The contract a
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==1)//Purchased components
{
glf.value='0.20';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==2)//The spare parts department
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==3)//Manufacturer for a
{
glf.value='0.00';
dj.value='0.00';
dj.readOnly=true;
setClf();
return;
}
}
//Validate the data before committing to ensure that there are no duplicate rows
function checkSameData()
{
var table=document.getElementById("Dy_table");
// var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//Number of rows visible to the user
for( var i= 1; i < table.rows.length ;i++)
{
if(table.rows[i].style.display == "none"||table.rows[i].cells[1].getElementsByTagName("input")[1].value=="") continue;
for( var p= i + 1; p < table.rows.length ;p++)
{
if(table.rows[p].style.display == "none") continue;
if(table.rows[i].cells[1].getElementsByTagName("input")[1].value.replace(/s+$/g,"") ==
table.rows[p].cells[1].getElementsByTagName("input")[1].value.replace(/s+$/g,""))
{alert(" Duplicate items exist in parts, cannot be saved! ");return false;}
}
}
return true;
}
//Is the part window open
var dialogWin;
function selectLj(o)//Selected parts
{
if(dialogWin == null)
{
selectRow = o.parentElement.parentElement;//Assigns a row value to a global variable
dialogWin = window.showModelessDialog("../jddgl/Select_lj.aspx",window,
"center:yes;dialogWidth:550px;dialogHeight:400px;help:no;status:no;");
}
}
= = = = = = =
The front desk page
<table id="Dy_table" width="760" cellpadding="0" style=" border-top:solid 1px #9cf" class="tableStyle" cellspacing="0">
<tr>
<td> The serial number <input id="pageState" name="pageState" type="hidden" value="0" /> <%-- Page state --%>
<input id="pageRows" name="pageRows" type="hidden" value="1" /> <%-- Total number of lines, including hidden --%>
<asp:HiddenField ID="HF_tableRows" runat="server" Value="1" /> <%-- Number of rows visible to the user --%>
</td>
<td> Part number </td>
<td> Part name </td>
<td> The number of </td>
<td> The unit price </td>
<td> The manufacturer </td>
<td> Material source </td>
<td> The management fee </td>
<td> A combined </td>
<td> operation </td>
</tr>
<tr><td>1</td><td><input name='Dy_text_ljh' style='width:100px' ondblclick='selectLj(this)' onchange='textChange(this)' type='text' />
<input name='Dy_hd_cpdm' type='hidden' onpropertychange='textChange(this)' title=' Product code ' />
<input name='Dy_hd_sx' type='hidden' value='1' title=' Internal order ' />
<input name='Dy_hd_mxid' type='hidden' value='' title=' The bank's Id For modification and deletion ' />
<input name='Dy_hd_rowState' type='hidden' value='1' title=' State of the row ' />
</td><td><input name='Dy_text_cpmc' style='width:100px' onchange='textChange(this)' type='text' /></td>
<td><input name='Dy_text_sl' value='1' onKeyPress='onlyNumberIn1(this)' onchange='textChange(this)' style='width:40px' type='text' /></td>
<td><input name='Dy_text_dj' onKeyPress='onlyNumberIn(this)' onchange='textChange(this)' style='width:60px' type='text' /><input name='Dy_hd_dj' type='hidden' value='0'/></td>
<td><input name='Dy_text_sccj' onchange='textChange(this)' style='width:100px' type='text' /></td>
<td><select name='Dy_select_clly' onchange='selectChange(this)' ><option value=' The contract a '> The contract a </option>
<option value=' Purchased components '> Purchased components </option><option value=' The spare parts department '> The spare parts department </option>
<option value=' Manufacturer for a '> Manufacturer for a </option></select></td>
<td><input name='Dy_text_glf' readonly='true' onchange='textChange(this)' style='width:40px' type='text' value='0.00' /></td>
<td><input name='Dy_text_je' readonly='true' style='width:60px' type='text' /></td>
<td><input name='del' type='button' value=' delete In addition to ' class='input-button' onclick='delnode1(this)' /></td></tr>
</table>
The project needs this kind of function, before and after the use of several ways, I think this is better (after all, I spent a lot of time to write, ha ha), js is not very skilled, I hope a friend can help improve and improve. Failed work, not compatible with FF, shitty!