A simple grid rows / columns

Hi all.

I need your help.

I realize this script and I do not know where to begin:

  1. A simple grid rows / columns.
  2. The first column contain an input type = “checkbox”
  3. When select the input type, the line should change color than the other rows, and you should open a popup window.

For points 1, 2 you are OK.
Point 3 is the difficulty.

Suggestions?
Examples?

Kind regards
Viki

If you were using jQuery, this is the type of code you might use.


$(':checkbox').click(function () {
    $(':checkbox').each(function () {
        if (this.checked) {
            $(this).setClass('active');
        } else {
            $(this).removeClass('active');
        }
        window.open('advertising.html');
    });
});

Without jQuery, you’re looking at around 500% more code.

Thanks, but I don’t use JQuery… what JQuery?

jQuery is a JavaScript library that simplifies scripting by simplifying document traversal and manipulation, along with resolving a vast number of cross-browser issues.

As we’re not likely to use jQuery for your solution, we can come up with some regular scripting for you to use.

What is the code that you currently have? Is there an identifier to indicate the group of rows and columns? In orer to script for it, we need to know what your HTML code looks like too.

OK this is my code html:


<div align=center>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border: 1px Solid #6699CC;">
<tr>
<td>
<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2 style="font-size=11px;font-family:tahoma;" width="100%" BGCOLOR=WHITE>
<tr bgcolor=#dcdcdc>

<td align=center>Seleziona checkbox</td>
<td align=center><b>Colonna A</b></td>
<td align=center><b>Colonna B</b></td>
<td align=center><b>Colonna C</b></td>
<td align=center><b>Colonna D</b></td>

<td align=center><input type=checkbox name=C1 value=ON></td>
<td align=right>CMP</td>
<td align=right>07/02/2010</td>
<td align=center>06:43</td>
<td align=left>SALERNO NORD</td>


</td>
</tr>
</table>
</div>

Okay, you want to chnge the row colour when the checkbox is clicked, and open a window. I presume that there are multiple rows of these within the table, so we want a way to attach events on to the inputs without affecting other parts of the page.

As there are likely to be many rows, instead of attaching multiple events onto multiple inputs, we can instead allow the input events to bubble up the DOM to a common point, that point being the table that contains all of the rows.

To attach the script, we need to be able to refer to some part of the table. Presuming that the div is a container for just the table, a good place to attach this one on to is the div itself, by giving the div a name that best describes its contents.

Change the name “someList” in all of the sample code to a name that most appropriately describes the table.

I will leave discussion about the inline presentation for later.


<div id="someList" align=center>
...

When you change the row colour, we will change the class name of the row to “checked”. We need to let the browser know what colour we want to use when that class is set. This stylesheet declaration does that for us.


#someList tr.checked {
    background-color: #6699cc;
}

Now we want the script that will set the class name based on the state of the checkbox.

You can put the script just before </body> which allows the script to easily find the page while it’s loading.


<script type="text/javascript">
...
</script>
</body>

The script itself will get the identifier for the table, and attach an onclick event on to it, so that you can capture all of the click events that occur.


var list = document.getElementById('someList');
list.onclick = function (evt) {
    ...
};

When a click event occurs, you want only in ones that are input elements


evt = evt || window.event;
var targ = evt.target || evt.srcElement;
if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
    return;
}
...

Now that you have an input that has been clicked, you want to set the class name of the row, depending on whether the checkbox is enabled or not.


list.onclick = function (evt) {
    ...
    updateRowColour(targ);
};
function updateRowColour(input) {
    ...
}

The updateRowColour function needs to set the class name of the row. The first parent of the checkbox is the td element, and the parent of the td element is the tr element. So we need to go up two parents to get the the row.


function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    }
    input.parentNode.parentNode.className = checked;
}

There are other ways of finding the parent that involve loops, but what we have will do well for now.

Finally, you said that you want to open up a new window to go somewhere.


...
updateRowColour(targ);
window.open('somePage.html');

And you’re all good to go.

Here is the full code for the test page.


<html>
<head>
<style type="text/css">
#someList table table tr.checked {
    background-color: #6699cc;
}
</style>
</head>
<body>
<div id="someList" align=center>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border: 1px Solid #6699CC;">
<tr>
<td>
<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2 style="font-size:11px;font-family:tahoma;" width="100&#37;" BGCOLOR=WHITE>
<tr bgcolor=#dcdcdc>

