لا يمكن حيوي إضافة صفوف إلى في IE؟

StackOverflow https://stackoverflow.com/questions/812693

سؤال

ولدي تطبيق AJAX الذي يقوم بتحميل كائن JSON ويستخدم البيانات لإضافة صفوف إلى HTML

باستخدام وظائف جافا سكريبت DOM. وهو يعمل تماما ... إلا في Internet Explorer. IE لا يعطي أي نوع من الخطأ، ولقد تم التحقق من أفضل ما أستطيع أن رمز يتم تنفيذه من قبل المتصفح، لكنه لا يملك ببساطة أي تأثير. أنا خلقت هذه الصفحة سريعة وقذرة لعرض المشكلة: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>

<table id="employeetable">
    <tr>
        <th>Name</th>
        <th>Job</th>
    </tr>
</table>

<script type="text/javascript">
    function addEmployee(employeeName, employeeJob) {
        var tableElement = document.getElementById("employeetable");
        if (tableElement) {
            var newRow = document.createElement("tr");
            var nameCell = document.createElement("td");
            var jobCell = document.createElement("td");
            nameCell.appendChild(document.createTextNode(employeeName));
            jobCell.appendChild(document.createTextNode(employeeJob));
            newRow.appendChild(nameCell);
            newRow.appendChild(jobCell);
            tableElement.appendChild(newRow);
            alert("code executed!");
        }
    }

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>

</body></html>

ولم أحاول IE 8، ولكن كلا IE 7 و IE 6 لا تظهر الصفوف الإضافية التي من المفترض إضافتها. لا أستطيع أن أفهم لماذا. لا أحد يعرف الحل المناسب لهذه المشكلة، أو أنا ربما تفعل شيئا خاطئا؟

هل كانت مفيدة؟

المحلول

وتحتاج إلى إنشاء عنصر TBODY لإضافة TR الجديد لثم قم بإضافة TBODY إلى الجدول الخاص بك، مثل هذا: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>

<table id="employeetable">
    <tr>
        <th>Name</th>
        <th>Job</th>
    </tr>
</table>

<script type="text/javascript">
    function addEmployee(employeeName, employeeJob) {
        var tableElement = document.getElementById("employeetable");
        if (tableElement) {
            var newTable = document.createElement('tbody');   // New
            var newRow = document.createElement("tr");
            var nameCell = document.createElement("td");
            var jobCell = document.createElement("td");
            nameCell.appendChild(document.createTextNode(employeeName));
            jobCell.appendChild(document.createTextNode(employeeJob));
            newRow.appendChild(nameCell);
            newRow.appendChild(jobCell);
            newTable.appendChild(newRow);   // New
            tableElement.appendChild(newTable);   // New
            alert("code executed!");
        }
    }

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>

</body></html>

نصائح أخرى

وعلى ما يبدو، في IE تحتاج إلى إلحاق الصف لعنصر TBODY، وليس عنصر الجدول ... انظر المناقشة في روبي المنتدى .

والتوسع في مناقشة هناك، و

يتم ترميز عموما دون صريحة و العلامات، ولكن العنصر هو المكان الذي كنت فعلا بحاجة لإضافة صف جديد الخاص بك، كما
لا لا يحتوي العناصر مباشرة.

وتحرير: يعمل الآن في IE! يستخدم insertSiblingNodesAfter وparentNode من الأخوة، والذي يحدث أن تكون TBODY في IE

وانه من الصعب ان تعرف ما هي المراوغات في متجر عند محاولة التلاعب DOM عبر المتصفح. فما استقاموا لكم فاستقيموا ننصح باستخدام مكتبة القائمة التي تم اختبارها بشكل كامل في جميع المتصفحات الرئيسية، وتمثل المراوغات.

وأنا شخصيا استخدام MochiKit، يمكنك الغوص في التلاعب DOM هنا: http://mochikit.com/doc/html/MochiKit/DOM.html

وظيفة النهائية الخاصة بك قد تبدو شيئا من هذا القبيل: 

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top