حساب مجموع قيم خلايا ديناميكية تم توليدها باستخدام متغيرات php-jQuery

بإمكانك أن تقوم بإضافة صف جديد للإجمالي من خلال كود جافاسكريبت عند الضغط على زر "البدء بتعبئة الطلب" من خلال الكود التالي:

addTotalRows = () => {
  row_html = `<tr class="total-row">
                <th scope="row" style="border: 1px solid #373838;background-color: #bec1c3;">
                    الإجمالي
                </th>
                <td scope="row" class="total" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-m" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-l" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-xl" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-xxl" style="border: 1px solid #373838;">
                </td>

              </tr>`
  tbody = document.querySelector('tbody')
  tbody.innerHTML = tbody.innerHTML + row_html
}

تقوم الدالة السابقة بإضافة صف يحتوي على بعض الخانات إلى جسم الجدول tbody ونقوم بتنفيذ هذه الدالة عند الضغط على زر "البدء بتعبئة الطلب" من خلال حدث submit لنموذج البيانات .needs-validation-create-table كالتالي:

document.getElementsByClassName('needs-validation-create-table')[0].addEventListener('submit', addTotalRows)

بعد ذلك يجب عمل دالة لتغير قيم هذا الخلايا في الصف الذي قمنا بإنشائه للتو، كالتالي:

calcTotal = () => {
  rows = document.querySelectorAll('tbody tr:not(.sizes-names):not(.total-row)')
  total = 0
  size_m = 0
  size_l = 0
  size_xl = 0
  size_xxl = 0
  rows.forEach((row)=>{
      inputs = row.querySelectorAll('td input')
      total += isNaN(parseInt(inputs[0].value)) ? 0 : parseInt(inputs[0].value)
      size_m += isNaN(parseInt(inputs[1].value)) ? 0 : parseInt(inputs[1].value)
      size_l += isNaN(parseInt(inputs[2].value)) ? 0 : parseInt(inputs[2].value)
      size_xl += isNaN(parseInt(inputs[3].value)) ? 0 : parseInt(inputs[3].value)
      size_xxl += isNaN(parseInt(inputs[4].value)) ? 0 : parseInt(inputs[4].value)
  })

  changeTotal(total, size_m, size_l, size_xl, size_xxl)
}

changeTotal = (total, size_m, size_l, size_xl, size_xxl) => {
  document.querySelector('.total').innerText = total
  document.querySelector('.size-m').innerText = size_m
  document.querySelector('.size-l').innerText = size_l
  document.querySelector('.size-xl').innerText = size_xl
  document.querySelector('.size-xxl').innerText = size_xxl
}

تقوم دالة calcTotal بأخذ القيم من الحقول من الجدول وجمع قيمة كل عمود على حدى ثم تخزين هذه القيم في المتغيرات total, size_m, size_l, size_xl, size_xxl وفي النهاية تقوم بتمرير هذه المتغيرات إلى الدالة changeTotal المسئولة عن إضافة الأرقام إلى صف الإجمالي الذي قمنا بإنشائه في الخطوة الأولى، لكن هذه الدوال يجب أن تعمل بعد إضافة الألوان إلى الجدول وذلك من خلال إضافة حدث submit آخر إلى النموذج .needs-validation-create-table كالتالي:

document.getElementsByClassName('needs-validation-create-table')[0].addEventListener('submit', () => {
  felids = document.querySelectorAll('td.color-sizes-count')
  felids.forEach((felid) => { felid.addEventListener('change', calcTotal) })
})

يقوم الكود السابق بإنتظار الضغط على زر "البدء بتعبئة الطلب" ثم يقوم بإضافة حدث change على كل حقل إدخال موجود في الجدول ليتم تنفيذ الدالة calcTotal عند حدوث أي تغير في قيم الحقول في الجدول وبهذا سيتم تغير القيم في صف الإجمالي كما في الصورة:

وهنا الكود الكامل:

addTotalRows = () => {
  row_html = `<tr class="total-row">
                <th scope="row" style="border: 1px solid #373838;background-color: #bec1c3;">
                    الإجمالي
                </th>
                <td scope="row" class="total" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-m" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-l" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-xl" style="border: 1px solid #373838;">
                </td>

                <td scope="row" class="size-xxl" style="border: 1px solid #373838;">
                </td>

              </tr>`
  tbody = document.querySelector('tbody')
  tbody.innerHTML = tbody.innerHTML + row_html
}

document.getElementsByClassName('needs-validation-create-table')[0].addEventListener('submit', addTotalRows)



calcTotal = () => {
  rows = document.querySelectorAll('tbody tr:not(.sizes-names):not(.total-row)')
  total = 0
  size_m = 0
  size_l = 0
  size_xl = 0
  size_xxl = 0
  rows.forEach((row)=>{
      inputs = row.querySelectorAll('td input')
      total += isNaN(parseInt(inputs[0].value)) ? 0 : parseInt(inputs[0].value)
      size_m += isNaN(parseInt(inputs[1].value)) ? 0 : parseInt(inputs[1].value)
      size_l += isNaN(parseInt(inputs[2].value)) ? 0 : parseInt(inputs[2].value)
      size_xl += isNaN(parseInt(inputs[3].value)) ? 0 : parseInt(inputs[3].value)
      size_xxl += isNaN(parseInt(inputs[4].value)) ? 0 : parseInt(inputs[4].value)
  })

  changeTotal(total, size_m, size_l, size_xl, size_xxl)
}

changeTotal = (total, size_m, size_l, size_xl, size_xxl) => {
  document.querySelector('.total').innerText = total
  document.querySelector('.size-m').innerText = size_m
  document.querySelector('.size-l').innerText = size_l
  document.querySelector('.size-xl').innerText = size_xl
  document.querySelector('.size-xxl').innerText = size_xxl
}


document.getElementsByClassName('needs-validation-create-table')[0].addEventListener('submit', () => {
  felids = document.querySelectorAll('td.color-sizes-count')
  felids.forEach((felid) => { felid.addEventListener('change', calcTotal) })
})

الله ينور عليك تسلم

انا جربتها عندي ما ظبطتش للاسف بس الفكرة واضحة لكن الان المشكلة في اننا عاملين المقاس في دالة  calcTotal ثابت ب باربع خانات x و m و هكذا

و البيان ده متغير انا بجيبه من الداتابيز ، ممكن يبقى عندي 15 مقاس مش 4 بس

فعاوز مساعدتك اني اظبط الدالة دي تشتغل على المتغير مش الثابت

و ده الجزء الخاص بمتغير المقاس

<label> المقاسات المطلوبة </label>

<div class="input-group d-flex justify-content-center">

<?php

foreach ($sizes as $size){
    echo '<span style="font-size: 1rem;" class="badge m-2 badge-pill badge-secondary size-title">'.$size['title'].'</span>';
}

?>

</div>

و ده ملف الباترون بعد ما عملت التعديلات اللي امرت بيها بس مشتغلش معايا للاسف

patron.php

بتاريخ منذ ساعة مضت قال محمد المصري5:

الله ينور عليك تسلم

انا جربتها عندي ما ظبطتش للاسف بس الفكرة واضحة لكن الان المشكلة في اننا عاملين المقاس في دالة  calcTotal ثابت ب باربع خانات x و m و هكذا

و البيان ده متغير انا بجيبه من الداتابيز ، ممكن يبقى عندي 15 مقاس مش 4 بس

فعاوز مساعدتك اني اظبط الدالة دي تشتغل على المتغير مش الثابت

و ده الجزء الخاص بمتغير المقاس

 

<label> المقاسات المطلوبة </label>

<div class="input-group d-flex justify-content-center">

<?php

foreach ($sizes as $size){
    echo '<span style="font-size: 1rem;" class="badge m-2 badge-pill badge-secondary size-title">'.$size['title'].'</span>';
}

?>

</div>

 

و ده ملف الباترون بعد ما عملت التعديلات اللي امرت بيها بس مشتغلش معايا للاسف

patron.php

لم يعمل الكود الذي قمت بإضافته بسبب وجود جزئ ناقص فيه وهو الكود التالي:

document.getElementsByClassName('needs-validation-create-table')[0].addEventListener('submit', () => {
  felids = document.querySelectorAll('td.color-sizes-count')
  felids.forEach((felid) => { felid.addEventListener('change', calcTotal) })
})

بالنسبة لتغير عدد الحقول فيجب أن تقوم بالكثير من التغيرات في الدوال السابقة، على سبيل المثال يجب أن تعديل الدالة addTotalRows لكي تقبل مصفوفة تحتوي على المقاسات لتقوم بتوليد كل الخانات في صف الإجمالي ويجب أن يتم إستعمال أسماء المقاسات كأصناف classes في الخانات حتى يمكنك أن تقوم بتعديل قيم هذه الخانات مع كل تغير يتم في الجدول، كالتالي:

sizes = ['size_m', 'size_l', 'size_xl', 'size_xxl'];
addTotalRows = (sizes) => {
  row_html = `<tr class="total-row">
                <th scope="row" style="border: 1px solid #373838;background-color: #bec1c3;">
                    الإجمالي
                </th>`
    sizes.forEach((size)=>{
    	row_html += `<td scope="row" class="${size}" style="border: 1px solid #373838;"> </td>`
    })
  row_html += `</tr>`

  tbody = document.querySelector('tbody')
  tbody.innerHTML = tbody.innerHTML + row_html
}

document.getElementsByClassName('needs-validation-create-table')[0].addEventListener('submit', ()=>addTotalRows(sizes))

وبنفس الطريقة يجب أن تقوم بتعديل كل الدوال الأخرى.

لما قمت بتعديل الكود زي حضرتك ما ذكرت لي لم تعمل معي خانة الاجمالي من الاساس

و ده ملف الباترون 

هل ممكن ترفعلي ملف الباترون بعد تعديلات حضرتك عشان اقارنها و اعرف خطئي فين

patron.php

منتظر ردكم