كيفية تعيين معرف الصف [TR] ومعرف العمود [TD] في DisplayTag؟

Question

أنا أستخدم DisplayTag لعرض DataGrid. الآن، يجب أن أغير لون الصفوف بناء على بعض الحسابات. مثل إذا

قيمة العمود 3 + column4> coulmn5 ثم يجب أن يكون لون الصف أصفر

قيمة العمود 3 + العمود 4 <coulmn5 ثم يجب أن يكون لون الصف أحمر

قيمة العمود 3 + column4 = coulmn5 ثم يجب أن يكون لون الصف الأبيض

أعتقد أن الطريقة الوحيدة للقيام بذلك هي باستخدام getelementbyid () طريقة

ملحوظة: لا أريد أن أعتبر الحل باستخدام getElementsByTagName()[index] ، قد يتغير سبب الوجود في وقت لاحق إلى أمر العمود.

في الوقت الحاضر، أستخدم التعليمات البرمجية التالية، التي أريد تغييرها.

var rows = tbody.getElementsByTagName("tr");

تكرر كائن الصفوف

var tdObj = rows[i].getElementsByTagName("td")[3]  

Answer 1

أولا، لا أعتقد أنه من الممكن تعيين المعرفات على TD's أو TR's في DisplayTag دون تعديل المصدر. لم يترك هذا قائمتي من الأشياء التي يجب القيام بها، ولكن الآن لدي عمل حولك.

بدلا من تحديد الجدول الخاص بك:

<display:table id='row' name="..." export="true" requestURI="">
  <display:column property="usefulData" title="Useful data" sortable="true" />
  ... more columns ...
</display:table>

افعل هذا:

<display:table id='row' name="..." export="true" requestURI="">
  <display:column title="Useful data" sortable="true" >
    <span id='${row.usefulData}' class='css_class_selector'>${row.usefulData}</span>
  </display:column>
</display:table>

لاحظ الفصل التفاف البيانات المطبوعة. يمكنك الآن تحديد البيانات المتعلقة بالطباعة داخل الجدول الخاص بك، والتي ربما تكون ما تريد؛ لتحديد بياناتك، على عكس تحديد خصوصيا TD's و TR.

Answer 2

سيكون معرف طريقة واحدة للقيام بذلك. آخر سيكون وضع فئة على كل td (حتى تتمكن من إعادة استخدام نفس الفئة على كل صف). ثم تكرر أكثر من الخلايا التي تبحث عن واحد مع الاسم الصحيح. يمكنك مجردة هذا بعيدا في وظيفة GetellementByclassName إذا أردت.

سيكون هناك طريقة للقيام بذلك مع وضع علامة أقل هي الاحتفاظ بإجراء بحث عمود إلى فهرس واستخدامه للحصول على رقم العمود بدلا من التكرار عبر الخلايا على كل صف. يمكنك الحصول على هذه المعلومات من الفصول الدراسية على الرأس، أو col عناصر. على سبيل المثال:

<script type="text/javascript">
    function check(table) {
        // Work out which column is at which index
        //
        var columns= {};
        var ths= table.tHead.rows[0].cells;
        for (var i= ths.length; i-->0;)
            if (ths[i].className.indexOf('column-')==0)
                columns[ths[i].className.substring(7)]= i;

        // Check each row
        //
        var rows= table.tBodies[0].rows;
        for (var i= rows.length; i-->0;) {
            var cells= rows[i].cells;
            var a= +cells[columns.a].innerHTML;
            var b= +cells[columns.b].innerHTML;
            var sum= +cells[columns.sum].innerHTML;
            var right= a+b==sum;
            rows[i].className= right? 'right' : 'wrong';
        }
    }
</script>

<style>
    .right { background: green; }
    .wrong { background: red; }
</style>

<table id="t">
    <thead>
        <tr>
            <th class="column-a">A</th>
            <th class="column-b">B</th>
            <th class="column-sum">Sum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

<button onclick="check(document.getElementById('t'));">Check</button>

ملاحظة باستخدام innerHTML للحصول على محتوى النص غير مطيع بعض الشيء، لكنه يعمل موافق للأرقام لأنها لا يمكنها احتواء أحرف HTML الخاصة. بالنسبة للنص التعسفي، ستحتاج إلى وظيفة استخراج النص.

استخدام rows/cells الأفضل من الأفضل getElementsByTagName. وبعد إنها أسرع وأسهل في القراءة وعدم داعي القلق بشأن الجداول المتداخلة.