making groups with random names in it in javascript - javascript

I am new to coding Javascript. I am trying to to shuffle list of names inputted on a textarea. The user selects the number of groups desired, and shuffle on click, then show the divided groups as output result. Below is my code but it is not working as it should be, pls help!
<script>
function ArrayToGroups(source, groups){
var groupList = [];
groupSize = Math.ceil(source.length/groups);
var queue = source;
for(var r = 0; r < groups; r++){
groupList.push(queue.splice(0,groupSize));
}
return groupList;
}
function textSpliter(splitText){
var textInput = document.getElementById("inputText").value;
var splitText = textInput.split(',');
var newList = [];
for(x = 0; x <= splitText.length; x++) {
var random = Math.floor(Math.random() * splitText.length);
var p = splitText[random];
newList.push(p);
splitText.splice(p,groupList);
}
for(var i = 0; i < newList.length; i++){
var s = newList[i];
document.getElementById('resInput').value += s + "\n" ;
}
return splitText;
}
</script>
Below is my input and output textareas
</head>
<body>
<form>
<textarea id="inputText" placeholder="text" rows="10" cols="40"></textarea>
<input type="number" name="number" max="6" value="1" id="groupNumber">
<textarea id="resInput" placeholder="text" rows="10" cols="40"></textarea>
<input type="button" name="Shuffle" value="shuffle" onclick="textSpliter()">
</form>
</body>
</html>

function shuffle() {
// Get list
// Example: element1, element 2, ele ment 3, ...
var list = document.getElementById("inputText").value.replace(/\s*,\s*/g, ",").split(",");
// Get number of groups
var n = parseInt(document.getElementById("groupNumber").value);
// Calculate number of elements per group
var m = Math.floor(list.length / n);
// Enought elements
if (n * m == list.length) {
// Create groups
var groups = new Array();
for (i = 0; i < n; i++) {
groups[i] = new Array();
for (j = 0; j < m; j++) {
// Random
rand = Math.floor(Math.random() * list.length);
// Add element to group
groups[i][j] = list[rand];
// Remove element to list
list.splice(rand, 1);
}
}
// Output
var text = "";
for (i = 0; i < n; i++) {
text += "Group " + (i + 1) + ": ";
for (j = 0; j < m; j++) {
if (j != 0) { text += ", "; }
text += groups[i][j];
}
text += "\n";
}
document.getElementById("resInput").value = text;
} else {
alert("Add more elements");
}
}

I rewrote your code. It's pretty self-explanatory.
FIDDLE
function textSpliter() {
var input = document.getElementById("inputText").value;
var names = input.split(",");
var groupSize = document.getElementById("groupNumber").value;
var groupCount = Math.ceil(names.length / groupSize);
var groups = [];
for (var i = 0; i < groupCount; i++) {
var group = [];
for (var j = 0; j < groupSize; j++) {
var random = Math.floor(Math.random() * names.length);
var name = names[random];
if (name != undefined) {
group.push(name);
names.splice(names.indexOf(name), 1);
}
}
group.sort();
groups.push(group);
}
printGroups(groups);
}
function printGroups(group) {
var output = document.getElementById("resInput");
output.value = "";
for (var i = 0; i < group.length; i++) {
var currentGroup = "";
for (var j = 0; j < group[i].length; j++) {
currentGroup = group[i].join(",");
}
output.value += currentGroup + "\r";
}
}

ES6 version ;-)
http://jsfiddle.net/dLgpny5z/1/
function textSpliter() {
var input = document.getElementById("inputText").value;
var names = input.replace(/\s*,\s*|\n/g, ",").split(",");
var groupSize = document.getElementById("groupNumber").value;
var groupCount = Math.ceil(names.length / groupSize);
var groups = [...Array(groupCount)].map(() => Array());
var i = 0
while (names.length > 0) {
var m = Math.floor(Math.random() * names.length);
groups[i].push(names[m]);
names.splice(m, 1);
i = (i >= groupCount - 1) ? 0 : i + 1
}
printGroups(groups);
}
function printGroups(groups) {
var output = document.getElementById("resInput");
output.value = groups.map(group => group.join(',')).join('\r');
}

Related

js Page Freezing on from .length?