<td align=center>Seleziona checkbox</td>
<td align=center><b>Colonna A</b></td>
<td align=center><b>Colonna B</b></td>
<td align=center><b>Colonna C</b></td>
<td align=center><b>Colonna D</b></td>

<td align=center><input type=checkbox name=C1 value=ON></td>
<td align=right>CMP</td>
<td align=right>07/02/2010</td>
<td align=center>06:43</td>
<td align=left>SALERNO NORD</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    updateRowColour(targ);
    window.open('somePage.html');
};
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    }
    input.parentNode.parentNode.className = checked;
}
</script>
</body>
</html>

Now, about the HTML code itself. The HTML attributes should use double quotes, and the presentational attributes really need to be moved out to a stylesheet instead.

Here is the HTML code when the presentational attributes have been taken out. A minimum of class names have been added to target certain areas.


<div id="someList">
<table><tr>
    <td><table><tr>
        <td class="desc">Seleziona checkbox</td>
        <td>Colonna A</td>
        <td>Colonna B</td>
        <td>Colonna C</td>
        <td>Colonna D</td>
        <td><input type="checkbox" name="C1" value="ON"></td>
        <td class="code">CMP</td>
        <td class="date">07/02/2010</td>
        <td class="time">06:43</td>
        <td class="location">SALERNO NORD</td>
    </tr></table></td>
</tr></table>
</div>

The CSS code to provide the presentation that you had for the tables is:


#someList table {
    margin: 0 auto;
    border: 1px Solid #6699CC;
    border-spacing: 0;
}
#someList table td {
    padding: 0px;
}
#someList table table {
    background-color: white; /* default */
    border: none; /* default */
    border-spacing: 2px;
    font-size: 11px;
    font-family: tahoma;
    width: 100&#37;;
}
#someList table table tr {
    background-color: #dcdcdc;
}
#someList table table tr.checked {
    background-color: #6699cc;
}
#someList table table td {
    font-weight: bold;
    padding: 2px;
    text-align: center;
}
#someList .code,
#someList .date {
    text-align: right;
}
#someList .location {
    text-align: left;
}
#someList .desc,
#someList .code,
#someList .date,
#someList .time,
#someList .location {
    font-weight: 100;
}

Here is the full test page code that does the same job as the code in the previous post. Notice that the JavaScript code hasn’t needed to be changed at all either.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="someList">
<table><tr>
    <td><table><tr>
        <td class="desc">Seleziona checkbox</td>
        <td>Colonna A</td>
        <td>Colonna B</td>
        <td>Colonna C</td>
        <td>Colonna D</td>
        <td><input type="checkbox" name="C1" value="ON"></td>
        <td class="code">CMP</td>
        <td class="date">07/02/2010</td>
        <td class="time">06:43</td>
        <td class="location">SALERNO NORD</td>
    </tr></table></td>
</tr></table>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

The above demo code has the CSS code in external files called css/style.css and the JavaScript code in js/script.js

Many thanks x your help. It’s OK.

I have this problems:

  1. when unchecked the checkbox open another window…
  2. when checked other row open window, but the first row not change color and its checked

Can you help me?

Check that the checkbox is checked, before opening the window.


if (targ.checked) {
    window.open('somePage.html');
}

Oh, so you want only one to be checked at a time.

Before you do the row colour change, you need to first uncheck (and remove row colour) from all of the other rows.


uncheckAllExceptThis(targ);
updateRowColour(targ);

This is where things get tricky.

I am going to presume that all of the rows are contained within the one table. If instead you have a single table for each row, a modification will need to be made to the following code.

The uncheckAllExceptThis function walks up the DOM to the table, gets all of the input elements contained in there, and if the input element is a checkbox (but not the one that was clicked) the checkbox will be set to unchecked and the colour of the row will be reset.


function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {
            console.log(el.checked);
            el.checked = false;
            updateRowColour(el);
        }
    }
}

Here is the complete script code as it now stands:


var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    if (targ.checked) {
        window.open('somePage.html');
    }
};
function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {
            console.log(el.checked);
            el.checked = false;
            updateRowColour(el);
        }
    }
}
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    } else {
        input.checked = null;
    }
    input.parentNode.parentNode.className = checked;
}

Here is the complete script code as it now stands:


var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    if (targ.checked) {
        window.open('somePage.html');
    }
};
function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {
            console.log(el.checked);
            el.checked = false;
            updateRowColour(el);
        }
    }
}
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    } else {
        input.checked = null;
    }
    input.parentNode.parentNode.className = checked;
}

