Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
126
rated 0 times [  130] [ 4]  / answers: 1 / hits: 38414  / 8 Years ago, tue, july 12, 2016, 12:00:00

I have three tables and i want to check wheter they contain a specific element, e.g. a button with the value 'Previous'. I solved it by using the jquery function find and writing a function, but i need to solve this problem without jquery. Is this possible?




var t1 = document.getElementById(table_one);
var t2 = document.getElementById(table_two);
var t3 = document.getElementById(table_three);

has_prev_button(t1);
has_prev_button(t2);
has_prev_button(t3);

function has_prev_button(element)
{
var has_prev_button = false;
var check = $(element).find(input[type=button]);

for (i=0; i<=check.length-1; i++) {
if (check[i].getAttribute(value) == Previous) {
has_prev_button = true;
}
}

if (has_prev_button) {
document.write(<p>The selected table has a Previous button</p>);
} else {
document.write(<strong><p style='color:red'>The selected table has NO Previous button</p></strong>);
}
}

table {
margin-bottom:40px;
border: 1px solid black;
}

td {
border: 2px solid #D8D8D8;
width: 70px;
}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<table id=table_one>
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type=button value=Previous></td>
<td><input type=button value=Next></td>
</tr>
</table>

<table id=table_two>
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td></td>
<td><input type=button value=Next></td>
</tr>
</table>

<table id=table_three>
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type=button value=Previous></td>
<td><input type=button value=Next></td>
</tr>
</table>




More From » javascript

 Answers
1

Use element.querySelectorAll:





var t1 = document.getElementById(table_one);
var t2 = document.getElementById(table_two);
var t3 = document.getElementById(table_three);

has_prev_button(t1);
has_prev_button(t2);
has_prev_button(t3);

function has_prev_button(element)
{
var has_prev_button = false;
var check = element.querySelectorAll(input[type=button]);

for (i=0; i<=check.length-1; i++)
{
if (check[i].value == Previous)
{
has_prev_button = true;
}
}

if (has_prev_button)
{
document.write(<p>The selected table has a Previous button</p>);
}
else
{
document.write(<strong><p style='color:red'>The selected table has NO Previous button</p></strong>);
}
}

table {
margin-bottom:40px;
border: 1px solid black;
}

td {
border: 2px solid #D8D8D8;
width: 70px;
}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<table id=table_one>
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type=button value=Previous></td>
<td><input type=button value=Next></td>
</tr>
</table>

<table id=table_two>
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td></td>
<td><input type=button value=Next></td>
</tr>
</table>

<table id=table_three>
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type=button value=Previous></td>
<td><input type=button value=Next></td>
</tr>
</table>




[#61411] Sunday, July 10, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
giovanny

Total Points: 314
Total Questions: 101
Total Answers: 90

Location: Tajikistan
Member since Thu, Apr 14, 2022
2 Years ago
;