w3schools - title html




كيفية جعل صف كامل في جدول قابل للنقر على أنه رابط؟ (12)

أعرف أن شخصًا ما قد كتب نفس الشيء بالفعل ، لكن طريقي هي الطريقة الصحيحة (لا يمكن أن يكون div طفلاً من A) ، ومن الأفضل أيضًا استخدام الفصول الدراسية.

يمكنك محاكاة جدول باستخدام CSS وإنشاء عنصر A في الصف

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

المغلق:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

أنا باستخدام Bootstrap وما يلي لا يعمل:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

أنت تستخدم Bootstrap وهو ما يعني أنك تستخدم jQuery: ^) ، لذا فإن إحدى الطرق للقيام بذلك هي:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

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

ميزة استخدام فئة فوق الهوية هو أنه يمكنك تطبيق الحل على صفوف متعددة:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

ولا تتغير قاعدة الكود. سوف يعتني المعالج نفسه من جميع الصفوف.

خيار اخر

يمكنك استخدام عمليات رد الاتصال jQuery Bootstrap مثل هذا (في رد اتصال document.ready ):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

هذا له ميزة عدم إعادة تعيين عند فرز الجدول (الذي يحدث مع الخيار الآخر).

ملحوظة

منذ تم نشر هذا window.document.location عفا عليه الزمن (أو window.document.location على الأقل) استخدام window.location بدلا من ذلك.


خيار آخر باستخدام <a> ، <a> CSS وبعض jQuery أو JS :

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

ثم تحتاج إلى إعطاء عرض ، على سبيل المثال jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

خيار سهل جدا (يعمل مع Angular ng-click أيضا):

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

اعمل يعمل here


لا يمكنك فعل ذلك. هو HTML غير صالح. لا يمكنك وضع <a> بين <tbody> و <tr> . جرب هذا بدلا من ذلك:

<tr onclick="window.location='#';">
   ...
</tr>

عندما تعمد إلى ذلك ، فإنك تريد استخدام جافا سكريبت لتعيين معالج النقر خارج HTML.


لماذا لا نستخدم علامات "div" ....

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>

هذه الشفرة سوف تجعل جدولك بأكمله قابلاً للنقر. سيؤدي النقر فوق الارتباطات الموجودة في هذا المثال إلى إظهار الارتباط الموجود في مربع حوار تنبيه بدلاً من اتباع الارتباط.

HTML:

هنا هو HTML وراء المثال أعلاه:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

المغلق

و CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

وأخيرًا jQuery الذي يجعل السحر يحدث:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

ما يفعله هو عندما يتم النقر فوق صف ، يتم البحث عن href المنتمين إلى مرساة. إذا تم العثور على أحد ، يتم تعيين موقع النافذة إلى ذلك href.


هل يمكن أن تعطي الصف معرف ، على سبيل المثال

<tr id="special"> ... </tr>

ثم استخدم jquery لتقول شيئًا مثل:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})


هناك طريقة لطيفة لفعل ذلك من الناحية الفنية مع <a> علامة داخل <tr> ، والتي قد تكون غير صحيحة دلاليًا (قد تعطيك تحذيرًا من المتصفح) ، ولكنها ستعمل مع عدم الحاجة إلى JavaScript/jQuery :

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

ملاحظة: لاحظ أن الخدعة هنا هي وضع العلامة <a> كعنصر أخير ، وإلا ستحاول أن تأخذ مساحة الخلية <td> الأولى.

PPS: الآن سيكون صفك بالكامل قابلاً للنقر ، ويمكنك استخدام هذا الرابط لفتحه في علامة تبويب جديدة أيضًا (Ctrl / CMD + click)


يمكنك إضافة دور الزر إلى صف جدول وسيقوم Bootstrap بتغيير المؤشر دون أي تغييرات css. قررت استخدام هذا الدور كطريقة لجعل أي صف قابل للنقر عليه بسهولة برمز صغير جدًا.

أتش تي أم أل

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

مسج

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

يمكنك تطبيق هذا المبدأ نفسه لإضافة دور الزر إلى أي علامة.


يمكنك استخدام مكون التمهيد هذا:

http://jasny.github.io/bootstrap/javascript/#rowlink

جازي بوتستراب

المكونات المفقودة للإطار الأمامي المفضل لديك.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

استعمال

عبر سمات البيانات

أضف class .rowlink و attribute data-link="row" إلى عنصر <table> أو <tbody> . للخيارات الأخرى إلحاق الاسم بالبيانات ، كما هو الحال في data-target="a.mainlink" يمكن استبعاد الخلية بإضافة فئة .rowlink-skip إلى <td> .

عبر JavaScript

اتصل بقناع الإدخال عبر javascript:

$('tbody.rowlink').rowlink()

يمكنك تضمين مرساة داخل كل <td> ، مثل:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

يمكنك بعد ذلك استخدام display:block; على المراسي لجعل الصف الكامل قابل للنقر.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

مثال jsFiddle هنا.

ربما يكون هذا هو الحد الأمثل كما ستحصل عليه إلا إذا لجأت إلى JavaScript.





bootstrap-4