We Keep Coding

Traversing through table rows and disabling input in second column

please have a look at the below code.
<table>
<tr>
<td>
<select name='td1'>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
</td>
<td>
<select name='td2'>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
</td>
</tr>
</table>
JavaScript:
<script>
document.getElementsByTagName("tr").each(function(){
$(this).getElementsByTagName("td")[1].getElementsByTagName("select").disabled=true;
})
</script>
Requirement is
1. By default, the select field in the second column(i.e, second td's select) must be disabled.
2. the second select field can only be enabled only when the user selects third option in the first select field.
3. the solution must be in pure javascript( not using jquery)
Thanks in Advance.

Array.from(document.querySelectorAll('tr')).forEach(tr => {
const secondSelect = tr.children[1].querySelector('select');
secondSelect.disabled = true;
tr.querySelector('td select').addEventListener('change', function() {
secondSelect.disabled = (this.value != 3);
});
});

This code will work only for one row having two select option,which is perfectly suitable for your example.
var selectTag = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('select')
selectTag[1].disabled = true;
selectTag[0].addEventListener("change", function(){
if(selectTag[0].value == 3){
selectTag[1].disabled = false;
}
else{
selectTag[1].disabled = true;
}
});

for disabeling the select you just need to add the disabled attribute using setAttribute , or element.disabled = true , then listen for the change of the other select and check its value, if it's equal to 3 remove the disabled,
let td2 = document.querySelector('[name=td2]');
td2.disabled = true ;
let td1 = document.querySelector('[name=td1]');
td1.addEventListener('change', function() {
if (+this.value === 3) // the + sign is a shorthand for parseInt
td2.disabled = false ;
else
td2.disabled = true ;
})
<table>
<tr>
<td>
<select name='td1'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</td>
<td>
<select name='td2'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</td>
</tr>
</table>

Iterating over checkboxes in jQuery

I have a table with check-boxes, a dropdown, and other accompanying data.
I'd like to iterate over the rows that have been checked, and pull it's data, add that data into a dictionary, then into a master array.
It seems to be finding the correct rows with check boxes, but my for loop is not pulling each row properly. Here is my js code:
$("#thechecked").click(function(){
var send_list = []
$('#mytable').find(':checkbox:checked').each(function () {
var dict = {};
var value = $("#presetChoosen").val();
var filename = $("#filename").text();
dict['filename'] = filename
dict['value'] = value
send_list.push(dict)
});
console.log(send_list)
});
FULL EXAMPLE IN JSFIDDLE
What am I doing wrong?

You should not use the same ids everywhere like you did on the select element. Id's elements are meant to be unique.
I've used some jQuery methods(parent(), find(), next()) to target the specific values:
var value = $(this).parent().parent().find("select option:checked").val();
var filename = $(this).parent().next("td").text();
Below is a working snippet of what you're trying to achieve:
$("#thechecked").click(function() {
var send_list = []
$('#mytable').find(':checkbox:checked').each(function() {
var dict = {};
var value = $(this).parent().parent().find("select option:checked").val();
var filename = $(this).parent().next("td").text();
dict['filename'] = filename
dict['value'] = value
send_list.push(dict)
});
console.log(send_list)
});
tr,
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr id="mq">
<td><input type="checkbox" /></td>
<td>What</td>
<td>Meta</td>
<td>Preset</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox" /></td>
<td id="filename_1">Underthesea</td>
<td>1920x1080</td>
<td> <select id="presetChoosen_1">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="2">
<td><input type="checkbox" /></td>
<td id="filename_2">Overthehill</td>
<td>1280x720</td>
<td> <select id="presetChoosen_2" value="asd">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="3">
<td><input type="checkbox" /></td>
<td id="filename">Mocking</td>
<td>1280x720</td>
<td> <select id="presetChoosen" value="asd">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
</tbody>
</table>
<button id="thechecked">Get Checked</button>

You're re-using id attributes. IDs are supposed to be unique - and I believe it's actually a WC3 validation error to re-use the same ID in HTML.
You're also not scoping your selector to your checkbox at all.
Change your id="" to name="" and then try the following code concept:
$('#mytable').find('input[type="checkbox"]:checked').each(function () {
var tr = $(this).closest('tr'),
filename = tr.find('[name="filename"]').val();
// [...]
});

Once you get the checkbox (inside the loop), then you need to get the row for that checkbox, eg:
$("#thechecked").click(function(){
var send_list = []
$('#mytable :checkbox:checked').each(function () {
var row = $(this).closest("tr");
var value = row.find("#presetChoosen").val();
var filename = row.find("#filename").text();
var dict = {};
dict['filename'] = filename
dict['value'] = value
send_list.push(dict)
});
console.log(send_list)
});
bit hard to be 100% without your HTML (in the question) and it looks like you have elements with the same id, eg id='presetChoosen' on every row, which is advised against.

Like the accepted answer said, ids should be unique. What I would do is change filename and presetChoosen to classes instead, since they are a type of thing (class), not a particular thing (id). That way you could traverse the DOM in a more readable and easier to understand way:
$("#thechecked").click(function(){
var send_list = [];
$('#mytable').find(':checkbox:checked').each(function (index, checkbox) {
// Find the row this checkbox is in
var row = $(checkbox).closest('tr'),
value = row.find('.presetChoosen').val(),
filename = row.find('.filename').text();
send_list.push({
filename: filename,
value: value
});
});
console.log(send_list);
});
tr,td{border:1px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr id="mq">
<td></td>
<td>What</td>
<td>Meta</td>
<td>Preset</td>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox" /></td>
<td class="filename" >Underthesea</td>
<td>1920x1080</td>
<td> <select class="presetChoosen">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="2">
<td><input type="checkbox" /></td>
<td class="filename" >Overthehill</td>
<td>1280x720</td>
<td> <select class="presetChoosen">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr id="3">
<td><input type="checkbox" /></td>
<td class="filename" >Mocking</td>
<td>1280x720</td>
<td> <select class="presetChoosen">
<option value="Watch">Watch</option>
<option value="Delete">Delete</option>
<option value="None">None</option>
<option value="Other">Other</option>
</select></td>
</tr>
</tbody>
</table>
<button id="thechecked">Get Checked</button>

Add disabled to form option that are on the table list

I have a table and a form with a dropdown:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
and I want to add a disabled attribute to every option on the dropdown that is already on the table resulting in this:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
Is there any way to achieve using jQuery?

$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
DEMO: http://jsfiddle.net/322PA/

Get each item value from the select option and compare it with the data inside table row. If both matches then disable the data/option in dropdownlist/select element.
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle Demo

I am guessing you will be dynamically changing the content of the table and want the select element to update when the table changes. You must therefore make sure it updates each time it's used.
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}

javascript/jquery clone not working in dropdown list

I asked a question in the last post that i want rows to be dynamically generated and the data should be copied in the new row. it is working fine but only for text fields. but i also have dropdown in my form and it isn't showing the last row's selected options in new row.
this was my question
add previous row data to dynamically generated row
i have html code :
<form>
<table border="1" id="engagements">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this)" />
</th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="checkAll(this)" />
</td>
<td>
<select>
<option value = "1">One</option>/>
<option value = "1">two</option>/>
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<select name="mode" id="mode">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
and script code :
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
JS fiddle: http://jsfiddle.net/jW6eL/3/

