Scribd
Upload
21 views3 pages

Mytask

The document provides several JavaScript code snippets for manipulating arrays and objects, creating dynamic HTML tables, and displaying data as buttons. It includes examples of splitting an array into chunks, checking for the existence of an object in an array, parsing a string into an array, adding rows to a table dynamically, and printing values as buttons. Each example is accompanied by the expected output and the corresponding code implementation.

Uploaded by

rhoshanaarif.work
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
21 views3 pages

Mytask

The document provides several JavaScript code snippets for manipulating arrays and objects, creating dynamic HTML tables, and displaying data as buttons. It includes examples of splitting an array into chunks, checking for the existence of an object in an array, parsing a string into an array, adding rows to a table dynamically, and printing values as buttons. Each example is accompanied by the expected output and the corresponding code implementation.

Uploaded by

rhoshanaarif.work
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

Split the given array in 3 numbers and display in a table html page
Array:
[“ha”,“hi”,“hq”,“he”,“hr”,“hm”,“hn”,“hd”,“he”,”hg”]

Output:
[ha, hi, hq] [he,hr,hm] [hn,hd,he][hg]

const arr = ['ha', 'hi', 'hq', 'hr', 'hm', 'hn', 'hr'];


const numbers = [];
for (let i = 0; i < arr.length; i += 3) {
const chunk = arr.slice(i, i + 3);
numbers.push(chunk);
}
const table = document.createElement('table');
const tbody = document.createElement('tbody');
table.appendChild(tbody);

numbers.forEach((chunk) => {
const row = tbody.insertRow();
chunk.forEach((string) => {
const cell = row.insertCell();
cell.innerText = string;
});
});

document.getElementById('table-container').appendChild(table);

2. Check if “test2” exists in the given object array, if it exists print the index
of the object and the matched object:
Object:
[{id:1,”name”:”test”},{id:2,”name”:”test2”},{id:3,”name”:”test3”}]

Output:
Index: 1
Object: {id:2,”name”:”test2”}

const arr = [{id:1,"name":"test"},{id:2,"name":"test2"},{id:3,"name":"test3"}];


let find = arr.find(x => x.name=="test2");
console.log("Index : " + find.id)
console.log("Object:", find)
OUTPUT:
"Index : 2"
"Object:", {
id: 2,
name: "test2"
}

3. Split the given string and provide as an array.


String:
var a = “[‘0’-’1’-’2’-’3’+’4’+’5’]”;

output:
[0,1,2,3,4,5]

var a = "['0'-'1'-'2'-'3'+'4'+'5']";
a = a.replace(/[^\w\s]/gi, '');
var myarr = a.split('')
const result = myarr.map(x=>Number(x))
console.log(result)
Output:
[0, 1, 2, 3, 4, 5]

4. Create a dynamic table. on click of a button the table rows with text field
should be added
<table id="myTable">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Age</th>
<th>DOB</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="textfield1"></td>
<td><input type="text" name="textfield2"></td>
<td><input type="text" name="textfield3"></td>
<td><input type="text" name="textfield4"></td>
<td><input type="text" name="textfield5"></td>
</tr>
</tbody>
</table>

<button onclick="addRow()">Add Row</button>

function addRow() {
var table = document.getElementById("myTable");
var rowNumber = table.rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);

cell1.innerHTML = rowNumber;
cell2.innerHTML = '<input type="text" name="Name' + rowNumber + '">';
cell3.innerHTML = '<input type="text" name="Age' + rowNumber + '">';
cell4.innerHTML = '<input type="text" name="Dob' + rowNumber + '">';
cell5.innerHTML = '<input type="text" name="Email' + rowNumber + '">';
cell6.innerHTML = '<input type="text" name="Comment' + rowNumber + '">';
}

5. Write a function to print all the values as button:

<div id="myDiv">
</div>
<div id="form-content"></div>
var a ={'Test':
[{
id:1,'name':'test1','menu':'Test'
},{
id:1,'name':'test2','menu':'Test'
},{
id:1,'name':'test3','menu':'Test'
}],'Test2':
[{
id:1,'name':'test21','menu':'Test1'
},{
id:1,'name':'test22','menu':'Test1'
},{
id:1,'name':'test23','menu':'Test1'
}],'Test3':
[{
id:1,'name':'test31','menu':'Test2'
},{
id:1,'name':'test32','menu':'Test2'
},{
id:1,'name':'test33','menu':'Test2'
}]}

for(const x in a ){
const div = document.getElementById('myDiv')
const name = a[x]
const mybtn = document.createElement("button");
mybtn.textContent = testType;
mybtn.onclick = function() {
displayButtons(name);
};
div.appendChild(mybtn);

function displayButtons(name) {
const testContent= document.getElementById("form-content");
testContent.innerHTML = "";
show.forEach(x => {
const testHtml = `
<div class="form-detail">
<p><b>Form ID</b>: ${x.id}</p>
<p><b>Form Name</b>: ${x.name}</p>
<p><b>Form Type:</b> ${x.menu}</p>

</div>
`;
testContent.innerHTML += testHtml;
});
}

You might also like