Сначала выберите опцию "Создать содержимое td"

#javascript #jquery #html #select #replace

#javascript #jquery #HTML #выберите #заменить

Вопрос:

Есть ли какой-либо способ найти текстовое содержимое td, а затем сделать этот текст первой строкой или опцией в раскрывающемся списке выбора?

 <table class="options">
    <tbody>
        <tr>
            <td><b>Colour:</b></td>
            <td>
                <select>
                    <option selected="" value="">Select:</option>
                    <option value="1">Black</option>
                    <option value="2">White</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

Первое содержимое td (Color:) должно быть заменено первым вариантом (Select:), в основном. У меня нет полного контроля над списком выбора, поэтому мне приходится пытаться делать это динамически. Пытаюсь сэкономить место. В идеале я бы хотел также удалить td после перемещения содержимого.

Ответ №1:

Просто возьмите заголовок из предыдущей ячейки и поместите его в первый вариант. Проверьте это здесь: https://jsfiddle.net/w07vg0ef /

Попробуйте это:

 // do for all selects on the page
$('select').each(function (index, element) {

    // store the select
    var select = $(element)

    // get the caption from the previous cell
    var caption = select.parent().prev('td').text()

    // put the caption to the first option
    select.find('option').first().html(caption) 
})

1. Спасибо. Есть ли способ удалить первый td, взяв его содержимое?

2. Конечно, просто используйте: var caption = select.parent().prev('td').text().remove()

3. Похоже, это не работает. Не могли бы вы обновить полный код на случай, если я поместил его не в то место?

4. Извините, я виноват. Это работает : var caption = select.parent().prev('td').remove().text() . Проверьте это: jsfiddle.net/w07vg0ef/2

Ответ №2:

 $('select').prepend('<option selected=selected>' $('select').closest('tr').find('td:nth-child(1)').text() '</option>');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options">
  <tbody>
    <tr>
      <td><b>Colour:</b>
      </td>
      <td>
        <select>
          <option selected="" value="">Select:</option>
          <option value="1">Black</option>
          <option value="2">White</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

попробуйте это

Ответ №3:

Если вы хотите сделать это только к JavaScript тому времени, взгляните на это:

Добавьте опцию в качестве первого значения, но в качестве нового значения:

 var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = document.createElement("option");
option.text = selectedColor;
select.add(option, select[0]);

 <table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>

Добавьте опцию в качестве значения замены текущего первого значения:

 var getColor = document.getElementsByTagName("td")[0];
var selectedColor = getColor.getElementsByTagName("b")[0].innerHTML;
var select = document.getElementsByTagName("select")[0];
var option = select.options[0];
option.innerHTML = selectedColor;

 <table class="options">
<tbody>
<tr>
<td><b>Color:</b></td>
<td>
<select>
<option selected="" value="">Select:</option>
<option value="1">Black</option>
<option value="2">White</option>
</select>
</td>
</tr>
</tbody>
</table>

Ответ №4:

Вот быстрое решение на чистом javascript. Если возможно, я бы добавил класс в TD, чтобы вы могли лучше настроить его или что-то в этом роде.

 var firstTD = document.getElementsByClassName('options')[0].getElementsByTagName('td')[0];
var text = firstTD.innerHTML;

var selectBox = document.getElementsByTagName('select')[0];
var option = document.createElement('option');
option.setAttribute('value', '');
option.innerHTML = text;


selectBoxFirstChild = document.getElementsByTagName('select')[0].children[0];
selectBox.insertBefore(option, selectBoxFirstChild);