for performance reasons, jquery doesn't keep selection while making clone of an element. However, you can try using
.clone(true)
this will copy all evens and data with drop down. this way you may use events and and select last option in the drop down.

try this
http://jsfiddle.net/jW6eL/7/
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().html();
$('#engagements tr:last').after('<tr>'+lastRow+'</tr>');
$('#engagements tr:last').find('select').each(function(){
var this_select=$(this);
this_select.val(this_select.closest('tr').prev().find('td:eq('+this_select.closest('td').index()+')').find('select').val())
})
}
});

How to pull value while looping thru a table row?

I have a table that I am looping thru and would like to pull the value from a column in each row. How do I do that?
$('#buildingList tr').each(function () {
//check each column in the row and get value from column 3 which is a drop down
});
<table id="buildingList">
<tr>
<td class="ms-vb2"/>
<td class="ms-vb2"/>
<td class="ms-vb2">
<select id="ddl">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td class="ms-vb2"/>
<td class="ms-vb2"/>
<td class="ms-vb2">
<select id="ddl">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td class="ms-vb2"/>
<td class="ms-vb2"/>
<td class="ms-vb2">
<select id="ddl">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
</table>

Use the :selected option and work with the element's value in your each loop:
$('#buildingList td select option:selected').each(function(i, el) {
// Do something with $(el).val() or el.value
});

Depends what you want to do with the values. If you want to store them in an array you can do it by:
var values = [];
$('#buildingList tr select').each(function (index, elem) {
values.push(elem.value);
});
Also on a side note. You have multiple <select> element's with the same ID. An id-attribute should be unique.

You can directly get the drop downs in the 3rd column of each row using:
$('#buildingList tr td:eq(2) select').each(function () {
var dropDown = $(this); //this refers to the DOM Select
});

$('#buildingList tr td:nth-child(3) select option:selected').each(function () {
var myValue = $(this).text();
});
edited for consolidated version