克隆HTML表中的一行，并用新行调用JavaScript函数_Javascript_Html

克隆HTML表中的一行，并用新行调用JavaScript函数

javascript html

克隆HTML表中的一行，并用新行调用JavaScript函数,javascript,html,Javascript,Html,我有一个表，其中有一行，我将两个字段相乘，即数量和比率/数量，得到产品总数。我提供了一个按钮来添加一个新行，它基本上克隆了第一行。现在，我希望克隆的行也具有与第一行相同的产品。我尝试了以下代码： <!DOCTYPE html> <html> <h3 align="center">K J Somaiya College Of Engineering, Vidyavihar, Mumbai-400 077</h3> &l

我有一个表，其中有一行，我将两个字段相乘，即数量和比率/数量，得到产品总数。我提供了一个按钮来添加一个新行，它基本上克隆了第一行。现在，我希望克隆的行也具有与第一行相同的产品。我尝试了以下代码：

    <!DOCTYPE html>
    <html>
    <h3 align="center">K J Somaiya College Of Engineering, Vidyavihar, Mumbai-400 077</h3>
    <h3 align="center">Department Of Information Technology</h3>
    <body>
     <script>
     function WO1() {

     var qty = document.getElementById('qty').value;

var price = document.getElementById('price').value;

answer = (Number(qty) * Number(price)).toFixed(2);  

document.getElementById('totalprice').value = answer;   
}

function WO2() {

var qty = document.getElementById('qty1').value;

var price = document.getElementById('price1').value;

answer = (Number(qty) * Number(price)).toFixed(2);  

document.getElementById('totalprice1').value = answer;   
}

function WO3() {

var qty = document.getElementById('qty2').value;

var price = document.getElementById('price2').value;

answer = (Number(qty) * Number(price)).toFixed(2);

document.getElementById('totalprice2').value = answer;
}
</script>
<script>
function validateNumbe()
{
var x=document.getElementById("floor").value;
if (x==null || x=="")
{
alert("Floor must be entered");
return false;
}
}

function validateN()
{
var x=document.getElementById("lab").value;
if (x==null || x=="")
  {
 alert("Laboratory Name must be entered");
 return false;
  }
}

function validateNumb()
{
var x=document.getElementById("room").value;
if (x==null || x=="")
 {
 alert("Room No must be entered");
 return false;
 }
}

function validateNum()
{
var x=document.getElementById("labi").value;
if (x==null || x=="")
 {
 alert("Name of Laboratory Incharge must be entered");
 return false;
 }
}

function validateNu()
{
var x=document.getElementById("year").value;
if (x==null || x=="")
 {
 alert("Budget for the year must be entered");
  return false;
}
}


</script>
<table width="100%" cellspacing="10">
<tr>
<td align="left">Date:<input type="date" name="date"/></td>
<td align="right">Floor: <input type="text" id="floor" onchange="validateNumbe()"       

onblur="validateNumbe()"/> </td>
</tr>
<tr>
<td align="left">Laboratory Name: <input type="text" id="lab" onchange="validateN()"        

onblur="validateN()"/></td>
<td align="right">Room no: <input type="text" id="room" onchange="validateNumb()"       

onblur="validateNumb()"/></td>
</tr>
<tr>
<td align="left">Name of Laboratory Incharge: <input type="text" id="labi"      

onchange="validateNum()"  onblur="validateNum()"/></td>
<td align="right">Budget for the year: <input type="text" id="year" onchange="validateNu()"     

onblur="validateNu()"/></td>
</tr>
</table>


<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
 <tr>
    <td style="width:10%">Sr No.</td>
    <td>Item Description</td>
    <td>Quantity</td>
    <td>Rate(Inclusive of Taxes)</td>
    <td>Total Cost</td>
  </tr>
  <tr>
    <td>1</td>
    <td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
    <td><input type='text' name='Quantity' id='qty' class="qty" placeholder='Qty' /></td>
    <td><input type='text' name='Rate' id='price' class="price" placeholder='Price (&pound;)'   

