CODEWITHSUNDEEP
javascripthtml
Goku
Goku

Reputation: 534

How to add table data and display the output in single page

Demo:

I'm really sorry if my question is very novice as I'm very new to HTML & JS. I'm trying add two table data(Default value and Extra) and print the numeric output in the third column(Output)

Also I wanted to know if I hit the submit button can the updated page(with the third column updated) will populate on the same page

Hope I have conveyed it correctly, thanks.

<form name="CheckOn" >

<table BORDER="1">

<tr class="heading">
  <td>Items</td>
  <td>Default value</td>
  <td>Extra(if any)</td>
  <td>Output</td>
 </tr>

<tr>
  <tr>

    <td>Apple</td>
    <td>
      <input type="text" value="26" size=15 name="apple">
    </td>
    <td>
      <input type="text" value="0" size=15 name="apple">
    </td>
    <td>
      <input type="text" size=15 name="apple">
    </td>
  </tr>

  <tr>
    <td>Mango</td>
    <td><input type="text" size=15 value="26" name="mango"></td>
    <td>
      <input type="text" value="0" size=15 name="mango">
    </td>
    <td>
      <input type="text" size=15 name="mango">
    </td>
  </tr>

</table>

<p><input type="submit" value="submit" name="subs"></p>

https://jsfiddle.net/za7wox59/1/

Upvotes: 0

Views: 122

Answers (1)

NullPointer
NullPointer

Reputation: 7368

I think simply you have to iterate each tr and do the sum of each input inside the td(skipping the result td only) .

1. Iterate for each tr inside table.

2. Do the sum of each input inside the td of each tr.

3. If td is having result td index then set the sum value.

Here is working snippet:

Note: I have assigned id to table.

document.getElementById("subs").addEventListener("click", function(e){
e.preventDefault(); //Just prevent to form submit for demo.
var resultTD=3;
    $('#tblID tr').each(function() {
    var sum=0;
    $.each(this.cells, function(index){
     if(index==resultTD){
          $(this).find("input").val(sum);
      }else{
          $(this).find("input").each(function(index) {
              sum=sum+parseInt(this.value);
            });
      }
    });
   });
});
tr.heading {
    display: table-row;
    font-size:18px;
	  font-family:cursive;
    background-color:lightgreen;
    cursor:pointer;
	border-collapse:collapse;
	font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CheckOn" >
<table id="tblID" BORDER="1">
<tr class="heading">
  <td>Items</td>
  <td>Default value</td>
  <td>Extra(if any)</td>
  <td>Output</td>
 </tr>
 <tr>
    <td>Apple</td>
    <td>
      <input type="text" value="26" size=15 name="apple">
    </td>
    <td>
      <input type="text" value="0" size=15 name="apple">
    </td>
	<td>
      <input type="text" size=15 name="apple">
    </td>
  </tr>
   <tr>
    <td>Mango</td>
    <td><input type="text" size=15 value="26" name="SDK"></td>
    <td>
      <input type="text" value="0" size=15 name="SDK">
    </td>
	<td>
      <input type="text" size=15 name="SDK">
    </td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>
      <input type="text" value="26" size=15 name="Banana">
    </td>
    <td>
      <input type="text" value="27" size=15 name="Banana">
    </td>
	<td>
      <input type="text" size=15 name="Banana">
    </td>
  </tr>
  <tr>
</table>
<p><input type="submit" value="submit" id="subs" name="subs"></p>

Upvotes: 2

Related Questions