تبديل عرض البيانات داخل خلية الجدول

Question

لدي جدول المتولدة من الطبيعي PHP حلقة.ما أريد القيام به هو إنشاء نموذج في العمود الأول من كل صف مخفية بشكل افتراضي ولكن يظهر عند النقر فوق تبديل الرابط في هذا الصف.

أنا يمكن أن تجعل العادي تبديل قادرة div عن طريق خلق معرف CSS الخفية و الإعداد display: none;.للأسف أنا لا يمكن أن تبقي خلق divs مع id=hidden تلقائيا المرتبطة السابقة الارتباط.

أنا جميلة الخبرة مع كل من جافا سكريبت و CSS لذا في الغالب حاولت فعل هذا من قبل الترقيع معا الأمثلة ولكن لم أجد.لقد قرأت في بعض الأماكن التي لا يمكنك وضع divs داخل الجدول, لذا ربما أنا ذاهب عن هذا الخطأ.

هنا مثال على ما يفعل و كم كنت أتمنى لو أنها عملت ، ولكن بالطبع لا.

<script language="JavaScript" type="text/javascript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        }
</script>


<?php

while($array = mysql_fetch_array($sql))
    {
?>
<tr>
    <td>
<?php
        echo $array['some_data'];
?>
        <a href="#" onclick="toggle('hidden');">Toggle</a>
        <div id="hidden"><?php echo $array['hidden_thing']; ?></div>
    </td>
    <td>
        <?php echo $array['some_other_data']; ?>
    </td>
</tr>
<?php
    }
?>

Answer 1

ومجرد استخدام معرف مختلفة لكل صف:

<?php
$count = 0;
while($array = mysql_fetch_array($sql)) {
  $id = 'hidden' . $count++;
  $data = $array['some_data'];
  $hidden = $array['hidden_thing'];
  $other_data = $array['other_data'];
  echo <<<END
<tr>
  <td>$data <a href="#" onclick="toggle('$id');>Toggle</a>
    <div id="$id">$hidden_thing</div>
  </td>
  <td>$other_data</td>
</tr>

END;
}

Answer 2

تأكد أن فترة بدلا من DIV كما أعتقد أن بعض المتصفحات لا تدعم عناصر div عناصر الجدول الداخل. أيضا، بدلا من الإشارة إليها من قبل ID، تمر في this.nextSibling() للتبديل، واستخدام جهاز الملاحة DOM للحصول على الأخوة المقبل (التي ينبغي أن تكون SPAN) لإظهار / إخفاء.

  function toggle(ctl) {
      var state = ctl.style.display;
      if (state == 'block') {
          document.getElementById(id).style.display = 'none';
      } else {
          document.getElementById(id).style.display = 'block';
      }
  }


  <a href="#" onclick="toggle(this.nextSibling);">Toggle
  </a><div><?php echo $array['hidden_thing']; ?></div>

تعديل : لويشيرtomhaigh (وكما هو مبين في المثال)، لهذا العمل كنت بحاجة للتأكد من أنه لا يوجد نص / المسافات بين مذيع وشعبة. هل يمكن أيضا كتابة دالة أنه نظرا عنصر DOM، فإن تحديد النص غير عنصر DOM المقبل وإعادته. ثم تمرير this لتلك الوظيفة، ونتيجة لوظيفة التبديل الخاص بك.

Answer 3

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

HTML:

<table id="tableForms" class="table">
  <tr>
    <td class="rowForm"><form><span>form1 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form2 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form3 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
</table>

جافا سكريبت:

<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
//as soon as the DOM is ready, run this function to manipulate it
$(function() {
    // get all tr elements in the table 'tableForms' and bind a 
    // function to their click event
    $('#tableForms').find('tr').bind('click',function(e){
        // get all of this row's sibblings and hide their forms.
        $(this).siblings().not(this).find('td.rowForm form').hide();

        // now show the current row's form
        $(this).find('td.rowForm form').show();
    }).
    // now that the click event is bound, hide all of the forms in this table
    find('td.rowForm form').hide();
});
</script>

Demo:

العمل التجريبي هذا يمكن العثور عليها هنا