Клонировать строку в таблице HTML и вызвать функцию JavaScript с новой строкой

Question

Клонировать строку в таблице HTML и вызвать функцию JavaScript с новой строкой

0

У меня есть таблица, в которой есть одна строка, в которой я умножаю два поля, а именно количество и скорость/количество, чтобы получить общее количество продукта. Я предоставил кнопку для добавления новой строки, которая в основном клонирует 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/

Uttam 18 апр. 2014, в 12:22

Источник

0

Ваш HTML не имеет заголовка ... Кстати, вы можете сделать рабочий JSFiddle со всем этим ..?
T J 18 апр. 2014, в 09:48
0

Я создал JSFiddle, но умножение не работает в нем. jsfiddle.net/xkY4Z/2
Uttam 18 апр. 2014, в 10:05
0

@user3548277 user3548277, чтобы функция работала в jsfiddle, вы должны выбрать no wrap- in <body> в левой верхней части, чтобы включить свой код javascript в ваше тело ... Проверьте это
Bhavik 18 апр. 2014, в 10:09
0

Как сделать возможным умножение (произведение количества и нормы) на новую строку, которая создается путем нажатия кнопки Добавить новую строку?
Uttam 18 апр. 2014, в 10:30

Показать ещё 2 комментария

Теги:

javascript

html

1 ответ

Ещё вопросы

Ваш HTML не имеет заголовка ... Кстати, вы можете сделать рабочий JSFiddle со всем этим ..?
Я создал JSFiddle, но умножение не работает в нем. jsfiddle.net/xkY4Z/2
@user3548277 user3548277, чтобы функция работала в jsfiddle, вы должны выбрать no wrap- in <body> в левой верхней части, чтобы включить свой код javascript в ваше тело ... Проверьте это
Как сделать возможным умножение (произведение количества и нормы) на новую строку, которая создается путем нажатия кнопки Добавить новую строку?

Bhavik · Answer 1 · 2014-04-18T09-32-00.000Z

0

Не идеальное решение вашей проблемы, но немного ближе. Рабочая скрипка
Выполнено с помощью 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);
});

Обновить

Рабочая скрипка с именем

Последний

Скрипка с общим итогом

Bhavik 18 апр. 2014, в 09:32

0

Что ж, Bhavik, во-первых, большое спасибо за ваше решение. Во-вторых, мы не можем сделать это, используя JavaScript ..?
Uttam 18 апр. 2014, в 13:47
0

@Uttam Это можно сделать с помощью javascript ... Но использование jQuery будет намного короче и даже легко управляемым ...
Bhavik 18 апр. 2014, в 18:06
0

Вы использовали id в функции inorder для доступа к данным формы. Можем ли мы использовать атрибут name? потому что я должен передать эти данные формы в файл PHP, в котором атрибут имени используется везде.
Uttam 19 апр. 2014, в 03:11
0

@Uttam проверьте обновленный ответ на ссылку ... Добавлен параметр имени ..
Bhavik 19 апр. 2014, в 06:41
0

Большое спасибо, Бхавик, ваша помощь оказалась для меня очень полезной.
Uttam 19 апр. 2014, в 12:48
0

если я добавлю текстовое поле (общее количество) в самый правый конец таблицы, то как я могу суммировать все значения в столбце ОБЩАЯ СТОИМОСТЬ и отобразить результат в этом текстовом поле (всего), проверить обновленный FIDDLE jsfiddle.net/xkY4Z/ 13
Uttam 19 апр. 2014, в 12:59
0

Надеюсь, это поможет .... jsfiddle.net/xkY4Z/14
Bhavik 20 апр. 2014, в 06:04
0

Спасибо, Бхавик, за вашу ценную помощь. Но мне нужно текстовое поле (общее), которое должно обновляться автоматически при вводе различных значений в таблицу, которую вы дали кнопке (вычислить общее количество), можете ли вы дать текстовое поле, которое непосредственно отображает общее количество на основе нажатия событие или что-то еще, мне нужно текстовое поле GRAND TOTAL, которое дает сумму всех общих записей (сумма всех текстовых полей под каждой таблицей)
Uttam 21 апр. 2014, в 16:42
0

проверить это ..... jsfiddle.net/xkY4Z/16
Uttam 21 апр. 2014, в 16:49
0

@ Уттам Проверьте эту скрипку ... Кроме того, если этот ответ решил вашу цель, вы должны пометить его как отвеченный ... Это может помочь кому-то
Bhavik 25 апр. 2014, в 10:12

Показать ещё 8 комментариев