I have a table with three columns: a, b and c. The above code works for column a, b and c. The third column gives undefined value. I want to prevent this column from comparing, i.e. if I enter values in column a and b and leave column c as it is, the data should be saved. How to achieve this?
function saving(id) {
var store;
$('#mt .tb tr td').each(function() {
var value = $(this).find("input").val();
if (value === '' || value == null || value == " ")
store == "0";
else
store == "1";
});
if (store = "0") {
alert("empty rows cannot be saved")
return false;
} else
return true;
alert("saving successful")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mt">
<tr>
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
</thead>
</tr>
<tr>
<tbody class="tb">
<td><input id="a"></td>
<td><input id="b"></td>
<td><i class="fa fa-pencil Addbtn"></i></td>
</tbody>
</tr>
<input type="submit" value="Save" onclick="return saving()">
</table>
You can add a class to the columns you don't want to compare
<td class='nocompare'>
and exclude those
$('#mt .tb tr td:not(.nocompare)').each
(or you could add compare to the ones you do want to compare to remove the double negative.
There were some other fundamental issues with the code:
setting a value uses = not == (store == 0)
comparing a value uses == (or ===) not = (if (store = 0))
you had an alert after the last return which would never get hit
by setting store = 1, your check only needs the last column to have a value and will pass if all of the ones before failed.
for the last issue, you can add up a count of all the passes and compare with how many there should be, eg:
var pass = 0;
$('#mt .tb tr td.check').each(function() {
var value = $(this).find("input").val();
if (value === '' || value == null || value == " ")
; // fail
else
pass++;
});
if (pass == $('#mt .tb tr td.check').length))
// all passed
or you can go with a bit flag and AND it as below.
function saving(id) {
var store = 1;
$('#mt .tb tr td.check').each(function() {
var value = $(this).find("input").val();
if (value === '' || value == null || value == " ")
store = 0;
else
store = store & 1;
});
if (store == "0") {
alert("empty rows cannot be saved")
return false;
} else {
alert("saving successful")
return true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mt">
<tr>
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
</thead>
</tr>
<tr>
<tbody class="tb">
<td class='check'><input id="a"></td>
<td class='check'><input id="b"></td>
<td><i class="fa fa-pencil Addbtn"></i></td>
</tbody>
</tr>
<input type="submit" value="Save" onclick="return saving()">
</table>
Related
I am trying to get the values of checkboxes which are in the same divid but have different class name.
<tr>
<td colspan="4" align="center">
<div id="divEntities" style="width:100%;height:150px;overflow-y:scroll;align:center;">
<table cellspacing="2" cellpadding="2" width="95%" align="center" border="1">
#{
var i = 0;
while (i < Model.CompanyMaster.Count)
{
<tr>
<td style="width:50%" hidden="hidden"><input type="checkbox" class="EntityCheck" id="chkCompanyId" /> #Model.CompanyMaster[i].COMPANYID</td>
#if ((i + 1) < Model.CompanyMaster.Count)
{
<td><input type="checkbox" class="EntityCheck" /> #Model.CompanyMaster[i + 1].COMPANY_NAME</td>
<td><input type="checkbox" class="CurrentYear" /> #DateTime.Now.Year </td>
<td><input type="checkbox" class="PreviousYear" /> #DateTime.Now.AddYears(-1).Year </td>
<td><input type="checkbox" class="LastYear" /> #DateTime.Now.AddYears(-2).Year </td>
}
else
{
<td></td>
}
</tr>
i = i + 1;
}
}
</table>
</div>
</td>
</tr>
With above code, I am able to populate data in a table with multiple checkboxes, but unable to get the value of the checkbox where the class name is something other than EntityCheck. Below is my jQuery function:
function GetSelectedEntities() {
var entities = "";
$("#divEntities").find('td').each(function (i, el) {
var checkbox = $(this).find('input.EntityCheck');
//var check1 = $(this).find('CurrentYear');
//var check2 = $(this).find('PreviousYear');
//var check3 = $(this).find('LastYear');
var check1 = $('.CurrentYear').val();
var check2 = $('.PreviousYear').val();
var check3 = $('.LastYear').val();
if (checkbox != undefined && $(checkbox).length > 0 && $(checkbox).prop('checked') == true) {
var EntityData = jQuery.trim($(this).text());
if (entities == "") {
entities = EntityData;
}
else {
entities = entities + "|" + EntityData;
}
}
});
return entities;
}
jQuery function is invoked on a button click event:
<button style="font:normal 9pt Arial;height:30px;width:100px;border-radius:5px; border:none; background-color:royalblue; color:white" id="btnAdd" onclick="GetSelectedEntities(event);">
Add
</button>
I tried by giving the same class name to all the checkboxes but the problem was that I was able to get the values of the year checkbox, even if the CompanyName was not selected. I need the year values only if the CompanyName checkbox is checked and it's corresponding years. I also tried by giving the id='' to the year checkbox, but could not get the values.
I am unable to figure where I am going wrong. What is that I need to change in my jQuery to get the expected result?
Something like this would work:
$('#btnAdd').on('click', function(){
var checked = $('table').find('input:checked');
checked.each(function(){
alert($(this).closest('td').text());
//do your stuff here..
});
});
Se working fiddle: https://jsfiddle.net/c8n4rLjy/
I had to make changes to get the desired solution. Please find the solution below:
<tr>
<td colspan="4" align="center">
<div id="divEntities" style="width:100%;height:150px;overflow-y:scroll;align:center;">
<table cellspacing="2" cellpadding="2" width="95%" align="center" border="1">
#{
var i = 0;
while (i < Model.CompanyMaster.Count)
{
<tr>
<td style="width:50%" hidden="hidden"><input type="checkbox" class="EntityCheck" id="chkCompanyId" /> #Model.CompanyMaster[i].COMPANYID</td>
#if ((i + 1) < Model.CompanyMaster.Count)
{
<td><input type="checkbox" class="EntityCheck" /> #Model.CompanyMaster[i + 1].COMPANY_NAME</td>
<td><input type="checkbox" class="chkYear" /> #DateTime.Now.Year </td>
<td><input type="checkbox" class="chkYear" /> #DateTime.Now.AddYears(-1).Year </td>
<td><input type="checkbox" class="chkYear" /> #DateTime.Now.AddYears(-2).Year </td>
}
else
{
<td></td>
}
</tr>
i = i + 1;
}
}
</table>
</div>
</td>
</tr>
jQuery:
function GetSelectedEntities() {
var entities = "";
var CompanySelected = false;
var counter = 0;
$("#divEntities").find('td').each(function (i, el) {
counter = counter + 1
var checkbox = $(this).find('input.EntityCheck');
var checkboxyear = $(this).find('input.chkYear');
if (counter == 2) {
if (checkbox != undefined) {
if ($(checkbox).prop('checked') == true) {
CompanySelected = true;
var EntityData = jQuery.trim($(this).text());
if (entities == "") {
entities = EntityData;
}
else {
entities = entities + "-" + EntityData;
}
}
else {
CompanySelected = false;
}
}
}
if (counter > 2) {
if (CompanySelected == true) {
if (checkboxyear != undefined) {
if ($(checkboxyear).prop('checked') == true) {
var EntityData = jQuery.trim($(this).text());
entities = entities + "|" + EntityData;
}
}
}
}
if(counter == 5)
{
counter = 0;
}
});
return entities;
}
PROBLEM:
I have form which submits list of fields. My form includes 2 'overwrite' fields:
counter - how many items to be submitted
field overwrite - if filled it suppose to overwrite all inputs in table with the same value
finally I have 5 field inputs (field_1, field_2, field_3, field_4 and field_5).
What I am trying to do is:
Counter - when filled it will disable field_ with number lower than value in counter, eg. when counter = 3, inputs field_4 and field_5 will get disabled.
field_0 - when empty, I would like user to be able to fill anything in table. When populated, I would like field_0 to be copied over to all cells in table.
WHAT I HAVE DONE:
I currently have extremely inefficient working code. I have complicated 'if' statement which checks counter and field_0 individually for every single of items (field_1 - field_5) one by one and sets them to enable/disable or copies over field_0 value. I also have 'clearFieldClass' function which clears all items with class 'field' when field_0 is being changed. While it works for 5 fields and one field type final version of the page will have 200 fields x 10 different classes. I am trying to avoid having 2000 lines of code doing basically he same thing.
function clearFieldClass() {
var elements = [] ;
elements = document.getElementsByClassName("field");
for(var i=0; i<elements.length ; i++){
elements[i].value = "" ;
}
}
<form action="https://www.tobesubmitted.to.com?" onchange="
if (counter.value > 0 && field_0.value == '') {document.getElementById('field_1').disabled = false;} else if (counter.value > 0 && field_0.value !== '') {field_1.value = field_0.value, document.getElementById('field_1').disabled = false;} else {document.getElementById('field_1').disabled = true; field_1.value = ''};
if (counter.value > 1 && field_0.value == '') {document.getElementById('field_2').disabled = false;} else if (counter.value > 1 && field_0.value !== '') {field_2.value = field_0.value, document.getElementById('field_2').disabled = false;} else {document.getElementById('field_2').disabled = true; field_2.value = ''};
if (counter.value > 2 && field_0.value == '') {document.getElementById('field_3').disabled = false;} else if (counter.value > 2 && field_0.value !== '') {field_3.value = field_0.value, document.getElementById('field_3').disabled = false;} else {document.getElementById('field_3').disabled = true; field_3.value = ''};
if (counter.value > 3 && field_0.value == '') {document.getElementById('field_4').disabled = false;} else if (counter.value > 3 && field_0.value !== '') {field_4.value = field_0.value, document.getElementById('field_4').disabled = false;} else {document.getElementById('field_4').disabled = true; field_4.value = ''};
if (counter.value > 4 && field_0.value == '') {document.getElementById('field_5').disabled = false;} else if (counter.value > 4 && field_0.value !== '') {field_5.value = field_0.value, document.getElementById('field_5').disabled = false;} else {document.getElementById('field_5').disabled = true; field_5.value = ''};
">
<table border="0">
<tr>
<th align="left">Overwrites</th>
<th></th>
</tr>
<tr>
<td><label>Counter </label></td>
<td><input required type="text" id="counter" name="counter" placeholder="Max 50"></input></td>
</tr>
<tr>
<td><label>Overwrite field: </label></td>
<td><input required type="text" id="field_0" name="field_0" placeholder="Field" onchange="clearFieldClass()"></input></td>
</tr>
</table><br><br>
<table>
<tr align="left">
<th>Field</th>
</tr>
<tr>
<td><input required type="text" class='field' id="field_1"></td>
</tr>
<tr>
<td><input required type="text" class='field' id="field_2"></td>
</tr>
<tr>
<td><input required type="text" class='field' id="field_3"></td>
</tr>
<tr>
<td><input required type="text" class='field' id="field_4"></td>
</tr>
<tr>
<td><input required type="text" class='field' id="field_5"></td>
</tr>
</table>
<input type="submit" value="Submit form"></input>
Remove onchange attribute from your html and use the following code:
document.querySelector('form').addEventListener('change', () => {
document.querySelectorAll('.field').forEach((_el, index) => {
if(!isNaN(+counter.value) && +counter.value != 0 && index + 1 > +counter.value){
_el.disabled = 'disabled';
_el.value = '';
console.log('in')
}
else{
_el.removeAttribute('disabled');
_el.value = field_0.value;
}
});
})
I have the next table:
<table id="table_id">
<tr>
<td>Test</td>
<td>Description</td>
<td>Date</td>
</tr>
<tr>
<td><select>
<option val="1">Math</option>
<option val="2">Chemistry</option>
<option val="3">Biology</option>
</select></td>
<td><input type="text" id="txt_desc"/></td>
<td><input type="text" id="date"/></td>
</tr>
</table>
And the next javascript code for get the values
val_test_op = '';
parent.$('#table_id option:selected').each(function (index,value){
test = $.text(value).trim();
if ( index === 0 && test || index % 1 === 0 && test ) {
val_test_op += index +' TEST: ' + test;
return;
}
})
val_test_input = '';
parent.$('#table_id td>input').each(function (index,value){
test = this.value;
if ( index === 0 && test || index % 2 === 0 && test ) {
texto_examen_input += index +' Description: ' + test;
return;
}
if ( index === 1 && test || index % 3 === 0 && test ) {
texto_examen_input += index +' Date: ' + test;
return;
}
})
My question is: ¿ How i get the value from the option:selected and input text in a only "each function" ?
I don't think you need a each function for getting values from fields in the table.
If you add ids to the fields, you could select those directly with jquery then use the val function to get their values easily.
<table id="table_id">
<tr>
<td>Test</td>
<td>Description</td>
<td>Date</td>
</tr>
<tr>
<td><select id="txt_test">
<option val="1">Math</option>
<option val="2">Chemistry</option>
<option val="3">Biology</option>
</select></td>
<td><input type="text" id="txt_desc"/></td>
<td><input type="text" id="txt_date"/></td>
</tr>
</table>
Then with javascript:
val_test_op = $('#txt_test').val();
texto_examen_desc = $('#txt_desc').val();
texto_examen_date = $('#txt_date').val();
If you really want to use a single each function to get all the values, you could use the :input selector that jquery provides and do the following:
values = '';
$('#table_id').find(':input').each(function (index, input) {
values += $(input).val();
});
I added in a button to alert what the selected value is.
function myFunction(){
var theSelect = document.getElementById("table_id").getElementsByTagName("select")[0];
var selectedOption = theSelect.options[theSelect.selectedIndex].text;
alert(selectedOption);
}
document.getElementById("myButton").addEventListener("click", myFunction, false);
https://jsfiddle.net/e1hxn6kL/
Give your select an ID such as id="opts"
Then
var opts = [];
$.each($("#opts:selected"),function(opt){
opts.push(opt.Val());
}
var txt_desc = $("#txt_desc").Val();
var date = $("#date").Val();
Or similar
I need to compare two HTML tables' rows assuming that data in first cell can be duplicated but data in second cell is always unique. I need to find whether first cell AND second cell in table1 is the same as data in first cell AND second cell in table2 for instance:
Table1:
<Table>
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>0</td>
<td>312</td>
</tr>
<tr>
<td>123</td>
<td>323331</td>
</tr>
</Table>
Second table:
<table>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>545</td>
<td>3122</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
</table>
The result of this should be:
123 321 - good, do nothing
545 345 - good, do nothing
545 3122 - wrong its not in table1 <-
Here's what I've got so far...
$('#runCheck').click(function(){
var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');
$(secondTable).each(function(index){
var $row = $(this);
var secTableCellZero = $row.find('td')[0].innerHTML;
var secTableCellOne = $row.find('td')[1].innerHTML;
$(firstTable).each(function(indexT){
if ($(this).find('td')[0].innerHTML === secTableCellZero){
if ($(this).find('td')[1].innerHTML !== secTableCellOne){
$('#thirdDiv').append("first: " + secTableCellZero + " second: " + secTableCellOne+"<br>");
}
}
});
});
});
Where am I going it wrong?
Just to clarify once again:
2nd table says :
row1 - john|likesCookies
row2 - peter|likesOranges
1st table says :
row1 - john|likesNothing
row2 - john|likesCookies
row3 - steward|likesToTalk
row4 - peter|likesApples
now it should say :
john - value okay
peter - value fail.
a lot alike =VLOOKUP in excel
Check this working fiddle : here
I've created two arrays which store values in each row of tables 1 and 2 as strings. Then I just compare these two arrays and see if each value in array1 has a match in array 2 using a flag variable.
Snippet :
$(document).ready(function() {
var table_one = [];
var table_two = [];
$("#one tr").each(function() {
var temp_string = "";
count = 1;
$(this).find("td").each(function() {
if (count == 2) {
temp_string += "/";
}
temp_string = temp_string + $(this).text();
count++;
});
table_one.push(temp_string);
});
$("#two tr").each(function() {
var temp_string = "";
count = 1;
$(this).find("td").each(function() {
if (count == 2) {
temp_string += "/";
temp_string = temp_string + $(this).text();
} else {
temp_string = temp_string + $(this).text();
}
count++;
});
table_two.push(temp_string);
});
var message = "";
for (i = 0; i < table_two.length; i++) {
var flag = 0;
var temp = 0;
table_two_entry = table_two[i].split("/");
table_two_cell_one = table_two_entry[0];
table_two_cell_two = table_two_entry[1];
for (j = 0; j < table_one.length; j++) {
table_one_entry = table_one[j].split("/");
table_one_cell_one = table_one_entry[0];
table_one_cell_two = table_one_entry[1];
console.log("1)" + table_one_cell_one + ":" + table_one_cell_two);
if (table_two_cell_one == table_one_cell_one) {
flag++;
if (table_one_cell_two == table_two_cell_two) {
flag++;
break;
} else {
temp = table_one_cell_two;
}
} else {}
}
if (flag == 2) {
message += table_two_cell_one + " " + table_two_cell_two + " found in first table<br>";
} else if (flag == 1) {
message += table_two_cell_one + " bad - first table has " + temp + "<br>";
} else if (flag == 0) {
message += table_two_cell_one + " not found in first table<br>";
}
}
$('#message').html(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="one">
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>0</td>
<td>312</td>
</tr>
<tr>
<td>123</td>
<td>323331</td>
</tr>
</table>
<hr>
<table id="two">
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>545</td>
<td>3122</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
</table>
<hr>
<div id="message">
</div>
</div>
If I understand your requirements, it would be easier to read the first table and store the couples as strings: 123/321, 545/345, etc...
Than you can read the second table and remove from the first list all the rows found in both.
What remains in the list are couples that do not match.
From purely an efficiency standpoint if you loop through the first table just once and create an object using the first cell value as keys and an array of values for second cells, you won't have to loop through that table numerous times
this then makes the lookup simpler also
var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');
var firstTableData = {}
firstTable.each(function() {
var $tds = $(this).find('td'),
firstCellData = $tds.eq(0).html().trim(),
secondCellData == $tds.eq(1).html().trim();
if (!firstTableData[firstCellData]) {
firstTableData[firstCellData] = []
}
firstTableData[firstCellData].push(secondCellData)
})
$(secondTable).each(function(index) {
var $tds = $(this).find('td');
var secTableCellZero = $tds.eq(0).html().trim();
var secTableCellOne = $tds.eq(1).html().trim();
if (!firstTableData.hasOwnProperty(secTableCellZero)) {
console.log('No match for first cell')
} else if (!firstTableData[secTableCellZero].indexOf(secTableCellOne) == -1) {
console.log('No match for second cell')
}
});
I'm not sure what objective is when matches aren't found
I've managed to modify a filterable table JS script to my liking, but I'd like to make it more advanced by making it so I can filter from the remaining filtered items, but I'm not quite sure how to go about it.
Here's a jsfiddle with a similar setup to what I have. The code has gotten significantly more messy since I started messing with it, you might be able to see that I was trying to use the form to ensure we didn't start overwriting our display:none's but then I realised I was a bit over my head.
To clarify, what I'd like to be able to do is to filter say, the name, and then filter that remaining list even further, say, by type.
Is there an efficient way of doing this that I'm completely missing?
Here is the original filter code which was much cleaner before I messed with it:
function filter(term, _id, cellNr){
var suche = term.value.toLowerCase();
var table = document.getElementById(_id);
var ele;
for (var r = 2; r < table.rows.length; r++){
ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g,"");
if (ele.toLowerCase().indexOf(suche)>=0 )
table.rows[r].style.display = '';
else table.rows[r].style.display = 'none';
}
}
I myself would do it like this:
function filter(_id) {
var table = document.getElementById(_id);
//get all filters.
var getFilters = [table.querySelectorAll("input")[0].value.toLowerCase(),
table.querySelectorAll("input")[1].value.toLowerCase(),
table.querySelectorAll("input")[2].value.toLowerCase()]
for (var r = 2; r < table.rows.length; r++)
{
//strip tags
var el1 = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g, "");
var el2 = table.rows[r].cells[1].innerHTML.replace(/<[^>]+>/g, "");
var el3 = table.rows[r].cells[2].innerHTML.replace(/<[^>]+>/g, "");
var search1 = el1.toLowerCase().indexOf(getFilters[0]);
var search2 = el2.toLowerCase().indexOf(getFilters[1]);
var search3 = el3.toLowerCase().indexOf(getFilters[2]);
//test all searches, if found or el = empty display
if ( (search1 >= 0 || el1 == "" ) && (search2 >= 0 || el2 == "" ) && (search3 >= 0 || el3 == "" )) {
table.rows[r].style.display = '';
} else {
table.rows[r].style.display = 'none';
}
}
}
<table id="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
</tr>
<tr>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input></td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input></td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input></td>
</tr>
<tr>
<td>1</td>
<td>Bulbasaur</td>
<td>Grass</td>
</tr>
<tr>
<td>4</td>
<td>Charmander</td>
<td>Fire</td>
</tr>
<tr>
<td>7</td>
<td>Squirtle</td>
<td>Water</td>
</tr>
<tr>
<td>1</td>
<td>Bulbasaur</td>
<td>Poison</td>
</tr>
<tr>
<td>6</td>
<td>Charizard</td>
<td>Flying</td>
</tr>
</table>
First, get all input from the input boxes. Store it in an array called getFilters.
Then:
search the different cells and see if there is a match.
When there is a match (Not -1) or when the input of that column was empty return true. All three conditions need to return true for a row to show. If not hide the row.
So id : 1 with the two other inputs empty would yield only bulbasaur with two types.
The real trick here are the conditions:
(search1 >= 0 || el1 == "" ) && (search2 >= 0 || el2 == "" )
They are divided into blocks with the parentheses. The will evaluate seperately into true or false. There are three of those blocks in this example.
This was answered quite a while ago and it deservers a more modern approach:
function filter(_id) {
const table = document.getElementById(_id);
//get all filters
const getFilters = [...table.querySelectorAll("input")].map(element => element.value.toLowerCase());
document.querySelectorAll("tr:nth-child(n+3) > td:first-child").forEach((firstTD) => {
//iterate to the next to td's using nextSibling
const textArray = [firstTD.textContent, firstTD.nextElementSibling.textContent, firstTD.nextElementSibling.nextElementSibling.textContent];
const found = textArray.every((element, index) => {
return element.toLowerCase().indexOf(getFilters[index]) >= 0 || getFilters[index] == "";
});
if (found) {
firstTD.parentElement.style.display = '';
} else {
firstTD.parentElement.style.display = 'none';
}
});
}
<table id="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
</tr>
<tr>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input>
</td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input>
</td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('table')" type="text" size="3"></input>
</td>
</tr>
<tr>
<td>1</td>
<td>Bulbasaur</td>
<td>Grass</td>
</tr>
<tr>
<td>4</td>
<td>Charmander</td>
<td>Fire</td>
</tr>
<tr>
<td>7</td>
<td>Squirtle</td>
<td>Water</td>
</tr>
<tr>
<td>1</td>
<td>Bulbasaur</td>
<td>Poison</td>
</tr>
<tr>
<td>6</td>
<td>Charizard</td>
<td>Flying</td>
</tr>
</table>