Develop Reference

How to disable the original delete button after cloning also to do auto increment for the id textbox

I have clone rows code which include textboxes and delete button and I want to disable the original delete button only after cloning also i need the id textbox to auto increase when cloned
function tablerow(addRow) {
var table = document.getElementById('tablebody');
var row = document.getElementById('tablerow');
var clone = row.cloneNode(true);
clone.id = "newid";
var InputType = clone.getElementsByTagName('input');
for (var i = 0; i < InputType.length; i++) {
InputType[i].value = '';
}
table.appendChild(clone);
}
function deleteRow(delRow){
while (delRow.parentNode && delRow.tagName.toLowerCase() != 'tr') {
delRow = delRow.parentNode;
}
if (delRow.parentNode && delRow.parentNode.rows.length > 1) {
delRow.parentNode.removeChild(delRow);
}
}
<button type="button" onclick="tablerow()">Add</button>
<table>
<tbody id="tablebody">
<tr id="tablerow">
<td><input type="text" value="1" disabled/></td>
<td><input type="text"/></td>
<td><button type="button"/>Delete</button onClick="deleteRow(this)"></td>
</tr>
</tbody>
</table>

Here is a mixed JS/CSS solution
function tablerow(addRow) {
var table = document.getElementById('tablebody');
var row = document.getElementById('tablerow');
var clone = row.cloneNode(true);
clone.id = "newid";
[...clone.querySelectorAll('input')].forEach(inp => {
if (inp.classList.contains("del")) inp.classList.remove("first")
else inp.value = "";
})
table.appendChild(clone);
}
window.addEventListener("load", function() {
document.getElementById("add").addEventListener("click", function() {
tablerow()
})
document.getElementById("tablebody").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.classList.contains("del")) tgt.closest("tr").remove()
})
})
.first {
visibility: hidden;
pointer-events: none;
}
<button type="button" id="add">Add</button>
<table>
<tbody id="tablebody">
<tr id="tablerow">
<td><input type="text" value="1" disabled/></td>
<td><input type="text" /></td>
<td><input type="button" class="del first" value="Delete" /></td>
</tr>
</tbody>
</table>

docent display pop up with table id

When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});

How to find out which button was clicked in handler function

In my code, I need to make it so when button 1 is pressed it sets a number to be "1" and if button 2 is pressed, it sets the number to be 2.
<!DOCTYPE html>
<html>
<body>
<table style="width:65%;height:100px">
<tr><td align="center" id="blockOne">
<p><button onclick="addGraph()" id="buttonOne">Create Graph/Chart</button></p>
<tr><td align="center" id="blockTwo">
<p><button onclick="addGraph()"id ="buttonTwo">Create Graph/Chart</button></p>
</table>
</body>
<script>
var button1 = document.getElementById('buttonOne');
var button2 = document.getElementById('buttonTwo');
var container = "0";
// When the user clicks the button, open the modal
function addGraph() {
{
if (button1.onclick === true) {
container = "1";
}
if (button2.onclick === true) {
container = "2";
}
}
console.log(container);
}
</script>
</html>

You can simply pass a parameter in your addGraph function which can be assigned to container as button1.onclick is not a valid way that gives you a boolean result.
var button1 = document.getElementById('buttonOne');
var button2 = document.getElementById('buttonTwo');
var container = "0";
function addGraph(value) {
container = value;
console.log(container);
}
<table border='1' style="width:65%;height:100px">
<tr><td align="center" id="blockOne">
<p><button onclick="addGraph(1)" id="buttonOne">Create Graph/Chart</button></p></tr>
<tr><td align="center" id="blockTwo">
<p><button onclick="addGraph(2)"id ="buttonTwo">Create Graph/Chart</button></p></tr>
</table>

You can check which button was pressed by passing this as your function parameter.
Then, simply check your element's id and edit container with :
container = elem.id == 'buttonOne' ? "1" : "2";
var container = "0";
// When the user clicks the button, open the modal
function addGraph(elem) {
container = elem.id == 'buttonOne' ? "1" : "2";
console.log(container);
}
<table style="width:65%;height:100px">
<tr>
<td align="center" id="blockOne">
<p><button onclick="addGraph(this)" id="buttonOne">Create Graph/Chart</button></p>
<tr>
<td align="center" id="blockTwo">
<p><button onclick="addGraph(this)" id="buttonTwo">Create Graph/Chart</button></p>
</table>

You can define the function to accept the number as input, and make the onclick function called filled with the dedicated number.
<button onclick="addGraph(1)">Some text</button>
In this case you don't even need to define the button id, if you don't need to manipulate the buttons.

