Динамическая таблица, добавленная с jQuery

В следующем коде она динамически добавляет новую таблицу, даже если она работает нормально, у меня есть проблема с шириной столбца с содержимым «+», а не с автоматическим увеличением ширины этого столбца , Я не возражаю, если ширина столбцов других столбцов увеличивается, но содержание «+» td должно оставаться постоянным.Динамическая таблица, добавленная с jQuery

Код:

<html> 
<head> 
<script src="https://code.jquery.com/jquery-1.8.2.js"></script> 
<style> 
.table_main { 
     border-top-style: ridge; 
     border-bottom-style: ridge; 
     border-left-style: ridge; 
     border-right-style: ridge; 
     border-color: red; 
     border-width: 3px; 
     } 

.table_main td { 
    background: #A38055;  
    border-right: solid 1px white ; 
    border-bottom: 1px solid white; 
    text-align: center; 
} 

.table_main th { 
    background: #DCDCDC; 
    border-right: solid 1px white ; 
    border-bottom: 1px solid white; 
    text-align: center; 
} 

    </style> 

</head> 
<body> 
<table class="table_main"> 
    <tbody> 
     <tr> 
     <td>Big</td> 
      <td width="5%"> 
      Sl 
      </td> 
      <td> 
      Label 1 
      </td> 
      <td> 
      Label 1 
      </td> 
      <td> 
      Label 1 
      </td> 
      <td> 
      Label 1 
      </td> 
     </tr> 
     <tr > 
     <td rowspan="5"> 
     Data1:<b/> 

     </td> 
     </tr> 
     <tr> 
      <td width="5%"></td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
     </tr> 
     <tr id="rowId"> 
      <td width="5%" onclick="loadSubData()">+</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
     </tr> 
     <tr> 
      <td width="5%"></td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
     </tr> 
     <tr> 
      <td width="5%"></td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
      <td>Some data1</td> 
     </tr> 
    </tbody> 
<table> 
<script type="text/javascript"> 
function loadSubData(){ 
if($('#dataNode').length <= 0){ 
$('#rowId').after('<tr id="dataNode"><td width="5%;">h</td><td colspan="4"><table class="table_main"> <tbody>   <tr>  <td>Big</td>   <td width="5%">    Sl   </td>   <td>   Label 1    </td>   <td>   Label 1    </td>   <td>   Label 1    </td>   <td>   Label 1    </td>  </tr>  <tr >  <td rowspan="5">  Data1:<b/>    </td>  </tr>  <tr>   <td width="5%"></td>   <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr>  <tr id="rowId">    <td width="5%" onclick="loadSubDatalevel()">+</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr>  <tr>   <td width="5%"></td>   <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr>  <tr>   <td width="5%"></td>   <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr> </tbody> <table></td></tr>'); 
} 
} 
function loadSubDatalevel(){ 
if($('#dataNode2').length <= 0){ 
$('#rowId').after('<tr id="dataNode2"><td width="5%;">h</td><td colspan="4"><table class="table_main"> <tbody>   <tr>  <td>Big</td>   <td width="5%">    Sl   </td>   <td>   Label 1    </td>   <td>   Label 1    </td>   <td>   Label 1    </td>   <td>   Label 1    </td>  </tr>  <tr >  <td rowspan="5">  Data1:<b/>    </td>  </tr>  <tr>   <td width="5%"></td>   <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr>  <tr id="rowId">    <td width="5%" onclick="loadSubDatalevel()">+</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr>  <tr>   <td width="5%"></td>   <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr>  <tr>   <td width="5%"></td>   <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>    <td>Some data1</td>   </tr> </tbody> <table></td></tr>'); 
} 
} 
</script> 
</body> 
</html>

источник

2015-03-05 Vishnu

Вы не можете повторять идентификаторы на странице. Также, когда вы вставляете строку, вы не корректируете 'rowspan' первого' td'. Я считаю, что проблема «rowspan» - это то, что вызывает проблемы – charlietfl

Колонка, содержащая «+», шире, после вставки, потому что вставленные линии в нижней части содержит «Некоторые data1» в столбце, заголовок «Sl» (второй столбец, а не третий).

Проблема в том, что во второй строке вашей начальной таблицы у вас есть <td rowspan="5">, но после вставки у вас есть новая строка, поэтому вам необходимо обновить атрибут rowspan до 6. Вы можете сделать это с:

$('.table_main tr:nth-child(2) td').attr('rowspan', $('.table_main tr:nth-child(2) td').attr('rowspan')+1);

источник

2015-03-05 13:53:43

Спасибо, что сработало отлично. – Vishnu

Динамическая таблица, добавленная с jQuery

ответ

Смежные вопросы