在HTML表中克隆一行并使用新行调用JavaScript函数

时间：2014-04-18 09:43:03

标签： javascript html

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

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

我创建了JSFiddle，但乘法不起作用。

http://jsfiddle.net/xkY4Z/2/

1 个答案:

答案 0 :(得分：0)

对您的问题不是一个完美的解决方案，但更接近 Working Fiddle
使用jQuery完成

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

更新

<强> Working Fiddle with name

最新

<强> Fiddle with Grand total

相关问题
最新问题