This function is freezing my page.
function findMode (array)
{
var modeArr = [];
var modeCounter = [];
modeArr.length = array.length;
modeCounter.length = array.length;
}
However, when I remove this it runs just fine.
modeArr.length = array.length;
modeCounter.length = array.length;
Here is all of my code:
<html>
<head>
</head>
<body>
<p> Please enter a series of numbers, each separated by a new line.<br><p>
<textarea id="myTextArea" rows = "7" cols = "50"></textarea><br>
<button onclick="processData()">Done</button>
<p id = "mean"></p>
<p id = "median"></p>
<p id = "count"></p>
<p id = "summation"></p>
<p id = "mode"></p>
<p id = "variance"></p>
<p id = "sd"></p>
<script type = "text/javascript">
var mean = 0;
var median = 0;
var count = length;
var mode = 0;
var variance = 0;
var standard_deviation = 0;
var meanOutput = document.getElementById('mean');
var medianOutput = document.getElementById('median');
var modeOutput = document.getElementById('mode');
var countOutput = document.getElementById('count');
var summationOutput = document.getElementById('summation');
var varianceOutput = document.getElementById('variance');
var sdOutput = document.getElementById('sd');
function processData()
{
var arrayOfLines = document.getElementById('myTextArea').value.split('\n');
var sum = findSum(arrayOfLines);
findMean(arrayOfLines, sum);
findMedian(arrayOfLines);
findMode(arrayOfLines);
findVariance(arrayOfLines);
findStandardDeviation(arrayOfLines);
findVariance(arrayOfLines);
}
function findSum (array)
{
var count = array.length;
var sum = 0;
for (var a = 0; a < array.length; a++)
{
sum += parseInt(array[a]);
}
countOutput.innerHTML = "Count: " + array.length;
summationOutput.innerHTML = "Sum: " + JSON.stringify(sum);
return sum;
}
function findMode (array)
{
var modeArr = [];
var modeCounter = [];
modeArr.length = array.length;
modeCounter.length = array.length;
for (var a = 0; a < array.length; a++)
{
for (var b = 0; b < modeArr.length; b++)
{
if (modeArr[a] == modeArr[b])
{
modeCounter[a]++;
}
if (a == 0)
{
b--;
}
}
modeArr[a] = array[a];
}
modeOutput.innerHTML = "Mode: ";
}
function findMean (array, sum)
{
mean = sum/array.length;
meanOutput.innerHTML = "Mean: " + mean.toPrecision(2);
}
function findMedian (array)
{
for(var i=0; i < array.length; i++)
{
array[i] = +array[i];
}
var sortedArrayOfLines = array.sort(function(a, b){return a - b});
if (array.length % 2 == 1)
{
median = sortedArrayOfLines[((array.length - 1)/2)]
}
else
{
median = (sortedArrayOfLines[array.length/2] + sortedArrayOfLines[(array.length/2)+1])/2
}
medianOutput.innerHTML = "Median: " + median;
}
function findVariance (array)
{
var mean = mean(array);
return mean(array.map(function(num)
{
varianceOutput.innerHTML = Math.pow(num - mean, 2);
}));
}
function findStandardDeviation (array)
{
medianOutput.innerHTML = Math.sqrt(variance(array));
}
</script>
</body>
</html>
So the issue isn't the length it's a infinite loop.
The problem is this bit of code
if (a == 0)
{
b--;
}
This is inside the following loop with b as the iterator. See below.
for (var b = 0; b < modeArr.length; b++)
a is set to zero by the outer loop. Thus a==0 is always true inside the inner loop. b will never increase only decrease. Thus this is a infinite loop because b will never be greater than modeArr.length.
So I would consider revising the function, below is a example of a possible candidate for a mode function:
Get the element with the highest occurrence in an array

adding inputs in for loop

