We Keep Coding

Edit/Print <input> field via Console

Here is what I have. Nothing has IDs, Names or Classes.
Is there anyway to enter a vaue in the input field under City using the Chrome Console and js? Alternatively is there a way I can print the value of said field also using js in the Chrome Console?
I assume it requires using the div City and traversing to next input.
Thanks ahead of time!
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Address</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>City</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Zipcode</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

document.getElementsByTagName("table")[3].getElementsByTagName("input")[0].value="your value"

The boilerplate code
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
try {
var field = document.getElementsByTagName("table")[i].getElementsByTagName("div")[0].textContent;
if (field == "City") {
document.getElementsByTagName("table")[i + 1].getElementsByTagName("input")[0].value = "your values"
}
} catch (err) {}
}

Using array as selectors in jQuery

I am having a little trouble in jQuery.
$(document).on('change', '.filter-status, .filter-week', function() {
var filter = [];
filter.push({
week: $('.filter-week').val(),
status: $('.filter-status').val(),
})
//filter.week('week', $('.filter-week').val());
filter.status = $('.filter-status').val();
var tags = [];
//console.log(filter);
$.each(filter, function(index, value) {
if (value != 'all') {
tags.push(value);
}
});
});
I have a table row that looks as follows:
<tr>
<td>1</td>
<td>Some text...
<td>
<button class="tag" data-tag="1234"></button>
<button class="tag" data-tag="1235"></button>
</td>
</tr>
<tr>
<td>2</td>
<td>Some text...
<td>
<button class="tag" data-tag="1234"></button>
</td>
</tr>
What I am trying to do is to hide a tr that does not contain tag 1234 and 1235.
Edit
To be a bit more clear.
The tags object contains id 1234 and 1235. I want to hide all table rows that do not have both these tags. So if a table row only has 1234 it should be hidden. If it has only 1235 it should be hidden as well. If it has both 1234 and 1235 it should NOT be hidden.

The following will hide any rows that have the same values as your tags array (I have added a class to your button column).
The compare function has been taken from this question
Array.prototype.compare = function(testArr) {
if (this.length != testArr.length) return false;
for (var i = 0; i < testArr.length; i++) {
if (this[i].compare) {
if (!this[i].compare(testArr[i])) return false;
}
if (this[i] !== testArr[i]) return false;
}
return true;
}
var tags = [1234, 1235]; // example tags array
$('.button-holder').filter(function() {
// put data attributes into an array
var buttonsData = [];
$(this).find('button.tag').each(function() {
buttonsData.push(parseInt($(this).data('tag')));
});
return !tags.compare(buttonsData); // compare the arrays
}).closest('tr').hide(); // hide the row if the values are not the same
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>Some text...
<td class="button-holder"> <!-- add class to button column -->
<button class="tag" data-tag="1234"></button>
<button class="tag" data-tag="1235"></button>
</td>
</tr>
<tr>
<td>2</td>
<td>Some text...
<td class="button-holder">
<button class="tag" data-tag="1234"></button>
</td>
</tr>
<tr>
<td>3</td>
<td>Some text...
<td class="button-holder">
<button class="tag" data-tag="1234"></button>
<button class="tag" data-tag="1235"></button>
<button class="tag" data-tag="1236"></button>
</td>
</tr>
</table>
If you are wanting to show all the rows that may have the tags values plus extras, you can use the following containsAll function instead of the compares function above:
Array.prototype.containsAll = function(needles){
for(var i = 0 , len = needles.length; i < len; i++){
if($.inArray(needles[i], this) == -1) return false;
}
return true;
}
var tags = [1234, 1235];
$('.button-holder').filter(function() {
var buttonsData = [];
$(this).find('button.tag').each(function() {
buttonsData.push(parseInt($(this).data('tag')));
});
return !buttonsData.containsAll(tags);
}).closest('tr').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>Some text...
<td class="button-holder">
<button class="tag" data-tag="1234"></button>
<button class="tag" data-tag="1235"></button>
</td>
</tr>
<tr>
<td>2</td>
<td>Some text...
<td class="button-holder">
<button class="tag" data-tag="1234"></button>
</td>
</tr>
<tr>
<td>3</td>
<td>Some text...
<td class="button-holder">
<button class="tag" data-tag="1234"></button>
<button class="tag" data-tag="1235"></button>
<button class="tag" data-tag="1236"></button>
</td>
</tr>
</table>

