मेरे पास एक पृष्ठ है जहां बैकएंड से डेटा के साथ php foreach कार्यक्षमता के साथ कई टेबल प्रदर्शित होते हैं।
प्रत्येक तालिका में "m3 " कॉलम वाली कुछ पंक्तियां होती हैं।

<td  class="p-0 singleUnitCubic-{{$container->id}}">
          {{$item->prettyDecimal('total_cubic')}}
</td>

प्रदान किया गया परिणाम है:

_______________________________________________________
<td class="p-0 singleUnitCubic-13">
                    12.600
</td>
<td class="p-0 singleUnitCubic-13">
                    4.000
</td>
_______________________________________________________
Total:  <span id="totalCubic-13">16.600</span>


_______________________________________________________
<td class="p-0 singleUnitCubic-69">
                    4.230
</td>
<td class="p-0 singleUnitCubic-69">
                    3.000
</td>
_______________________________________________________
Total:  <span id="totalCubic-69">7.230</span>

अब मैं आसानी से एक टेबल के लिए योग प्राप्त कर सकता हूं क्योंकि मैंने प्रत्येक class="singleUnitCubic" को संबंधित टेबल आईडी नंबर के साथ चिह्नित किया है, इस मामले में, यह class="singleUnitCubic-13" है और मेरा योग फ़ंक्शन है:

cubicOutput = document.getElementById('totalCubic-13');

var sumSingleUnits = 0;

$('.singleUnitCubic-13').each(function(){
    sumSingleUnits += parseFloat($(this).text());
    cubicOutput.innerText = SingleUnits.toFixed(3);
});

लेकिन मैं अन्य तालिकाओं के लिए गतिशील रूप से ऐसा कैसे कर सकता हूं जहां class="singleUnitCubic-69" और प्रत्येक संबंधित तालिका के तहत उस राशि को भी प्रदर्शित करें जहां <span id="totalCubic-69">?

क्या यह कुछ ऐसा होना चाहिए जैसे singleUnitCubic- के बाद id नंबर क्या है जो मैं कर सकता हूं:

 <td onload="getTableid(this.class)"  class="p-0 singleUnitCubic-{{$container->id}}">
                    {{$item->prettyDecimal('total_cubic')}}
 </td>

