We Keep Coding

how to get nested selectors in siblings

I need to find the siblings of one element. The object I desire to get is nested input. The code belove navigates to td[2] where I need to do some comparison. Afterwords when the comparison is made I need to get to td[4] which contains input. I did try to use nextsibling function but something goes wrong :( Here is the image of html: HTML
var inputs = document.querySelectorAll("table.table.table-condensed.table-top-spacing tr td:nth-child(2)");
inputs.forEach((input)=>{
var final_input = input.find("input[name='quantity']");
final_input.click;
});

According to docs Using Node.nextSibling Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element.
You can track the element's siblings with the example introduced in the MDN documentation here.
var el = input;
i = 1;
while (el) {
if(el.nodeName ==="TARGET_ELEMENT")
break;
console.log(i, '. ', el.nodeName);
el = el.previousSibling;
i++;
}

I think the root cause of your problem is that find is not a method that exists on HTML elements. You might be mistaking it for JQuery.
Instead, you want to use parentElement.querySelector:
const cells = document.querySelectorAll('table tr td:nth-child(2)');
cells.forEach(cell => {
if (cell.textContent === '1') {
const input = cell.parentElement.querySelector('input[name="quantity"]');
input.value = 'matched';
}
})
<table>
<tr>
<td>cell</td>
<td>1</td>
<td>input</td>
<td><input type="text" name="quantity" /></td>
</tr>
<tr>
<td>cell</td>
<td>0</td>
<td>input</td>
<td><input type="text" name="quantity" /></td>
</tr>
<tr>
<td>cell</td>
<td>1</td>
<td>input</td>
<td><input type="text" name="quantity" /></td>
</tr>
</table>

VBA Cycle through check boxes in JavaScript Generated Table

I'm trying to check all of of the boxes in a JS generated table named tblItems
I have tried to getElementsByTagName("td") but it just loads everything as an HTML obj and I can't use InStr to find anything that differentiates them.
This is what I was trying to use to find a value I could use to pick out the check boxes.
Set AllChkBoxes = appIE.document.getElementById("tblItems").getElementsByTagName("td")
For Each box In AllChkBoxes
If InStr(UCase(box), "") <> 0 Then
MsgBox (box)
Else
MsgBox (box)
End If
Next box
End Sub
This is what the check boxes look like I was trying to cycle through the value but was unable to. there are a bunch of other td tag names but they are just values in the table or hrefs
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="0"></td>
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="1"></td>
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="2"></td>
<td align="center"><input type="checkbox" name="chkToPay" checked="" value="3"></td>
Thanks to anyone that can help.

Would help to see more html. Looks like perhaps you can use an attribute = value selector for example. In the following I target the name attribute and associated value
Dim list As Object, i As Long
Set list = ie.document.querySelectorAll("[name=chkToPay]")
For i = 0 To list.Length - 1
Debug.Print list.item(i).Value
Next
You can also combine with a parent id if exists
Dim list As Object, i As Long
Set list = ie.document.querySelectorAll("#tableId [name=chkToPay]")
For i = 0 To list.Length - 1
Debug.Print list.item(i).Value
Next
You can also combine with another attribute to enhance specificity.
Dim list As Object, i As Long
Set list = ie.document.querySelectorAll("#tableId [type=checkbox][name=chkToPay]")
For i = 0 To list.Length - 1
Debug.Print list.item(i).Value
Next
You get the idea.
If you want to check a specific one add in the value attribute
ie.document.querySelector("#tableId [name=chkToPay][value='1']").Click

Might be below code help I am using jquery :
<table id="tableId">
<tr>
<td align="center"><input type="checkbox" name="chkToPay" value="0"></td>
<td align="center"><input type="checkbox" name="chkToPay" value="1"></td>
<td align="center"><input type="checkbox" name="chkToPay" value="2"></td>
<td align="center"><input type="checkbox" name="chkToPay" value="3"></td>
</tr>
$(document).on("click", '#tableId tbody :checkbox[name="chkToPay"]', function(event) {
var currentRows = $('#tableId');
$.each(currentRows, function() {
$(this).find(':checkbox[name=chkToPay]').each(function() {
if($(this). prop("checked") == true){
var parentTr = $(this).parents("tr");
$(this).prop('checked', true);
alert($(this).val());
// if you need text from another td you can access by below line
//alert(parentTr.children("td").eq(0).text());
}
});
});
});

How to clone form elements with auto increamented id to all elements

I have a form under a . I want to clone this and append dynamically in another and so on dynamically. Also I need to assign auto incremented id to all form elements too. Apart from pure javascript I can not use any jQuery or any other library.
Here is my HTML
<tr id="repeat">
<td><input type="text" id="fieldName" /></td>
<td>
<select name="fieldType" id="fieldType">
<option value="string">String</option>
</select>
</td>
<td><input type="radio" id="mandatory" name="mandatory" value="true" /><input type="radio" id="mandatory" name="mandatory" value="false" /></td>
<td>Delete Button</td>
</tr>
Here is my JavaScript
var i = 0;
this.view.findById("start").addEventHandler("click", function () {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true);
original.parentNode.appendChild(clone);
})
Presently I can cloned the form elements in <tr id="repeated1"> dynamically and so on, but unable to assign auto incremented id to input box and select box . Also unable to assign auto incremented name to the radio buttons dynamically