You can use .filter():
$('table tr').filter(function(i, el) {
return $(el).find('button').eq(0).data('tag') != '1234' ||
$(el).find('button').eq(1).data('tag') != '1235'
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>Some text...</td>
<td>
<button class="tag" data-tag="1234"></button>
<button class="tag" data-tag="1235"></button>
</td>
</tr>
<tr>
<td>2</td>
<td>Some text...</td>
<td>
<button class="tag" data-tag="1234"></button>
</td>
</tr>
</table>

You can find the element and then go back with parents() to find the related <tr>:
$(':not([data-tag="1235"])').each(function() {
$(this).parents('tr').hide();
});
Edited due comments that I misunderstanding the question:
hide a tr that does not contain tag 1234 and 1235.
I missed the not when I read it

Sorting tr elements alphabetically

I'm trying to sort tr but I've no luck by far.
Here is my tr structure.
<tr>
<td>
<a href="./BlueSky-TexasHealthResources/index.php" >Blue Sky-Texas</a>
</td>
<td>
View Data
</td>
<td id="blue_sky_texas">
</td>
</tr>
<tr>
<td id = 'bj'>
<a href="./BountyJobs/index.php" >Bounty Jobs</a>
</td>
<td>
View Data
</td>
</tr>
Here is Javascript that I've tried by far.
<script type="text/javascript">
var $tr = $("tr");
$(document).ready(function () {
var alphabeticallyOrderedTr = $tr.sort(function (a, b) {
return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());
});
$("#container").html(alphabeticallyOrderedTr);
});
</script>
And below is the image for table (unsorted using above code :( ).

.sort() is Array.prototyope method, not jQuery method. Try adding .get() or .toArray() before .sort(function(){}) called ; e.g., $tr.get().sort(
$(document).ready(function() {
var $tr = $("tr");
var alphabeticallyOrderedTr = $tr.get().sort(function(a, b) {
return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());
});
$("#container").append(alphabeticallyOrderedTr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="container">
<tr>
<td>
<a>Y Jobs</a>
</td>
</tr>
<tr>
<td>
<a>Z Jobs</a>
</td>
</tr>
<tr>
<td id='bj'>
Bounty Jobs
</td>
<td>
View Data
</td>
</tr>
<tr>
<td>
<a>X Jobs</a>
</td>
</tr>
<tr>
<td>
Blue Sky-Texas
</td>
<td>
View Data
</td>
<td id="blue_sky_texas">
</td>
</tr>
</table>

How to create HTML table with jQuery and multiplication rows and columns

I need to create HTML table using jQuery dynamically and also I need to make multiplication between rows and columns. My rows is yield and column is price. I have two variables a and b.
var a; //represent price
var b; // represent yield
Now I need to create table and multiplication like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" scope="col">Yield</th>
<th colspan="7" scope="col">Price</th>
</tr>
<tr>
<td>a-1.5</td>
<td>a-1</td>
<td>a-0.5</td>
<td>a</td>
<td>a+0.5</td>
<td>a+1</td>
<td>a+1.5</td>
</tr>
<tr>
<th scope="row">b-500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b-100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b</th>
<td> </td>
<td> </td>
<td> </td>
<td>a*b</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+100</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+200</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+300</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+400</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">b+500</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
http://jsfiddle.net/nexetdad/
So columns is based on price +/- and rows are based on yield +/-. How I can create with JavaScript table matrix so every cell need to be calculated (a*b)?
Please give me some ideas. I don't know where to start.

I think you are lack of DOM skill.
You can refer it.
<head>
<script type="text/javascript">
function addlabel(s,n){
if (n > 0){
return s + "+" + String(n);
}
else if (n < 0){
return s + String(n);
}
else{
return s;
}
}
function multiplicationTable(){
x = document.getElementById("i1").value;
x = parseInt(x);
y = document.getElementById("i2").value;
y = parseInt(y);
var table = '<table border="1px"><thead>';
table += '<tr><th></th>'
for (var a = -1.5; a<= 1.5 ; a+=0.5){
table += '<th>'+ addlabel("a", a) +'</th>';
}
table += '</tr></thead><tbody>'
// add num
for (var b = y-500, ob = y; b<= y+500 ; b+=100){
table += "<tr>";
table += "<td>" + addlabel("b",b-ob) + "</td>"
for (var a = x-1.5; a<= x+1.5 ; a+=0.5){
table += '<td>'+ a*b +'</td>';
}
table += "</tr>";
}
return table + '</tbody></table>';
}
function build(){
document.getElementById('here').innerHTML = multiplicationTable();
}
</script>
</head>
<body>
<form name="f">
<input type="text" value ="15" name="r" id="i1">
<input type="text" value ="5000" name="c" id="i2">
<input type="button" value="make table" onclick="build()">
</form>
<div id="here">
</div>
</body>
https://jsfiddle.net/tonypythoneer/z5reeomj/2/

Although i dont know much about js and jquery you can mix them and this could be done. Go for nested for loop for creating your table and use append() of jquery for appending the content of table and simple multiplication.
By the way this can done easily using php.

jquery auto print the row number

i've a table with 10 row, is it possible to print the row number (from 1 to 9, the first row is NO&title, the second row should be 1) to the td with class "sno" based on the size of the table? here is the html:
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
the result should be
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno">1</td>
<td> </td>
</tr>
<tr>
<td class="sno">2</td>
<td> </td>
</tr>
<tr>
<td class="sno">3</td>
<td> </td>
</tr>
<tr>
<td class="sno">4</td>
<td> </td>
</tr>
<tr>
<td class="sno">5</td>
<td> </td>
</tr>
<tr>
<td class="sno">6</td>
<td> </td>
</tr>
<tr>
<td class="sno">7</td>
<td> </td>
</tr>
<tr>
<td class="sno">8</td>
<td> </td>
</tr>
<tr>
<td class="sno">9</td>
<td> </td>
</tr>
The question is not generate the table, it is print the right number to target

Try with the simpleone
$('table tbody tr').not(":first").each(function(idx){
$(this).children(":eq(0)").html(idx + 1);
});

Here is the jsfiddle example: http://jsfiddle.net/3BBEN/
$(document).ready(function(){
//use a special class name or id for the table
//using find I'm getting all tr elements in the table
//using not(':eq(0)') I'm ignoring the first tr element
//using each I'm iterating through the selected elements
$('table').find('tr').not(':eq(0)').each(function(i){
//using children('td:eq(0)') I'm getting the first td element inside the tr
$(this).children('td:eq(0)').addClass('sno').text(i+1);
});
});

Table row elements have a rowIndex property that is the zero–based sequence number for the table
section that they are in. So if you have a reference to a cell you can use:
var rowIndex = cell.parentNode.rowIndex;
If you have header rows in a table, you probably should put them in a thead table section, then
you can number the rows in tbody section easily, e.g.
<table>
<thead>
<tr>
<td>head<td>head
</tr>
</thead>
<tbody>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
</tbody>
</table>
So now you can do something like:
window.onload = function() {
var table = document.getElementsByTagName('table')[0];
var rows = table.tBodies[0].rows;
for (var i=0, iLen=rows.length; i<iLen; i++) {
rows[i].cells[0].innerHTML = i + 1;
}
};
Of course you can get the rows some other way (e.g. class), but the above is independent of that.

Try this:
$(document).ready(function(){
$cells=$("table td.sno");
for(var i=0;i<$cells.length;i++)
{
// alert(i);
$cells.eq(i).text(i);
}
});
Check on fiddle http://jsfiddle.net/qcWec/1/

try this::
$(document).ready(function(){
var i=1;
$('.sno').each(function(){
$(this).text(i);
i++;
});
});