I have code like that https://jsfiddle.net/Lcfnxxtv/ and i'd like to labels look like that eg.
Number of children
ages 5 - 18"
I want it in two separate lines and NOT all in one line(of course, if it's possible) 'Number of children ages 5 - 18' but i don't know how to do this in my code.
jQuery(document).ready(function() {
var array1 = [];
var array2 = [];
var array_typ = [];
var array_dla = [];
var array_wie = [];
var array_cen = [];
var array_licz = [];
var str = jQuery("#all_str").val();
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder";
var str1w = "Number of children";
var str2w = "Number of elders";
var html = "</div>";
var html2 = "";
for (i = 0; i < size; i++) {
array2 = array1[i].split('#');
array_typ[i] = array2[0];
array_dla[i] = array2[1];
array_wie[i] = array2[2];
array_cen[i] = array2[3];
}
for (j = 0; j < size; j++) {
if (array_dla[j] == str1) {
if (jQuery.inArray(str1w, array_licz) == -1) {
array_licz[j] = str1w;
}
}
if (array_dla[j] == str2) {
if (jQuery.inArray(str2w, array_licz) == -1) {
array_licz[j] = str2w;
}
}
}
var size2 = array_licz.length;
for (k = 0; k < size2; k++) {
html += ' <label for="field[' + k + ']">' + array_licz[k] + ' ages ' + array_wie[k] + ' </label> ';
}
for (l = 0; l < size2; l++) {
html2 += '<input type="text" id="field' + l + '" value=""></input> ';
}
html += '</br>';
html += html2;
html += '</div>';
jQuery("#addon").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon"></div>
<input type="hidden" id="all_str" value="XYZ#Tax A - elder#65-99#1#XYZ#Tax A - child#5-18#2#">
Please help
You have invalid tags. Input is a void element and does not needs a closing </input> tag.
<br>, <br/> are valid. </br> is not.
You have one useless for(l=0; l<size2; l++){
Use only the first k one.
Than in CSS set your label to display: block;
jQuery(function( $ ) {
var array1 = [];
var array2 = [];
var array_typ = [];
var array_dla = [];
var array_wie = [];
var array_cen = [];
var array_licz = [];
var str = $("#all_str").val();
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder";
var str1w = "Number of children";
var str2w = "Number of elders";
var html = ""; // </div> ?? You mean Start of a <div>. BTW you have <label> already so ""
// html2 why??
for (i = 0; i < size; i++) {
array2 = array1[i].split('#');
array_typ[i] = array2[0];
array_dla[i] = array2[1];
array_wie[i] = array2[2];
array_cen[i] = array2[3];
}
for (j = 0; j < size; j++) {
if (array_dla[j] == str1) {
if ($.inArray(str1w, array_licz) == -1) {
array_licz[j] = str1w;
}
}
if (array_dla[j] == str2) {
if ($.inArray(str2w, array_licz) == -1) {
array_licz[j] = str2w;
}
}
}
var size2 = array_licz.length;
// Why loop twice size2. Loop once
for (k = 0; k < size2; k++) {
html += '<label for="field[' + k + ']">' +
array_licz[k] + '<br>ages ' + array_wie[k] +
'<br><input type="text" id="field' + k + '" value="">'+
' </label>';
}
$("#addon").append(html);
});
label{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon"></div>
<input type="hidden" id="all_str" value="XYZ#Tax A - elder#65-99#1#XYZ#Tax A - child#5-18#2#">
The other part of your code can be also improved, but I have no idea what you're after with all those arrays...
$(document).ready(function() {
var array1 = [];
var array2 = [];
var array_typ = [];
var array_dla = [];
var array_wie = [];
var array_cen = [];
var array_licz = [];
var str = $("#all_str").val();
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder";
var str1w = "Number of children";
var str2w = "Number of elders";
var html = "</div>";
var html2 = [];
var html3 = [];
for(i=0; i<size; i++){
array2= array1[i].split('#');
array_typ[i] = array2[0];
array_dla[i] = array2[1];
array_wie[i] = array2[2];
array_cen[i] = array2[3];
}
for(j=0; j<size; j++){
if(array_dla[j]==str1){
if($.inArray(str1w, array_licz) == -1){
array_licz[j]=str1w;
}
}
if(array_dla[j]==str2){
if($.inArray(str2w, array_licz) == -1){
array_licz[j]=str2w;
}
}
}
var size2 = array_licz.length;
for(k=0; k<size2; k++){
html3[k]='<label for="field['+ k +']">'+array_licz[k]+' ages <br>' +array_wie[k] +' </label> <br>';
}
for(l=0; l<size2; l++){
html2[l]='<input type="text" id="field'+l+'" value=""</input> <br></br>';
}
for(var j=0;j<size2;j++){
html += html3[j]+html2[j];
}
//html+='</br>';
//html+=html2;
html+='</div>';
$("#addon").append(html);
});
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon">
</div>
<input type="hidden" id="all_str" value="XYZ#Tax A - elder#65-99#1#XYZ#Tax A - child#5-18#2#">
Your problem was the way you put the strings together. An easy solution is to use arrays and in the end you can manipulate them more easily

Javascript: Calculating Min/Max/Average

I wrote this code in my html site, in Javascript, but is not working right. Most times it seems to ignore some entries and just randomly selects which is the min/max value. Also, when I tried to calculate average values, I got a string instead of a number, even though the variable is declared as 0 in the beginning. e.g performing 0+1+1+2+3+5 = 011235 instead of 12.
Here is the code, thanks in advance.
**EDIT: I added the student average code in the end, but it doesn't work, it doesn't show any results on the page, not even the "student" + [i] part. On the other hand, the parseInt() command worked, and made everything work as it should, thank you :)
<script language = "javascript">
function myFunction() {
var course0 = [];
var course1 = [];
var course2 = [];
var minstugrade = 100;
var maxstugrade = 0;
var minstugradetext = "";
var maxstugradetext = "";
var stuavgarr = [];
var minstuavg = 100;
var maxstuavg = 0;
var minstuavgtext = "";
var maxstuavgtext = "";
var mincougrade = 100;
var maxcougrade = 0;
var mincougradetext = "";
var maxcougradetext = "";
var mincouavg = 100;
var maxcouavg = 0;
var mincouavgtext = "";
var maxcouavgtext = "";
var couavg = 0;
//add form items to array
var x = document.getElementById("course0");
var i;
for (i = 0; i < x.length ;i++) {
course0.push(parseInt(x.elements[i].value));
}
var x = document.getElementById("course1");
var i;
for (i = 0; i < x.length ;i++) {
course1.push(parseInt(x.elements[i].value));
}
var x = document.getElementById("course2");
var i;
for (i = 0; i < x.length ;i++) {
course2.push(parseInt(x.elements[i].value));
}
//calculate course & student min/max
for (i = 0; i < course0.length; i++) {
if (course0[i] < mincougrade) {
mincougrade = course0[i];
mincougradetext = "course0";
}
if (course0[i] > maxcougrade) {
maxcougrade = course0[i];
maxcougradetext = "course0";
}
if (course0[i] < minstugrade) {
minstugrade = course0[i];
minstugradetext = "student" + [i];
}
if (course0[i] > maxstugrade) {
maxstugrade = course0[i];
maxstugradetext = "student" + [i];
}
}
for (i = 0; i < course1.length; i++) {
if (course1[i] < mincougrade) {
mincougrade = course1[i];
mincougradetext = "course1";
}
if (course1[i] > maxcougrade) {
maxcougrade = course1[i];
maxcougradetext = "course1";
}
if (course1[i] < minstugrade) {
minstugrade = course1[i];
minstugradetext = "student" + [i];
}
if (course1[i] > maxstugrade) {
maxstugrade = course1[i];
maxstugradetext = "student" + [i];
}
}
for (i = 0; i < course2.length; i++) {
if (course2[i] < mincougrade) {
mincougrade = course2[i];
mincougradetext = "course2";
}
if (course2[i] > maxcougrade) {
maxcougrade = course2[i];
maxcougradetext = "course2";
}
if (course2[i] < minstugrade) {
minstugrade = course2[i];
minstugradetext = "student" + [i];
}
if (course2[i] > maxstugrade) {
maxstugrade = course2[i];
maxstugradetext = "student" + [i];
}
}
//calculate course average
for (i = 0; i < course0.length; i++) {
couavg += course0[i];
}
couavg = couavg / course0.length
if (couavg < mincouavg) {
mincouavg = couavg;
mincouavgtext = "course0";
}
if (couavg > maxcouavg) {
maxcouavg = couavg;
maxcouavgtext = "course0";
}
couavg = 0;
for (i = 0; i < course1.length; i++) {
couavg += course1[i];
}
couavg = couavg / course1.length
if (couavg < mincouavg) {
mincouavg = couavg;
mincouavgtext = "course1";
}
if (couavg > maxcouavg) {
maxcouavg = couavg;
maxcouavgtext = "course1";
}
couavg = 0;
for (i = 0; i < course2.length; i++) {
couavg += course2[i];
}
couavg = couavg / course2.length
if (couavg < mincouavg) {
mincouavg = couavg;
mincouavgtext = "course2";
}
if (couavg > maxcouavg) {
maxcouavg = couavg;
maxcouavgtext = "course2";
}
//calculate student average
for (i = 0; i < course0.length; i++) {
stuavgarr[i] += course0[i];
stuavgarr[i] += course1[i];
stuavgarr[i] += course2[i];
}
for (i=0; i < stuavgarr.length; i++) {
stuavgarr[i] = stuavgarr[i] / course0.length;
if (stuavgarr[i] < minstuavg) {
minstuavg = stuavgarr[i];
minstuavgtext = "student" + [i];
}
if (stuavgarr[i] > maxstuavg) {
maxstuavg = stuavgarr[i];
maxstuavgtext = "student" + [i];
}
}
document.getElementById("studmaxgrade").innerHTML = "Student that achieved the max grade is " + maxstugradetext
document.getElementById("studmingrade").innerHTML = "Student that achieved the min grade is " + minstugradetext
document.getElementById("studmaxavg").innerHTML = "Student that achieved the max average is " + maxstuavgtext
document.getElementById("studminavg").innerHTML = "Student that achieved the min average is " + minstuavgtext
document.getElementById("courmaxgrade").innerHTML = "The course in which the max grade is scored is " + maxcougradetext
document.getElementById("courmingrade").innerHTML = "The course in which the min grade is scored is " + mincougradetext
document.getElementById("courmaxavg").innerHTML = "The course in which the max average grade is scored is " + maxcouavgtext
document.getElementById("courminavg").innerHTML = "The course in which the min average grade is scored is " + mincouavgtext
}
</script>
The value of an input is a string, thus a + b will be interpreted as appending one string to another.
If you make sure the first parameter (a in this case) is an integer a + b will result in the two being mathematically adding the two
console.log( '0' + 1 + 2 + 3 + 4 ); //* outputs 01234
console.log( parseInt( 0 ) + 1 + 2 + 3 + 4 ); //* outputs 10
JSFiddle
Ok for a start you seem very confused about
document.getElementById
This does not address a javascript variable at all......
This literally "gets the document element by its id".
Here is an example of how to use it...
<html>
<img id='my_new_selfie' src='me.jpg'>
....
....
<script>
alert (document.getElementById('my_new_selfie').src)
</script>
This would simply pop up an alert with the text that describes the src of the
document object who's id is 'my_new_selfie'
that is....
[me.txt]
The reason that document.getElementById was introduced to javascript was to save developers learning the DOM (document object model) in order to access objects.
It allows you to simply give you object an id and change things about it using the id
In the above example I could use a script or button to change the image source
an example of this might be using the onclick event of another object on the page like a button...
onclick='document.getElementById('my_new_selfie').src='new_pic_of_me.JPG'
It is not used to identify variables in a javascript

Keep the clicked objects in an array in javascript

I made a puzzle game in javascript. I have made objects to keep some attributes relevant to the each pazzle squares. I want to get the object id which is relevant to the onclick.(not the div id). How to get the specific object id relevant to the clicked div?
window.onload = function() {
createDivs();
objects();
random();
onclickeventHanlder(event);
};
var getId;
var x = 3;
var counting = 0;
var tileSize = 600 / x;
var array2 = [];
var object = [];
function createDivs() {
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var id = i + "" + j;
var element = document.createElement('div');
element.setAttribute("class", "pieces");
element.setAttribute("id", id);
element.style.width = 600 / x + "px";
element.style.height = 600 / x + "px";
element.style.margin = "0px auto";
element.style.overflow = "hidden";
element.setAttribute("onclick", "onclickeventHanlder(this)");
if (count > 0) { // to break row-wise
if (i == count && j == 0) {
element.style.clear = "both";
}
}
element.style.float = "left";
document.getElementById('puzzle-body').appendChild(element);
}
count++;
}
}
function objects(){
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var objName = new Object();
objName.position = -(j * tileSize) + "px" + " " + -(i * tileSize) + "px";
objName.divID = document.getElementById(i + "" + j);
objName.id = count;
if(count<x*x-1){
objName.state = true; // if image is there
}else{
objName.state = false; // if image isn't there
}
object[count] = objName;
count++;
}
}
}
function reset(){
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var obj = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj.position;
}
looping++;
}
}
}
function random(){
var array = [];
while (array.length < ((x * x) - 1)) {
var randomnumber = Math.floor(Math.random() * ((x * x) - 1));
var found = false;
for (var i = 0; i < array.length; i++) {
if (array[i] == randomnumber) {
found = true;
break;
}
}
if (!found) {
array[array.length] = randomnumber;
}
}
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
if (looping < x * x-1) {
var random = array[looping];
var obj = object[random];
var obj2 = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj2.position;
}
}
looping++;
}
}
}
function onclickeventHanlder(event) {
var pos = event;
}

Work with 2d array in javascript

I create 2d array with random number
<script type="text/javascript">
function matrixArray(rows, columns) {
var min = 0;
var max = 10;
var arr = new Array();
for (var i = 0; i < rows; i++) {
arr[i] = new Array();
for (var j = 0; j < columns; j++) {
arr[i][j] = Math.floor(Math.random() * (max - min + 1)) + min;
}
}
return arr;
}
</script>
Now i wont write function that create table with delete button in all rows. And function that delete row from array and redraw the table. Try like this, but not working
<script>
function createtab (arr)
{
var inpts = [], t = document.createElement('TABLE');
t.cellSpacing = 0, t.cellPadding = 5, t.border = 1;
for (var j = 0, J = arr.length; j < J; j++) {
var ro = t.insertRow(-1),
ce = ro.insertCell(-1),
inpt = document.createElement('INPUT');
inpt.type = 'button', inpt.value = 'Delete', inpt.onclick = 'rowdel(arr,'+j+')';
inpts.unshift(ce.appendChild(inpt));
for (var k = 0, K = arr[j].length; k < K; k++) { var ce = ro.insertCell(-1); ce.innerHTML = arr[j][k] }
}
var obj = document.getElementById('forTable').appendChild(t);
}
</script>
delete row on button click
<script>
function rowdel(arr, i) {
arr.splice(i, 1);
createtab(arr);
}
</script>
html body
<body>
<div id="forTable"></div>
<script>
var arr = matrixArray(6, 7);
createtab(arr);
</script>
</body>
EDITED
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var arr = matrixArray(6, 7);
createtab(arr);
});
function matrixArray(rows, columns) {
var min = 0;
var max = 10;
var arr = new Array();
for (var i = 0; i < rows; i++) {
arr[i] = new Array();
for (var j = 0; j < columns; j++) {
arr[i][j] = Math.floor(Math.random() * (max - min + 1)) + min;
}
}
return arr;
}
function createtab (arr)
{
var inpts = [], t = document.createElement('TABLE');
t.cellSpacing = 0, t.cellPadding = 5, t.border = 1;
for (var j = 0, J = arr.length; j < J; j++) {
var ro = t.insertRow(-1),
ce = ro.insertCell(-1),
inpt = document.createElement('INPUT');
inpt.type = 'button', inpt.value = 'Delete',inpt.attributes['id']=j, inpt.onclick =function() { rowdel(arr,this)};
inpts.unshift(ce.appendChild(inpt));
for (var k = 0, K = arr[j].length; k < K; k++) { var ce = ro.insertCell(-1); ce.innerHTML = arr[j][k];
//alert(j);
}
}
var obj = document.getElementById('forTable').appendChild(t);
}
function rowdel(arr,input) {
var i = input.attributes['id'];
arr.splice(i, 1);
$('#forTable').empty();
createtab(arr);
}
</script>
<body>
<div id="forTable"></div>
</body>
you don't need to redraw the table .
inpt.onclick = 'rowdel(arr,'+j+',this)';
function rowdel(arr, i, input) {
arr.splice(i, 1);
var row = input.parentNode.parentNode;
row.parentNode.removeChild(row);
}
UPDATE: onclick requires a function
inpt.attributes['id']=j;
inpt.onclick = function () {
rowdel(this);
};
function rowdel(input) {
var i = input.attributes['id'];
arr.splice(i, 1);
var row = input.parentNode.parentNode;
row.parentNode.removeChild(row);
}
you can define you del function such like that.
var dele = function rowdel(arr, i) {
return function(){
arr.splice(i, 1);
createtab(arr);
}
}
and use it as like closures as .
inpt.type = 'button', inpt.value = 'Delete', inpt.onclick = dele(arr, j);

Categories