Блог

Главная - Вопросы по программированию - Получить идентификатор, имя, тип, значение и текст входных html-тегов каждого дочернего td элементов строки таблицы

Получить идентификатор, имя, тип, значение и текст входных html-тегов каждого дочернего td элементов строки таблицы

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я хочу отобразить таблицу с идентификатором, именем, типом, значением и текстом входных html-тегов между каждым элементом td таблицы. Нам необходимо задокументировать эти детали для обновления приложения.

Проблема: Внесите изменения в приведенный ниже сценарий, чтобы получить идентификатор, имя, тип, значение и текст входных html-тегов между каждым элементом td

Скрипт:

 $(document).ready(function(){
  $("table").click(function(){
    alert("Clicked");
   $("table").each(function(){
      var $this = $(this);      //1.Get the table data
      $this.children("tr").each(function(){ // 2.loop through tr elements
        $this.children("td").each(function(){ //3.loop through td and  get 
        //html element between td elements to get their prop given below
        console.log()(this.html().prop('id')); //4.Get id,Name,type() and value
        console.log(this.html().prop('name'));
        console.log(this.html().prop('type'));
            console.log(this.html().prop('value'));
        console.log(this.text);
        });
    });
});
});
});

HTML-код:

  <body>
    <table>
      <tr>
        <td class="tg-0pky" >First row TD</td>
        <td class="tg-0pky" ><input type="text" id="text1" name="num2" value="123"/></td>
      </tr>
      <tr>
        <td class="tg-0pky" >Second row TD</td>
        <td class="tg-0pky" ><input type="radio" id="MA" name="radio1" value="<%=myRadioValue1%>" />Radio1</td>
        <td class="tg-0pky" ><input type="radio" id="FA" name="radio2" value="<%=myRadioValue2%>" />Radio2</td>
      </tr>
        <td class="tg-0pky" >Third row TD</td>
        <td class="tg-0pky" ><input type="checkbox" id="ch1" name="checkbox1" value="<%=myCheckbox%>">CheckBox1</td>
        <td class="tg-0pky" ><input type="checkbox" id="ch2" name="checkbox2" value="<%=myCheckbox%>">CheckBox2</td>
        <td class="tg-0pky">*amp;7454</td>
      </tr>
      <tr>
        <td class="tg-0pky" type="text" name="num2" id="select1" value="<%=myValue%>">Fourth Row TD</td>
    <td>
        <select id="selected" name="dropdown" value="<%=myDropDown%>">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
       </select></td>
      </tr>

    </table>
    </body>
    </html>

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

Ответ №1:

В чистом JavaScript.

 const inputAttributes = {
    ID: 'id',
  NAME: 'name',
  TYPE: 'type',
  VALUE: 'value'
};
const inputs = document.querySelectorAll('tr td input');

inputs.forEach(input => {
    // Input attributes
    [...input.attributes].forEach(attribute => {
    switch(attribute.name) {
        case inputAttributes.ID:
        attribute.name; // attribute id
        attribute.value; // value of attribute id
        break;
      case inputAttributes.NAME:
        attribute.name; // attribute name
        attribute.value; // value of attribute name
        break;
      case inputAttributes.TYPE:
        attribute.name; // attribute type
        attribute.value; // value of attribute type
        break;
      case inputAttributes.VALUE:
        attribute.name; // attribute value
        attribute.value; // value of attribute value
        break;
    }
  });

  // Text next to input
  input.nextSibling; // Radio1, Radio2, CheckBox1, CheckBox2
});

Ответ №2:

Не проверено, но это должно быть близко к тому, что вам нужно, единственное, в чем я не уверен, это то, что вы подразумеваете под text вводом.

 $(document).ready(function(){
    $("table").click(function(){
        var $table = $(this);

        $table.find(':input').each(function( index ) {
            var $input = $(this);
            console.log($input.attr('id'));
            console.log($input.attr('name'));
            console.log($input.attr('type'));
            console.log($input.val());
        });
    });
});

Ответ №3:

Проблема, с которой вы сталкиваетесь, заключается в следующем:

 $('table').children('tr')

это никогда не сработает, потому что в DOM tr никогда не бывает дочернего элемента table , также есть tbody элемент (даже если у вас его нет в вашем html, он есть DOM).

итак, вам нужно

 $('table').find('tr')

вместо этого.

ПРИМЕЧАНИЕ: не уверен, что это то, что вы хотите, но при щелчке по таблице вы выбираете все таблицы, а не ту, на которую вы нажимаете, если вы хотите обрабатывать только выбранную таблицу $(this).find('tr');