Sorry but I have error javascript: ‘console’ is undefined,

My apologies, it’s after midnight here. Get rid of the console.log line.

No problem, I understand… :slight_smile:

If change checkbox the last window popup remain open in the browser, why?

Currently the popup window is a new browser window that is being opened.

You’ll need to explain what type of popup window you require if you need something different.

Direct us to examples from other web sites if that will make it clearer easier for you to explain what you want.

I need that when change checkbox the first window popup close and open new window popup.

For example:

I select checkbox number one: the script open window popup of row number one.

I select checkbox number two: the script close window popup of row number one and open window popup of row number two.

You understand?
Thanks

Hi my friend, I have problem.

Any checkbox selected response always responds with the same sID…
But sID is different from different checkbox…

This is somePage.asp:

SELECT * FROM tbl WHERE ID = 28 

This is the grid rows / columns:

<script language="javascript" type="text/javascript">
<!--


function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {
            //console.log(el.checked);
            el.checked = false;
            updateRowColour(el);
        }
    }
}
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    } else {
        input.checked = null;
    }
    input.parentNode.parentNode.className = checked;
}

//-->
    </script>


<td align=center><input type=checkbox name=C1 value=ON></td>


<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('somePage.asp?sID=32', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
    

    }
};

</script>


<td align=center><input type=checkbox name=C1 value=ON></td>

<script type="text/javascript">

var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {
    
    var w = 1000
    var h = 400
    var left = (screen.width/2)-(w/2);
    var top  = (screen.height/2)-(h/2);
    window.open ('somePage.asp?sID=7', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
    

    }
};

</script>

Give the window a name, for example “details”


window.open('somePage.html', 'details');

I see that you’re adding on a lot more requirements than you first mentioned.

If you had mentioned these requirements earlier, such as at the start, you would already have things working as required.

Instead though, we are stumbling along while you push and prod things in previously unmentioned directions.

The new requirement is to submit the checkbox to the new window.
As the main window uses the post method, I will retain the same for the new window.

By the way, you really should rename “somePage.html” to a more descriptive name, perhaps something like “details”. I only use “somePage.html” to make this fact obvious to you.

Your solution is to submit the form to the window after it has been opened.

First, tell the form where you want to submit to. You have not said if the form posts using the “get” method or the “post” method, so I will presume that the standard “get” method is used to retrieve things.


<form method="get" action="somePage.php" target="details">

Then when it’s time to open the window, make it a blank window instead, and then tell the form to submit. The form will submit to the target that you have named.


window.open('', 'details');
targ.form.submit();

Hi, I dont understand… but not working:

SELECT * FROM tbl WHERE ID =
Microsoft OLE DB Provider for ODBC Drivers error ‘80040e14’

[MySQL][ODBC 5.1 Driver][mysqld-5.0.45-community-nt]You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘’ at line 1


<script language="javascript" type="text/javascript">
<!--
 
function uncheckAllExceptThis(input) {
    var table = input.parentNode,
        els,
        el,
        i;
    while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
        table = table.parentNode;
    }
    if (table.nodeName === 'BODY') {
        return;
    }
    els = table.getElementsByTagName('input');
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.type === 'checkbox' && el !== input) {
            el.checked = false;
            updateRowColour(el);
        }
    }
}
function updateRowColour(input) {
    var checked = '';
    if (input.checked) {
        checked = 'checked';
    } else {
        input.checked = null;
    }
    input.parentNode.parentNode.className = checked;
}
 
//-->
    </script>

<link type="text/css" rel="stylesheet" href="css/style.css">

<div id="someList">
<form method="get" action="somePage.php" target="details">

<td align=center><input type=checkbox name=C1 value=ON></td>
</div>
 
<script type="text/javascript"> 
 
var list = document.getElementById('someList');
list.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    uncheckAllExceptThis(targ);
    updateRowColour(targ);
    
    if (targ.checked) {  
    window.open('', 'details');
    targ.form.submit();
 
    }
};
 
</script>

</form>


I refer back to my previous statement.

You have not stated whether your PHP code uses $_GET or $_POST to retrieve the checkbox value.

If you are using $_GET (and you should when you are not making changes to the database) then you submit the form with:


<form method="get" action="somePage.php" target="details">

If you are using $_POST to retrieve the checkbox value, then you use “post” instead, and submit the form with:


<form method="post" action="somePage.php" target="details">

Nothing change… response with the same sID… :frowning: