One page two html table get specific tabels column sum

Question

I have two tables in one page.

The first table: table id="yeni"

The second table: table id="eski"

I wrote a function to sum the specific columns of the specific table.

The only difference in the columns are the IDS. For example:

First row 1_1, 1_2, 1_3

Second row 2_1, 2_2, 2_3

 function sum(columno,table_id){

    var cost=0;
    var rowcount=5
    for (i=1 ; i<rowcount;i++){ 

             var t =document.getElementById( i + "_" + columno);

    cost=cost+t.value;
    }

return cost;

}

How do I use the parameter of the table's ID in a function to identify the table?

My HTML Table:

<table id="yeni" style="border: 1px solid rgb(0, 0, 0);">
   <tr id="1">
      <td><input id="1_1" style="width: 70px; font-size: 11px;"></td>
      <td><input id="1_2" style="width: 80px; font-size: 11px;"></td>
      <td><input id="1_3" style="width: 80px; font-size: 11px;"></td>
      <td><input id="1_4" style="width: 80px; font-size: 11px;"></td>
      <td><input id="1_5" style="width: 80px; font-size: 11px;"></td>
      <td><input id="1_6" style="width: 80px; font-size: 11px;"></td>
      <td><input id="1_7" style="width: 80px; font-size: 11px;"></td>
      <td><input id="1_8" type="hidden" value="75" style="width: 80px; font-size: 11px;"></td>
      <td><button></button></td>
   </tr>
   <tr id="2">
      <td><input id="2_1" style="width: 70px; font-size: 11px;"></td>
      <td><input id="2_2" style="width: 80px; font-size: 11px;"></td>
      <td><input id="2_3" style="width: 80px; font-size: 11px;"></td>
      <td><input id="2_4" style="width: 80px; font-size: 11px;"></td>
      <td><input id="2_5" style="width: 80px; font-size: 11px;"></td>
      <td><input id="2_6" style="width: 80px; font-size: 11px;"></td>
      <td><input id="2_7" style="width: 80px; font-size: 11px;"></td>
      <td><input id="2_8" type="hidden" value="30.68" style="width: 80px; font-size: 11px;"></td>
      <td><button></button></td>
   </tr>
   <tr id="3">
      <td><input id="3_1" style="width: 70px; font-size: 11px;"></td>
      <td><input id="3_2" style="width: 80px; font-size: 11px;"></td>
      <td><input id="3_3" style="width: 80px; font-size: 11px;"></td>
      <td><input id="3_4" style="width: 80px; font-size: 11px;"></td>
      <td><input id="3_5" style="width: 80px; font-size: 11px;"></td>
      <td><input id="3_6" style="width: 80px; font-size: 11px;"></td>
      <td><input id="3_7" style="width: 80px; font-size: 11px;"></td>
      <td><input id="3_8" type="hidden" value="16.56" style="width: 80px; font-size: 11px;"></td>
      <td><button></button></td>
   </tr>
   <tr id="4">
      <td><input id="4_1" style="width: 70px; font-size: 11px;"></td>
      <td><input id="4_2" style="width: 80px; font-size: 11px;"></td>
      <td><input id="4_3" style="width: 80px; font-size: 11px;"></td>
      <td><input id="4_4" style="width: 80px; font-size: 11px;"></td>
      <td><input id="4_5" style="width: 80px; font-size: 11px;"></td>
      <td><input id="4_6" style="width: 80px; font-size: 11px;"></td>
      <td><input id="4_7" style="width: 80px; font-size: 11px;"></td>
      <td><input id="4_8" type="hidden" value="30.68" style="width: 80px; font-size: 11px;"></td>
      <td><button></button></td>
   </tr>
   <tr id="5">
      <td><input id="5_1" style="width: 70px; font-size: 11px;"></td>
      <td><input id="5_2" style="width: 80px; font-size: 11px;"></td>
      <td><input id="5_3" style="width: 80px; font-size: 11px;"></td>
      <td><input id="5_4" style="width: 80px; font-size: 11px;"></td>
      <td><input id="5_5" style="width: 80px; font-size: 11px;"></td>
      <td><input id="5_6" style="width: 80px; font-size: 11px;"></td>
      <td><input id="5_7" style="width: 80px; font-size: 11px;"></td>
      <td><input id="5_8" type="hidden" style="width: 80px; font-size: 11px;"></td>
      <td><button></button></td>
   </tr>
</table>

Answer 1

for two table's cell id has rule like for first row 1_1,1_2,1_3 for second row 2_1,2_2,2_3 and so on

This is a problem, the id attribute of any element must be unique for the entire webpage. Just because your tables have different id values, does not mean it helps distinguishes the cell rows.

You need to either prefix each table cell with the tables id value (eg <td><input id="eski_4_4" style="width: 80px; font-size: 11px;"></td> ), or find your table cells differently (eg use the fact that they are children of your table with javascript).

Answer 2

this may help you

sum(columno,table_id){

var cost=0;
var rowcount=5
for (i=1 ; i<rowcount;i++){ 
       var t = $(table_id).find("#" + i + "_" + columno);
       cost=cost+t.value;
}

return cost; }