onChange="WO1()" /></td>
    <td><input type='text' name='Total' id='totalprice' class="price" placeholder='Total    

Price&nbsp;(&pound;)' /></td>
  </tr>
</table>
 <input type="button" id="addmorePOIbutton" value="Add New Row"/>

 <h3 align="left"><b>Equipment</b><h3>
<table id="POITable1" border="1" width="100%">
    <tr>
        <th style="width:10%">Sr No.</th>
        <th>Item Description</th>
        <th>Quantity</th>
        <th>Rate(Inclusive of Taxes)</th>
        <th>Total Cost</th>
      </tr>
    <tr>
        <td>1</td>
    <td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
    <td><input type='text' name='Quantity' id='qty1' class="qty" placeholder='Qty' /></td>
    <td><input type='text' name='Rate' id='price1' class="price" placeholder='Price (&pound;)'  

onChange="WO2()" /></td>
    <td><input type='text' name='Total' id='totalprice1' class="price" placeholder='Total   

Price&nbsp;(&pound;)' /></td>
  </tr>
</table>
 <input type="button" id="addmorePOIbutton1" value="Add New Row"/>

    <h3 align="left"><b>Furniture</b><h3>
<table id="POITable2" border="1" width="100%">
    <tr>
        <th style="width:10%">Sr No.</th>
        <th>Item Description</th>
        <th>Quantity</th>
        <th>Rate(Inclusive of Taxes)</th>
        <th>Total Cost</th>
      </tr>
    <tr>
        <td>1</td>
    <td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
    <td><input type='text' name='Quantity' id='qty2' class="qty" placeholder='Qty' /></td>
    <td><input type='text' name='Rate' id='price2' class="price" placeholder='Price (&pound;)'  

onChange="WO3()" /></td>
    <td><input type='text' name='Total' id='totalprice2' class="price" placeholder='Total   

Price&nbsp;(&pound;)' /></td>
  </tr>
 </table>
 <input type="button" id="addmorePOIbutton2" value="Add New Row"/>

<script>

 ( function() { // Prevent vars from leaking to the global scope

  var formTable = document.getElementById('POITable');
  var newRowBtn = document.getElementById('addmorePOIbutton');


  newRowBtn.addEventListener('click', insRow, false); //added eventlistener insetad of inline   

onclick-attribute.

  function insRow() {
    var new_row = formTable.rows[1].cloneNode(true),
    numTableRows = formTable.rows.length;

    // Set the row number in the first cell of the row
    new_row.cells[0].innerHTML = numTableRows;

    numTableRows=numTableRows - 1;
    var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
    inp1.name += numTableRows;
    inp1.value = '';

    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.name += numTableRows;
    inp2.value = '';

    var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
    inp3.name += numTableRows;
    inp3.value = '';

    var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
    inp4.name += numTableRows;
    inp4.value = '';

    // Append the new row to the table
    formTable.appendChild( new_row );

  }


  var formTable1 = document.getElementById('POITable1');
  var newRowBtn1 = document.getElementById('addmorePOIbutton1');

  newRowBtn1.addEventListener('click', insRow1, false); //added eventlistener insetad of inline     

onclick-attribute.


  function insRow1() {
    var new_row = formTable1.rows[1].cloneNode(true),
    numTableRows = formTable1.rows.length;

    // Set the row number in the first cell of the row
    new_row.cells[0].innerHTML = numTableRows;

    numTableRows=numTableRows - 1;
    var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
    inp1.name += numTableRows;
    inp1.value = '';

    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.name += numTableRows;
    inp2.value = '';

    var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
    inp3.name += numTableRows;
    inp3.value = '';

    var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
    inp4.name += numTableRows;
    inp4.value = '';

    // Append the new row to the table
    formTable1.appendChild( new_row );


  }





  var formTable2 = document.getElementById('POITable2');
  var newRowBtn2 = document.getElementById('addmorePOIbutton2');

  newRowBtn2.addEventListener('click', insRow2, false); //added eventlistener insetad of inline     

onclick-attribute.


  function insRow2() {
    var new_row = formTable2.rows[1].cloneNode(true),
    numTableRows = formTable2.rows.length;

    // Set the row number in the first cell of the row
    new_row.cells[0].innerHTML = numTableRows;

    numTableRows=numTableRows - 1;
    var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
    inp1.name += numTableRows;
    inp1.value = '';

    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.name += numTableRows;
    inp2.value = '';

    var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
    inp3.name += numTableRows;
    inp3.value = '';

    var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
    inp4.name += numTableRows;
    inp4.value = '';

    // Append the new row to the table
    formTable2.appendChild( new_row );


   }

     })();

  function myfun()
 {


var lun= document.getElementById('POITable').rows.length;
 document.getElementsByName("len")[0].value = lun-1;

   var lun1= document.getElementById('POITable1').rows.length;
 document.getElementsByName("len1")[0].value = lun1-1;

 var lun2= document.getElementById('POITable2').rows.length;
 document.getElementsByName("len2")[0].value = lun2-1;

 }


 function myFunction()
{
window.print();

}

