I'm checking for duplicates in a table. What I'm trying to accomplish is when I display the first column if it is the same value as the previous row I don't want to display the value. I'm finding the duplicates but I get an error when I try to hide them by using display. style ="none"; My code is below.
I'm Thanking You In Advance
PD
var data=[['e',0,1,2,3,4], ['a',54312,235,5,15,4], ['a',6,7,8,9,232],
['a',54,11235,345,5,6], ['b',0,1,2,3,4], ['b',54312,235,5,15,4],
['c',62,15,754,93,323], ['d',27,11235,425,18,78], ['d',0,1,2,3,4],
['d',54312,235,5,15,4], ['e',6,7,8,9,232], ['e',54,11235,345,5,6],
['e',0,1,2,3,4], ['e',54312,235,5,15,4], ['e',62,15,754,93,323],
['e',27,11235,425,18,78]];
//Create a HTML Table element.
var table = document.createElement("TABLE");
var somedata = document.createElement("TD");
var dvTable = document.getElementById("dvTable");
var elems = document.getElementsByClassName("tableRow");
//Get the count of columns.
var columnCount = data[0].length;
//Add the data rows.
for (var i = 0; i < data.length; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
//Searching for duplicates
var num = data[i][0];
for (var otherRow = i + 1; otherRow < data.length; otherRow++) {
var dup = data[otherRow][0];
console.log("What is the dup" + dup);
if (num === dup)
{
console.log("duplicate");
dvTable[i].style.display = "none";
}
}
var cell = row.insertCell(-1);
cell.innerHTML = data[i][j];
cell.innerHtml = myZero;
}
}
dvTable is an HTML table element. You can't access the row using dvTable[i].
Try -
dvTable.rows(i).cells(j).style.display = none;
This is the JavaScript. The select has an id of 'counties'.
The table is to be inserted into a div called 'up_bottom'.
var leagueArray = [];
function addTeams() {
var county=document.getElementById("counties");
var val = county.options[county.selectedIndex].value;
leagueArray.push(val);
function display() {
var table = document.createElement("table");
for (var i=0; i<leagueArray.length; i++) {
var row = table.insertRow();
for (var j=0; j<leagueArray[i].length; j++) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(leagueArray[i]));
}
}
var tableDiv = document.getElementById("up_bottom");
tableDiv.appendChild(table);
}
display();
}
Please do the following Steps
Get Selected Value from Dropdown
Put the Selected Value into Array
Create A String of tr element and append it to Table before First tr element
Try this,
function addTeams(){
var leagueArray = [];
var county=document.getElementById("counties");
for (i = 0; i < county.options.length; i++) {
leagueArray[i] = county.options[i].value;
}
display(leagueArray);
}
function display(leagueArray) {
var table = document.createElement("table");
for (var i=0; i<leagueArray.length; i++) {
var row = table.insertRow();
for (var j=0; j<leagueArray[i].length; j++) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(leagueArray[i]));
}
}
var tableDiv = document.getElementById("up_bottom");
tableDiv.appendChild(table);
}
addTeams();
I'm dynamically creating a table using an HTML table and JavaScript Functions attatched to button clicks. I now want to take the data and store it into multidimensional array (if possible) using another button named finished. I'm having trouble even getting started with the last method to save it into array. I can't figure out how to retrieve the text data.
Here is my current HTML code.
<head>
<title>TableTest</title>
<script src="/javascript/func.js"></script>
</head>
<body>
<form>
<div id="Input">
<INPUT class="form-button" id="AddRow" type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT class="form-button" id="DeleteRow" type="button" value="Delete Row(s)" onclick="deleteRow('dataTable')" />
<INPUT class="form-button" id="Finished" type="button" value="Finished" onclick="gatherData('dataTable')" />
<table id="dataTable" border="1" style="width:200px" id="mytable" align="center" cellspacing="3" cellpadding="4">
<th>Select</th>
<th>Text1</th>
<th>Text2</th>
<th>Text3</th>
<tr>
<td><INPUT type="checkbox" name="chk"/></td>
<td><INPUT type="text" name="text1"/></td>
<td><INPUT type="text" name="txt2"/></td>
<td><INPUT type="text" name="txt3"/></td>
</tr>
</table>
</div>
</form>
</body>
Here is my JavaScript file:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function gatherData(){
//Tests
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
alert(rowCount);
alert(row);
alert(colCount);
}
I reworked TameBadger's answer to build the array by row instead of by column. I also added a check to see if the given cell has a value before referencing it. In my case, not all cells have values.
var table = document.getElementById('mainTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var tblData = [];
//Put a RowNumber name and values placeholder for the number of rows we have.
for (r = 0; r < table.rows.length; r++)
{
//Debug
//console.log(" row: ", r);
tblData.push({
name: "RowNumber" + r,
items: []
});
//Get the cells for this row.
var cells = table.rows[r].cells;
//Loop through each column for this row and push the value...
for (c = 0; c < cells.length; c++)
{
var inputElem = cells[c].children[0];
var tmpInputElem;
if (inputElem == null)
{
tmpInputElem = "";
}
else
{
tmpInputElem = inputElem.value
}
//Debug
//console.log(" row-cel: ", r, "-", c, " ", inputElem);
tblData[r].items.push(
{
//Comment out the type for now...
//inputType: inputElem.getAttribute('type'),
inputValue: tmpInputElem
});
}
}
//Debug
//printData(tblData);
I tried to keep it simple, and also jQuery clean, so to speak.
var data = [];
function gatherData() {
var table = document.getElementById('dataTable');
for (r = 1; r < table.rows.length; r++) {
var row = table.rows[r];
var cells = row.cells;
for (c = 0; c < cells.length; c++) {
var cell = cells[c];
var inputElem = cell.children[0];
var isInput = inputElem instanceof HTMLInputElement;
if (!isInput)
return;
var value = inputElem.value;
var isCheckbox = inputElem.getAttribute('type') == 'checkbox';
if (isCheckbox)
value = inputElem.checked;
var rowData = {};
rowData.inputType = inputElem.getAttribute('type');
rowData.inputValue = value;
data.push(rowData);
}
}
}
function startExec() {
gatherData();
for (i = 0; i < data.length; i++) {
console.log(data[i].inputType);
console.log(data[i].inputValue);
}
}
//just wait for the dom to load, and then execute the function for testing
document.addEventListener("DOMContentLoaded", startExec, false);
2nd Revision
function getData() {
var table = document.getElementById('dataTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var data = [];
for (l = 0; l < table.rows[0].cells.length; l++) {
data.push({
items: [],
name: "ColumnNumber" + l
});
}
for (i = 1; i < table.rows.length; i++) {
var cells = table.rows[i].cells;
for (c = 0; c < cells.length; c++) {
var inputElem = cells[c].children[0];
data[c].items.push({
inputType: inputElem.getAttribute('type'),
inputValue: inputElem.value
});
}
}
printData(data);
}
function printData(data) {
for (i = 0; i < data.length; i++) {
for (k = 0; k < data[i].items.length; k++) {
console.log(data[i].items[k].inputValue);
}
}
}
document.addEventListener("DOMContentLoaded", getData(), false);
It's great that you're starting off and doing the table manipulation yourself, and I would recommend continuing that, if you want to peak into a bigger codebase I would recommend checking out jTable's. Even though it's a jQuery plugin, you'll still be able to learn something from looking at the code structure for handling all the logic surrounding building a table according to a dataset and adding records etc.
Is this what you are looking for?
JSFIDDLE
$(document).ready(function(){
$('#Finished').click(function(){
var my_arr=[];
$('td').each(function(){
if ($(this).children().is(':checkbox') )
{
if($(this).children().prop('checked'))
{
my_arr.push($(this).children().val());
}
}else{
my_arr.push($(this).children().val());
}
})
console.log(my_arr);
})
})
We have a specific functionality where we need to add dynamic rows. In each of the row for the third column there is a button to add combo where it should be able to add extra combo in that cell. We have tried appendChild but is not working. Any idea how to add extra combo boxes. Below is the codes and function to do that is addSubRow.
<HTML>
<HEAD>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.innerHTML = newcell.innerHTML +"<br> TEST";
//alert(newcell.childNodes);
/*switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].id = "select" + rowCount;
break;
}*
if(newcell.childNodes[0].type=="button")
{
alert("TEST");
newcell.childNodes[0].id=rowCount;
}*/
}
var table = document.getElementById(tableID);
var rows = table.getElementsByTagName('tr');
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
row.name="row"+i;
var rowName = "row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
col.id="col_"+i+"_"+j;
col.name="col_"+i+"_"+j;
var cels = rows[i].getElementsByTagName('td')[j];
var realKids = 0,count = 0;
kids = cels.childNodes.length;
while(count < kids){
if(cels.childNodes[i].nodeType != 3){
realKids++;
}
count++;
}
alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount);
//alert();
}
}
}
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
var comboBox1 = table.rows[0].cells[2].childNodes[1];
comboBox1 = comboBox1;
tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
var table = document.getElementById(tableID);
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
//alert("J : "+j);
col.id="col"+i;
if(j==0)
{
}
else if(j==1)
{
}
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD id="col_0_2">
<INPUT type="button" value="Add Combo" onclick="addSubRow('dataTable','col_0_2')" />
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I'm not sure if this is what you really want, but here's a working function addSubRow function for appending a combobox.
I added some comments to explain what I did:
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
// Create a new combobox element
var new_comboBox = document.createElement('select');
// Define / Add new combobox's attributes here
//new_comboBox.setAttribute('id', 'something');
// ...
// ...
// Add new combobox's options - you may use a 'for' loop...
var option_1 = document.createElement('option');
option_1.setAttribute('value', '1');
var txt_1 = document.createTextNode("OPTION 1");
option_1.appendChild(txt_1);
var option_2 = document.createElement('option');
option_2.setAttribute('value', '2');
var txt_2 = document.createTextNode("OPTION 2");
option_2.appendChild(txt_2);
var option_3 = document.createElement('option');
option_3.setAttribute('value', '3');
var txt_3 = document.createTextNode("OPTION 3");
option_3.appendChild(txt_3);
// ...
// ...
// Appending options to the new combobox
new_comboBox.appendChild(option_1);
new_comboBox.appendChild(option_2);
new_comboBox.appendChild(option_3);
// ...
// ...
// Appending the combobox to the TD
tdID.appendChild(new_comboBox);
}
PS:
Pay attention when defining the combobox's attributes and its options' attributes
I don't think that you need to use the table's ID tableID, in your function. You may simplify your function addSubRow by rmoving this argument?
Hope this helps mate.
Awhile back, I found the following javascript function that allows you to dynamically add a row to a table:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
Does anyone, that actually has javascript experience (cause I have almost none) that could write a fix that will skip over the <th> tags?
Here's the part of the table I don't want to be affected:
<table id="scheduler">
<tr>
<th scope="col">Engineer</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
My problem is that when I have the <th> tags in, the header row ends up being the row that gets "cloned", not the row that just has <td> tags in it.
Just change the function so you can specify which row you want to duplicate (given a zero-based index).
addRow( "scheduler", 1 ); // to base it on the 2nd row
// give row number------v
function addRow(tableID, num) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// -------------------------v
var colCount = table.rows[ num ].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
//-------------------------------v
newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
Try This:
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newcell = row.insertCell(i);
if(table.rows[0].cells[i].tagName != "th")
{
newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes);
switch(newcell.childNodes[0].type)
{
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
else if(table.rows.length > 1 && table.rows[1].cells[i].tagName != "th")
{
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type)
{
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}}