Добавление атрибута к элементу HTML с помощью jQuery - PullRequest
0 голосов
/ 07 июня 2018

Использование jQuery .children ...

var strHtml = $(dt.row(row_idx).child()).children().children().html();

... для передачи следующего HTML:

<tbody>
  <tr>
    <td>Notes:</td>
    <td>some info</td>
  </tr>
  <tr>
    <td>Assistance Required:</td>
    <td>​Translation, writing and speaking capabilities </td>
  </tr>
  <tr>
    <td>Unit:</td>
    <td>not listed</td>
  </tr>
</tbody>

Как получить ячейки метки (<td>Notes:</td>,<td>Assistance Required:</td>, <td>Unit:</td>) и перейдите к следующей соответствующей ячейке значения, чтобы добавить свойство colspan к <td>, а затем вернуть готовый html?

Результат должен выглядеть следующим образом ...

<tbody>
  <tr>
    <td>Notes:</td>
    <td colspan="12">some info</td>
  </tr>
  <tr>
    <td>Assistance Required:</td>
    <td colspan="12">Translation, writing and speaking capabilities </td>
  </tr>
  <tr>
    <td>Unit:</td>
    <td colspan="12">not listed</td>
  </tr>
</tbody>

1 Ответ

0 голосов
/ 07 июня 2018

Возьмите вашу строку и загрузите временный элемент, который вы создаете в памяти только с этой строкой.

Вы можете использовать селектор псевдокласса :nth-child()просто выберите второй дочерний элемент <td> в каждой строке, а затем используйте метод JQuery .attr(), чтобы добавить атрибут к этим элементам:

var strHTML = `<table>
<tbody>
  <tr>
    <td>Notes:</td>
    <td>some info</td>
  </tr>
  <tr>
    <td>Assistance Required:</td>
    <td>​Translation, writing and speaking capabilities </td>
  </tr>
  <tr>
    <td>Unit:</td>
    <td>not listed</td>
  </tr>
</tbody>
</table>`

// Create a temporary element in memory only
var temp = document.createElement("div");

// Load the string into the temp element
$(temp).html(strHTML);

// Now, you can search through the element

$("td:nth-child(2)", temp).attr("colspan", "12"); // Add the attribtue to the second td in each tr
console.log($(temp).html());  // Get the HTML contents of the <table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...