</script>


<input type="hidden" name="len" value="1">

<input type="hidden" name="len1" value="1">
<input type="hidden"  name="len2" value="1">


<table width="100%">
<tr>
<td><br><br><br></td>
<td><br><br><br></td>
<td><br><br><br></td>
</tr>
<tr>
<td align="left">Signature <br>Lab-In-Charge</td>
<td align="center">Signature<br>Lab Assistant</td>
<td align="right">Signature <br>Head of Department</td>
</tr>
</table>
<br><br><br>

<input type="submit" value="SUBMIT" onclick='this.form.action="archive.php";myfun();'>
<input type="submit" value="SAVE AND CONTINUE LATER"            

onclick='this.form.action="myphpformhandler.php";myfun();'>
</form>
<h3 align="center"><button onclick="myFunction()"><h3>Print this page</h3></button></h3>


</body>
</html>


孟买维迪亚维哈尔K J索迈亚工程学院，邮编：400 077
信息技术部
函数WO1（）{
var qty=document.getElementById（'qty'）。值；
var price=document.getElementById（'price'）.value；
答案=（编号（数量）*编号（价格））.toFixed（2）；
document.getElementById（'totalprice'）。value=answer；
}
函数WO2（）{
变量数量=document.getElementById（'qty1'）。值；
var price=document.getElementById（'price1'）。值；
答案=（编号（数量）*编号（价格））.toFixed（2）；
document.getElementById（'totalprice1'）。value=answer；
}
函数WO3（）{
变量数量=document.getElementById（'qty2'）。值；
var price=document.getElementById（'price2'）。值；
答案=（编号（数量）*编号（价格））.toFixed（2）；
document.getElementById（'totalprice2'）。value=answer；
}
函数validateEnumBe（）
{
var x=document.getElementById（“floor”）.value；
如果（x==null | | x==“”）
{
警报（“必须输入楼层”）；
返回false；
}
}
函数validateN（）
{
var x=document.getElementById（“实验室”）.value；
如果（x==null | | x==“”）
{
警报（“必须输入实验室名称”）；
返回false；
}
}
函数validateEnumb（）
{
var x=document.getElementById（“房间”）.value；
如果（x==null | | x==“”）
{
警报（“必须输入房间号”）；
返回false；
}
}
函数validateEnum（）
{
var x=document.getElementById（“labi”）.value；
如果（x==null | | x==“”）
{
警报（“必须输入负责实验室的名称”）；
返回false；
}
}
函数validateenu（）
{
var x=document.getElementById（“年”）值；
如果（x==null | | x==“”）
{
警报（“必须输入该年度的预算”）；
返回false；
}
}
日期：
楼层：
实验室名称：
房间号：
实验室负责人姓名：
年度预算：
电脑类
高级文书主任。
项目说明
量
费率（含税）
总成本
1.
装备
高级文书主任。
项目说明
量
费率（含税）
总成本
1.
家具
高级文书主任。
项目说明
量
费率（含税）
总成本
1.
（function（）{//防止变量泄漏到全局作用域
var formTable=document.getElementById（'POITable'）；
var newRowBtn=document.getElementById（'addmorePOIbutton'）；
newRowBtn.addEventListener（'click'，insRow，false）；//添加了内联的eventlistener insetad
onclick属性。
函数insRow（）{
var new_row=formTable.rows[1].克隆节点（true），
numTableRows=formTable.rows.length；
//在行的第一个单元格中设置行号
新行。单元格[0]。innerHTML=numTableRows；
numTableRows=numTableRows-1；
var inp1=new_row.cells[1].getElementsByTagName（'textarea'）[0]；
inp1.name+=numTableRows；
inp1.value=''；
var inp2=new_row.cells[2].getElementsByTagName（'input'）[0]；
inp2.name+=numTableRows；
inp2.value=''；
var inp3=new_row.cells[3]。getElementsByTagName（'input'）[0]；
inp3.name+=numTableRows；
inp3.value=''；
var inp4=new_row.cells[4].getElementsByTagName（'input'）[0]；
inp4.name+=numTableRows；
inp4.value=''；
//将新行追加到表中
formTable.appendChild（新的_行）；
}
var formTable1=document.getElementById（'POITable1'）；
var newRowBtn1=document.getElementById（'addmorePOIbutton1'）；
newRowBtn1.addEventListener（'click'，insRow1，false）；//添加了内联的eventlistener insetad
onclick属性。
函数insRow1（）{
var new_row=formTable1.行[1].克隆节点（true），
numTableRows=formTable1.rows.length；
//在行的第一个单元格中设置行号
新行。单元格[0]。innerHTML=numTableRows；
numTableRows=numTableRows-1；
var inp1=new_row.cells[1].getElementsByTagName（'textarea'）[0]；
inp1.name+=numTableRows；
inp1.value=''；
var inp2=new_row.cells[2].getElementsByTagName（'input'）[0]；
inp2.name+=numTableRows；
inp2.value=''；
var inp3=new_row.cells[3]。getElementsByTagName（'input'）[0]；
inp3.name+=numTableRows；
inp3.value=''；
var inp4=new_row.cells[4].getElementsByTagName（'input'）[0]；
inp4.name+=numTableRows；
inp4.value=''；
//将新行追加到表中
表格1.追加子项（新行）；
}
var formTable2=document.getElementById（'POITable2'）；
var newRowBtn2=document.getElementById（'addmorePOIbutton2'）；
newRowBtn2.addEventListener（'click'，insRow2，false）；//添加了内联的eventlistener insetad
onclick属性。
函数insRow2（）{
var new_row=formTable2.行[1].克隆节点（true），
numTableRows=formTable2.rows.length；
//在行的第一个单元格中设置行号
新行。单元格[0]。innerHTML=numTableRows；
numTableRows=numTableRows-1；
var inp1=new_row.cells[1].getElementsByTagName（'textarea'）[0]；
inp1.name+=numTableRows；
inp1.value=''；
var inp2=new_row.cells[2].getElementsByTagName（'input'）[0]；
inp2.name+=numTableRows；
inp2.value=''；
var inp3=new_row.cells[3]。getElementsByTagName（'input'）[0]；
inp3.name+=numTableRows；
inp3.value=''；
var inp4=new_row.cells[4].getElementsByTagName（'input'）[0]；
inp4.name+=numTableRows；
inp4.value=''；
//将新行追加到表中
表格2.追加子项（新行）；
}
})();
函数myfun（）
{
var lun=document.getElementById（'POITable'）.rows.length；
document.getElementsByName（“len”）[0]。值=lun-1；
var lun1=document.getElementById（'PO
$(document).on('change','input', function () {
    var id = $(this).attr('id').split("-");
    var answer = (Number($('#qty-' + id[1]).val()) * Number($('#price-' + id[1]).val())).toFixed(2);
    $('#totalprice-' + id[1]).val(answer);
});