You can change Id or another attribute as you want.
but for your code my solution is using querySelectorAll to get element and change it's Id, something like below code, it is tested and works nice:
Based on this HTML design code and JS function:
function MakeElementsWithDifferentId() {
for (var i = 1; i < 10; i++) {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true);
clone.id="repeat"+i;
clone.querySelectorAll('[id="fieldName"]')[0].id ="fieldName"+i;
clone.querySelectorAll('[id="fieldType"]')[0].id ="fieldType"+i;
clone.querySelectorAll('[id="mandatory"]')[0].id ="mandatory"+i;
clone.children[2].children[0].name="mandatoryName"+i; //To change the radio name also
original.parentNode.appendChild(clone);
}
}
MakeElementsWithDifferentId();
<table>
<tr id="repeat">
<td><input type="text" id="fieldName" /></td>
<td>
<select name="fieldType" id="fieldType">
<option value="string">String</option>
</select>
</td>
<td><input type="radio" id="mandatory" name="mandatory" value="true" /> </td>
<td>Delete Button</td>
</tr>
</table>
the MakeElementsWithDifferentId() function make 10 batch elements with different Ids.
the JSFiddle Test
after run you can right click on element that you want and see the Id by inspect element.
Note:
Instead of clone.querySelectorAll('[id="fieldName"]')[0] it's better to get element by querySelector like clone.querySelector('[id="fieldName"]')
Hope will help you.

How can I select the values of the input checked rows into a table?

I am pretty new in JavaScript development and I have the following situation.
Into a JSP page I have a table having the following strutcure
<TABLE class=standard-table-cls id=senttable>
<TR class=odd>
<TD>
<INPUT name=item type=checkbox alt=Cancella value=68662>
</TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TR>
<TR class=even>
<TD>
<INPUT name=item type=checkbox alt=Cancella value=68661>
</TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TR>
<TR class=odd> ....................................................</TR>
<TR class=even> ....................................................</TR>
<TR class=odd> ....................................................</TR>
<TR class=even> ....................................................</TR>
........................................................................
........................................................................
</TABLE>
As you can see in this table there is a specific column (the first one) that represent a checkbox that the user can check. This column have always setted the value that represent the ID of the object represented by the current row (in the previous example: 68662 and 68661, etcetc)
What I need to do is create a JavaScript function that create a string representing the concatenation of all the values of the value field of the checked rows.
For example if the first 2 rows are checked this string have to be something like: 68662-68661
How can I do something like this?
Tnx

You can use $.fn.map method in combination with join:
var values = $('#senttable :checkbox:checked').map(function() {
return this.value;
}).get().join('-');

You can change your html markup a little bit like this :
<input type="checkbox" name="item[]" value="68662" alt=Cancella>
Then you can call the following javascript function to get the '-' separated string that you need.
function getString()
{
$('input[name="item[]"]:checked').each(function() {
var returnString="";
if($(this).is(':checked'))
{
var chkboxval = $(this).val();
returnString= chkboxval + "-" + returnString
}
}
);
return returnString;
}

Duplicating Div always duplicates

TO BETTER UNDERSTAND MY QUESTION AND SEE CODE VISIT THE FIDDLE: http://jsfiddle.net/dnyXC/
I have a script (below) that allows you to click a icon and it duplicates the table allowing for more inputs on the included form. This issue is, once you click the icon once to duplicate it, anywhere you click on the table regardless of position duplicates the table again.
document.getElementById('line-duplicate').onclick = duplicate;
var i = 0;
function duplicate() {
var original = document.getElementById('item-table' + i);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "item-table" + ++i; // there can only be one element with an ID
clone.onclick = duplicate; // event handlers are not cloned
original.parentNode.appendChild(clone);
}
Here is the html for the table:
<table class="table" id="item-table0">
<tr>
<td>Item Name</td>
<td>Qty/Hrs</td>
<td>Rate</td>
<td>Tax Rate</td>
<td>Type</td>
<td>Cost</td>
<td>Actions</td>
</tr>
<tr>
<td>
<input class="input-medium" type="text" name="" />
</td>
<td>
<input class="input-mini" type="text" name="" placeholder="1" />
</td>
<td>
<input class="input-mini" type="text" name="" placeholder="0.00" />
</td>
<td></td>
<td>
<select class="input-small" name="">
<option>Standard</option>
<option>Expense</option>
</select>
</td>
<td>$0.00</td>
<td><i class="icon-plus" style="cursor:pointer;" id="line-duplicate"></i> <i class="icon-trash pull-right"></i>
</a>
</td>
</tr>
endless duplication is fine, the issue is when you go to type another item into the form, you duplicate the table. I need it so that the only way to duplicate the table is by clicking the plus icon.
TO BETTER UNDERSTAND MY QUESTION AND SEE CODE VISIT THE FIDDLE: http://jsfiddle.net/dnyXC/

The issue is that you are binding the onclick for the entire duplicated row to the duplicate() function.
You should make line-duplicate a class (having multiple elements with the same ID is a bad thing), and use document.getElementsByClassName('line-duplicate') both inside and outside the function to bind the duplicate function to every single element with that class name, like so:
document.getElementsByClassName('line-duplicate')[0].onclick = duplicate;
var i = 0;
function duplicate() {
var original = document.getElementById('item-table' + i);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "item-table" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
var listOfLineDuplicateItems = document.getElementsByClassName('line-duplicate'); // this must be after the table has been appended to the DOM
for (var j = 0; j < listOfLineDuplicateItems.length; ++j) {
listOfLineDuplicateItems[i].onclick = duplicate;
}
}
Here's a JSFiddle.