Notice that in your Html you should open and close all the html elements.
In your JavaScript logic you can select multiple elements by their ids with document.querySelectorAll('#buttonOne, #buttonTwo')
Than just iterate over all them with Array.prototype.forEach() to dynamically attach the click event listener and handle the container value like this container = (index + 1).toString();
Code:
let container = '0';
document
.querySelectorAll('#buttonOne, #buttonTwo')
.forEach((el, index) => el.addEventListener('click', () => {
container = (index + 1).toString();
console.log(container);
}));
<table style="width:65%;height:100px">
<tr>
<td align="center">
<p>
<button id="buttonOne">Create Graph/Chart</button>
</p>
</td>
</tr>
<tr>
<td align="center">
<p>
<button id="buttonTwo">Create Graph/Chart</button>
</p>
</td>
</tr>
</table>

"column select-all" using checkbox without affecting other column in a table php

I wanted to create a simple html select-all checkbox for my table form. So when we click on top of corresponding column list all the elements in the column are selected without checking other columns.
Here is what i tried..
<form name="checkn" id="frm1" class="form1" method="post">
<table class="table" cellspacing="10" border="1" style="width:100%;">
<thead>
<tr>
<th>Products List</th>
<th>
Product Available
<input type='checkbox' name='checkall' onclick='checkAll(frm1);'>
</th>
<th>
Description
<input type='checkbox' name='checkall' onclick='checkdAll(frm2);'>
</th>
</tr>
</thead>
<tbody>
<?php
//fetch data php code
?>
<tr> <td width="20%;"> <h3> <?=$products?> </h3> </td>
<td width="20%;"> <input id="frm1" type="checkbox" name="product1" value='<?=$fieldname?>' > Product Available </td>
<td width="20%;"> <input id="frm2" type="checkbox" name="product2"> Description </td>
</tr>
<button type="submit" name="submit" style="position:absolute; bottom:0;"> Submit </button>
<script type="text/javascript">
checked = false;
function checkAll (frm1)
{
var aa= document.getElementById('frm1'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
<script type="text/javascript">
checked = false;
function checkdAll (frm2)
{
var aa= document.getElementById('frm2'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
</tbody>
</table>
</form>
Please help me

I think you need to find all tr length then find td with input. after that, you can check all. Like this here is my code. I hope it helps you.
$('#IsSelectAll').on('change', function () {
if ($(this).is(':checked')) {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', true);
});
}
else {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', false);
});
}
});

swapping rows using a javascript

I've a multiple number of rows which is generated by a for condition, with 2 icons up and down. On click of up the selected row should move one step up, and on click of down the selected row should move one step down
<html>
<head>
<body>
<form name="myForm">
<table id="mainTable" border="1" width="100%">
<script>
document.write('<tr>')
document.write('<td>')
document.write('row1')
document.write('</td>')
document.write('</tr>')
document.write('<tr>')
document.write('<td>')
document.write('row2')
document.write('</td>')
document.write('</tr>')
document.write('</table>')
document.write('<table>')
document.write('<tr>')
document.write('<td>')
document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')>
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')>
document.write('</td>')
document.write('</tr>')
document.write('</table>')
</script>
</table>
</form>
</body>
</head>
</html>
<script>
var mainTable = document.getElementById("mainTable");
function getRowIndex(el)
{
while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );
if( el )
alert(el.rowIndex);
return el.rowIndex;
}
function swapRowUp(chosenRow) {
if (chosenRow.rowIndex != 0) {
moveRow(chosenRow, chosenRow.rowIndex-1);
}
}
function swapRowDown(chosenRow) {
if (chosenRow.rowIndex != mainTable.rows.length-1) {
moveRow(chosenRow, chosenRow.rowIndex+1);
}
}
function moveRow(targetRow, newIndex) {
if (newIndex > targetRow.rowIndex) {
newIndex++;
}
var mainTable = document.getElementById('mainTable');
var theCopiedRow = mainTable.insertRow(newIndex);
for (var i=0; i<targetRow.cells.length; i++) {
var oldCell = targetRow.cells[i];
var newCell = document.createElement("TD");
newCell.innerHTML = oldCell.innerHTML;
theCopiedRow.appendChild(newCell);
copyChildNodeValues(targetRow.cells[i], newCell);
}
//delete the old row
mainTable.deleteRow(targetRow.rowIndex);
}
function copyChildNodeValues(sourceNode, targetNode) {
for (var i=0; i < sourceNode.childNodes.length; i++) {
try{
targetNode.childNodes[i].value = sourceNode.childNodes[i].value;
}
catch(e){
}
}
}
</script>
i'm unable to perform the swap operation, i get cellIndex as null

You can use some sensible JavaScript
up.addEventListener("click", function moveRowUp() {
var row = this.parentNode.parentNode,
sibling = row.previousElementSibling,
parent = row.parentNode;
parent.insertBefore(row, sibling);
});
for some sensible HTML
<table>
<tbody>
<tr>
<td> 1 </td>
<td> filler </td>
</tr>
<tr>
<td> 2 </td>
<td> <button id="up">up</button> </td>
</tr>
</tbody>
</table>
Live Example