SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inserting a Check box into a JS generated Table

    Hello

    i am looking for the syntax to add a check box into a table that is generated by Javascript code?

    should i use innerhtml or document.create element and the appendChild?
    Code JavaScript:
    // crц╘ation des ц╘lц╘ments <table> et <tbody>
            var smartlinksTable = document.createElement("table");
            var smartlinksTbody = document.createElement("tbody");
           //appliquer la classe CSS SmartLink au tableau d'affichage
            smartlinksTable.id = 'TableauAffichageSL';
            //smartlinksTable.style.width= '100%';
            //smartlinksTable.style.cellPadding = '5';
     
     
            // crц╘ation des cellules
            //for(var j = 0; j < 2; j++) {
                // crц╘ation d'un ц╘lц╘ment <tr>
                var smartlinksLine = document.createElement("tr");
     
                // crц╘ation du premier ц╘lц╘ment <td> de la ligne SmartLinks
                 var smartlinksCell1 = document.createElement("td");
                smartlinksCell1.id = 'AffichageSLCell1';
                // Remplissage de la cellule relative au lien source du SmartLink 
                    smartlinksCell1.innerHTML += '<span id="TitreSource">' + SmartLink.title_source + '</span>';
                    smartlinksCell1.innerHTML += '<br />';
                    smartlinksCell1.innerHTML += (BrokenUrl);
     
                	// ajoute la premiere cellule <td> ц═ la ligne <tr>
                    smartlinksLine.appendChild(smartlinksCell1);
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hth

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function createTable() {
                    var body = document.getElementsByTagName('BODY')[0];
                    var table = document.createElement('TABLE');
    
                    var tbody = document.createElement('TBODY');
    
                    for(var i = 0; i < 30; i++) {
    
                        var row = document.createElement('TR');
    
                        var col1 = document.createElement('TD');
                        var check = document.createElement('INPUT');
                            check.type = 'checkbox';
                            col1.appendChild(check);
    
                        var col2 = document.createElement('TD');
                            col2.appendChild(document.createTextNode('test'));
    
                            row.appendChild(col1);
                            row.appendChild(col2);
    
                            tbody.appendChild(row);
    
                    }
    
                        table.appendChild(tbody);
    
                        body.appendChild(table);
                }
    
                window.onload = createTable;
            </script>
        </head>
        <body>
            
        </body>
    </html>


  3. #3
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you i actually did it with innerHTML
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  4. #4
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    //Insertion d'une checkbox dans la ligne SmartLink
                 if (show_checkbox == true) //verifie si la variable show_checkbox est vrai!
                 { 
                 var celluleCheckBox = document.createElement("td");
                 celluleCheckBox.id = 'celluleCheckBoxstyle';
       			 celluleCheckBox.innerHTML = '<input type="checkbox" id="sl_json_selected_' +SmartLink.id_source+ '" name="sl_json_selected_' +SmartLink.id_source+ '" value="off" onclick="updateCheckboxValue(\'sl_json_selected_' +SmartLink.id_source+ '\')">';
       			 smartlinksLine.appendChild(celluleCheckBox);
    				}
    On a PHP/Java/XML/Javascript/MySQL internship right now!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •