في البداية، يبدو أن لديك مشكلة في تطبيق وظيفة الـ Blur على الصفوف المضافة ديناميكياً في جدول HTML الخاص بك، وتحاول إرسال قيم الصفوف النصية إلى صفحة PHP باستخدام AJAX. الرمز الذي قدمته يبدو جيدًا بشكل عام، ولكن هناك بعض الأمور التي يمكن تحسينها لضمان عمل البرنامج بشكل صحيح.
أولاً، يبدو أنك تستخدم معرفات مكررة للعناصر في الصفحة، مثل “co_name” و “co_qty” لكل صف. هذا يمكن أن يؤدي إلى سلوك غير متوقع، حيث يجب أن يكون لكل عنصر معرف فريد. يمكنك حل هذا الأمر بإضافة معرفات فريدة لكل صف ديناميكياً.
ثانيًا، يبدو أن الحدث الذي تستمع إليه على عناصر الـ “blur” (التلاشي) يتم تعريفه بشكل ثابت للعناصر التي تم إنشاؤها ديناميكياً. يجب عليك تحديث ذلك بحيث يتم تطبيق الحدث على العناصر الجديدة بعد إنشائها.
ثالثًا، يمكن تحسين ترتيب العناصر في الجدول وضمان تناسقها، وكذلك تنظيم الرمز لجعله أكثر قراءة وصيانة.
لحل المشكلة، يمكنك القيام بالخطوات التالية:
- تغيير معرفات العناصر المتكررة في كل صف ديناميكيًا لتكون فريدة.
- تحديث الحدث المستمع للـ “blur” ليشمل العناصر الجديدة.
- تنظيم الرمز وترتيب العناصر في الجدول بشكل منظم ومنطقي.
بعد تطبيق هذه التحسينات، يجب أن تعمل وظيفة الـ Blur بشكل صحيح على الصفوف المضافة ديناميكياً، وسيتم إرسال قيم الصفوف بنجاح إلى صفحة PHP عند تغيير القيم والتركيز خارج الحقول النصية.
المزيد من المعلومات
بعد تطبيق التحسينات المقترحة، يمكن أن يبدو الكود كما يلي:
htmlHTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount++;
var recRow = ''">'" size="17%" maxlength="120" />'" maxlength="120" style="margin: 4px 5px 0 5px;"/>');">Delete
';
$('#addedRows').append(recRow);
}
function removeRow(removeNum) {
$('#rowCount' + removeNum).remove();
}
$(document).ready(function () {
$(document).on('blur', 'input[id^="co_qty_"]', function () {
var rowId = $(this).attr('id').split('_')[2];
var username = $('#co_name_' + rowId).val();
var password = $('#co_qty_' + rowId).val();
$.ajax({
type: "POST",
url: "blur.php",
data: {'title': username, 'title1': password},
success: function (msg) {
alert(msg)
}
});
});
});
script>
head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;">Nametd>
<td style="font-size:14px;">Emailtd>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
Add More
span>td>
tr>
<tr id="rowId">
<td><input name="" type="text" id="co_name_1" value="" size="17%"/>td>
<td><input name="" type="text" id="co_qty_1" value=""/>td>
tr>
table>
<div id="addedRows">div>
body>
html>
بهذا الشكل، تم تحسين التكرارات وتطبيق الـ Blur على الصفوف الجديدة بعد إنشائها بواسطة الدالة addMoreRows()، وتم تحديث الحدث المستمع للـ Blur باستخدام الدالة $(document).on('blur', 'input[id^="co_qty_"]', function () {...}) لضمان عمل الحدث على العناصر الجديدة.
بعد هذه التعديلات، يجب أن يعمل برنامجك بشكل صحيح، ويتم إرسال القيم بنجاح إلى صفحة PHP عندما يتم تغيير القيم والتركيز خارج الحقول النصية في الصفوف المضافة ديناميكياً.
