Get id,Name,Type,Value and text of input html tags of the each child td of the table row elements
Question
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
3 answers
solution1
2 2019-04-24 15:46:43
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
});
solution2
1 2019-04-24 14:31:02
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');
solution3
1 ACCPTED 2019-04-24 14:37:14
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());
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.