CODEWITHSUNDEEP
javascriptjqueryhtml
Rupesh
Rupesh

Reputation: 55

Get id,Name,Type,Value and text of input html tags of the each child td of the table row elements

I want to display a table with the id,name,type,value and text of input html tags between each td element of the table. We need to document these details for revamping the app.

Problem: Make changes to the script below to get the id,name,type,value and text of input html tags between each td element

Script:

$(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 Code:

 <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">*&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>

The final output needs the id,name,type,value and text present in the input element that is present between the "td" elemets of the each "tr" of the table

Upvotes: 0

Views: 1098

Answers (3)

user9542745
user9542745

Reputation:

In pure 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
});

Upvotes: 2

martincarlin87
martincarlin87

Reputation: 11052

Not tested but this should be close to what you need, the only thing I'm not sure is what you mean by the text of the input.

$(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());
        });
    });
});

Upvotes: 1

jcubic
jcubic

Reputation: 66560

The problem you have is this:

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

this will never work because in DOM tr is never child of table there is also tbody element (even if you don't have it in your html it's there is DOM).

so you need

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

instead.

NOTE: not sure if this is what you want but in table click you select all tables not the one your clicking on if you want to process only clicked table use $(this).find('tr');

Upvotes: 1

Related Questions