function getTableId(Id) {
           tableId = Id.split('-')[1];
           totalCubic = document.getElementById("totalCubic-".concat(tableId));

और फिर किसी तरह इसे योग समारोह में इंजेक्ट कर रहा है?

पी.एस. मैं बैक-एंड में योग नहीं कर सकता जो आसान होगा।

2
SPL 25 सितंबर 2020, 16:41

2 जवाब

सबसे बढ़िया उत्तर

पहले उन तालिकाओं को निर्धारित करें जिनमें लक्ष्य स्तंभ हैं, आप :has() या अन्य विधि का उपयोग कर सकते हैं। फिर प्रत्येक तालिका के माध्यम से पुनरावृति करें और कुल ज्ञात करें। Array#reduce यहां काम आता है:

  //capture the table that have target columns
  const tables = $('table:has(td[class*=singleUnitCubic])');
  //now process each table
  const totals = tables.each(function() {
      //determine the id of span to update
      const id = ['#totalCubic',$('td[class*=singleUnitCubic]',this).attr('class').split(' ')
      .filter(c => c.indexOf('singleUnitCubic') === 0)[0]
      .split('-')[1]].join('-');
      //get this total
      const total = $('td[class*=singleUnitCubic]', this)
      .map((i,td) => +td.textContent).get()
      .reduce((acc, cur) => acc += cur, 0);
      //now update the dom
      $(id).text( total.toFixed(3) );
  });

डेमो

$(function() {
  //capture the table that have target columns
  const tables = $('table:has(td[class*=singleUnitCubic])');
  //now process each table
  const totals = tables.each(function() {
      //determine the id of span to update
      const id = ['#totalCubic',$('td[class*=singleUnitCubic]',this).attr('class').split(' ')
      .filter(c => c.indexOf('singleUnitCubic') === 0)[0]
      .split('-')[1]].join('-');
      //get this total
      const total = $('td[class*=singleUnitCubic]', this)
      .map((i,td) => +td.textContent).get()
      .reduce((acc, cur) => acc += cur, 0);
      //now update the dom
      $(id).text( total.toFixed(3) );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="p-0 singleUnitCubic-13">
                    12.600
</td>
</tr>
<tr>
<td class="p-0 singleUnitCubic-13">
                    4.000
</td>
</tr></tbody>
</table>
Total:  <span id="totalCubic-13"></span>


<table>
<tbody>
<tr>
<td class="p-0 singleUnitCubic-69">
                    4.230
</td>
</tr>
<tr>
<td class="p-0 singleUnitCubic-69">
                    3.000
</td>
</tr>
</tbody>
</table>
Total:  <span id="totalCubic-69"></span>

कुल के लिए आईडी निर्धारित करना

//just a way to concatenate strings ['totalCubic', '69'].join('-')
//to give rise to 'totalCubic-69'
//for example

डेमो के इस संस्करण में मैंने कुल id को निर्धारित करने वाली रेखा को कई पंक्तियों में तोड़ दिया है ताकि जो किया जा रहा है उसका पालन करना आसान हो सके:

  //get class(es) of first td of this table as an array
  const cl = $('td[class*=singleUnitCubic]',this).attr('class').split(' ');
  console.log( cl );
  //But we only need one 'singleUnitCubic-' ....
  const onecl = cl.filter(c => c.indexOf('singleUnitCubic') === 0)[0];
  console.log( onecl );
  //And we just want to numeric part at the end
  const thenumber = onecl.split('-')[1];
  //So now the id where the total will be put is
  const id = ['#totalCubic', thenumber].join('-');
  //or const id = `#totalCubic-${thenumber}`;
$(function() {
  //capture the table that have target columns
  const tables = $('table:has(td[class*=singleUnitCubic])');
  //now process each table
  const totals = tables.each(function() {
      //get class(es) of first td of this table as an array
      const cl = $('td[class*=singleUnitCubic]',this).attr('class').split(' ');
      console.log( cl );
      //But we only need one 'singleUnitCubic-' ....
      const onecl = cl.filter(c => c.indexOf('singleUnitCubic') === 0)[0];
      console.log( onecl );
      //And we just want to numeric part at the end
      const thenumber = onecl.split('-')[1];
      //So now the id where the total will be put is
      const id = ['#totalCubic', thenumber].join('-');
      //or const id = `#totalCubic-${thenumber}`;
      /*determine the id of span to update
      const id = ['#totalCubic',$('td[class*=singleUnitCubic]',this).attr('class').split(' ')
      .filter(c => c.indexOf('singleUnitCubic') === 0)[0]
      .split('-')[1]].join('-');*/
      //get this total
      const total = $('td[class*=singleUnitCubic]', this)
      .map((i,td) => +td.textContent).get()
      .reduce((acc, cur) => acc += cur, 0);
      //now update the dom
      $(id).text( total.toFixed(3) );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="p-0 singleUnitCubic-13">
                    12.600
</td>
</tr>
<tr>
<td class="p-0 singleUnitCubic-13">
                    4.000
</td>
</tr></tbody>
</table>
Total:  <span id="totalCubic-13"></span>


<table>
<tbody>
<tr>
<td class="p-0 singleUnitCubic-69">
                    4.230
</td>
</tr>
<tr>
<td class="p-0 singleUnitCubic-69">
                    3.000
</td>
</tr>
</tbody>
</table>
Total:  <span id="totalCubic-69"></span>
0
PeterKA 25 सितंबर 2020, 18:50

अपना टीडी तत्व बनाते समय आप अपनी कक्षाओं से आईडी निकाल सकते हैं और डेटा विशेषताएँ

कुछ इस तरह:

<td  data-table-id={{$container->id}} class="p-0 singleUnitCubic">
  {{$item->prettyDecimal('total_cubic')}}
</td>

फिर उसी विशेषता के लिए अपना कुल बदलें। इसके आईडी को कक्षा में भी बदलें।

Total:  <span data-table-id={{$container->id}} class="totalCubic">16.600</span>

फिर आप अपने सभी कुल क्यूबिक तत्वों की नोड सूची प्राप्त कर सकते हैं। इस पर लूप करें और अपने योग फ़ंक्शन में मिलान डेटा-टेबल-आईडी विशेषता के साथ प्रत्येक सिंगल यूनिट क्यूबिक को पास करें। फिर TotalCubic को अपडेट करें।

यहां एक जेएसएफडल उदाहरण काम कर रहा दिया गया है।

1
Y0ss-Please 25 सितंबर 2020, 17:33