Sina
3 سال پیش توسط Sina مطرح شد
1 پاسخ

اضافه کردن تگ tr به جدول html با استفاده از jquery

سلام به همگی
من یا استفاده از یک پلاگین دارم یه جدول HTML تولید میکنم در نتیجه نمیتوتن ساختارش رو تغییر بدم حالا احتیاج دارم بعضی از سطرهای این جدول رو merg کنم باهم تا به عنوان سر تیتر استفاده بشه میدونم واسه این کار باید از خاصیت colspan استفاده کنم و مشکلی نیست با استفاده از jquery و کد زیر این کار رو انجام میدم

$('.merg').attr('colspan', '6');

اما ساختار جدول من هم باید تغییر کنه به شکلی که هر th من داخل یه tr جداگونه بیفته که colspan عمل کنه ولی در حال حاضر به شکل زیر جدول تولید میشه :

<table id="table_1">
  <!-- Table header -->
  <thead>
    <tr>
      <th class="merg" colspan="2">Merge</th>
      <th  class="merg" colspan="2">Merge</th>
    </tr>
  </thead>
  <!-- /Table header -->
  <!-- Table body -->
  <tbody>
    <tr id="table_7_row_0">
      <td style="">ss</td>
      <td style="">ds</td>
    </tr>
  </tbody>
  <!-- /Table body -->
</table>

اما باید تقریبا ساختار به شکل زیر جدول تغییر کنه که colspan عمل کنه :

<table>
  <thead>
    <tr class="wpdt-cell-row ">
      <th class="wpdt-cell" colspan="8" rowspan="1"> عنوان </th>
    </tr>
  </thead>
  <tbody>
    <tr class="wpdt-cell-row odd">
      <td class="wpdt-cell  wpdt-merged-cell " colspan="8" rowspan="1" data-cell-id="A2" data-col-index="0" data-row-index="1" style="                padding:10px;"> اطلاعات فردی </td>
    </tr>
    <tr class="wpdt-cell-row even">
      <td class="wpdt-cell "> aa </td>
      <td class="wpdt-cell"> a</td>
      <td class="wpdt-cell"> aa </td>
      <td class="wpdt-cell"> aa </td>
      <td class="wpdt-cell"> aa </td>
      <td class="wpdt-cell"> aa </td>
      <td class="wpdt-cell"> aa </td>
    </tr>
    <tr class="wpdt-cell-row odd">
      <td class="wpdt-cell">bb </td>
      <td class="wpdt-cell"> bb </td>
      <td class="wpdt-cell"> 1250 </td>
      <td class="wpdt-cell"> bb </td>
      <td class="wpdt-cell"> bb </td>
      <td class="wpdt-cell"> bb </td>
      <td class="wpdt-cell"> bb </td>
    </tr>
  </tbody>
</table>

چیزی که به فکر خودم رسید این بود که بیام آخر th رو با jquery با تگ tr ببندم اما اصلا عمل نمیکنه یعنی چیزی اضافه نمیشه !!

$(".merg").after("</tr>");

اگه راه حلی به ذهنتون میرسه ممنون میشم راهنمایی کنید

+---------------------------+
|           Merge           |
+---------------------------+
|           Merge           |
+---+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+---+---+---+---+---+---+---+
|           Merge           |
+---+---+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+---+---+---+---+---+---+---+

ثبت پرسش جدید
حسن حکمتی
تخصص : برنامه نویس وب و بلاکچین
@hekmati 3 سال پیش مطرح شد
0

سلام
به المنت مورد نظر کلاس یا آی دی یونیک اختصاص بدید مثلا آی دی tr بعد به شکل زیر اقدام کنید.

$var = '<th class="wpdt-cell" colspan="8" rowspan="1"> عنوان </th>';
$( "#tr" ).append($var);

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام