how to put span in Js

meshi · 10-10-2007, 10:30 AM

Code:

function addRow(con,pos,tel,email)
{
	var tbody=document.getElementById('contact').getElementsByTagName("TBODY")[0];
	var row = document.createElement("TR");
	var td1 = document.createElement("TD");td1.appendChild(document.createTextNode(con));
	var td2 = document.createElement("TD");td2.appendChild(document.createTextNode(pos));
	var td3 = document.createElement("TD");td3.appendChild (document.createTextNode(tel));
	var td4 = document.createElement("TD");td4.appendChild(document.createTextNode(email));
	row.appendChild(td1);row.appendChild(td2);row.appendChild(td3);row.appendChild(td4);tbody.appendChild(row);
}
function applystyle(id)
{
	if(document.getElementsByTagName)
{
	var table = document.getElementById(id);
	var col = table.getElementsByTagName("td");
	for(i = 4; i < col.length; i++)
	{
		col[i].className = "table-list-entry1";
	}
}
}

the output of this is
con pos tel email
meshi janitor 0555 dfdsf@y.com

if i put a span tags in the email side how would i do that in scripts
hope u could help me
PS
my span has also a class="notaction"
how would i add it to my code

Karl · 10-10-2007, 03:21 PM

I'm sorry, I dont quite understand you, could you be more specific?

meshi · 10-10-2007, 03:39 PM

this code is a pop up page that inputs all the needed datas

PHP Code:


			
$text_array = array(

          'Firstname' => array ( 

                    'name'=> 'firstname', 

                    'text'=> 'Firstname',

                    'type'=> 'text',

                    'class'=>'inputbox',

                    'value'=>"$row[confirstname]"

                 ),

                     'Lastname'=> array ( 

                    'name'=> 'lastname', 

                    'text'=> 'Lastname', 

                    'type'=> 'text',

                    'class'=>'inputbox',

                    'value'=>"$row[conlastname]"

                 ),

                  'Salutation' => array ( 

                    'name'=> 'salutation', 

                    'text'=> 'Salutation', 

                    'type'=> 'text',

                    'class'=>'inputbox'

                 ),

                 'Position' => array ( 

                    'name'=> 'position', 

                    'text'=> 'Position', 

                    'type'=> 'text',

                    'class'=>'inputbox',

                    'value'=>"$row[position]"

                 ), 

                 'Decision Maker' => array ( 

                    'name'=> 'dm', 

                    'text'=> 'Decision Maker',

                    'type'=> 'checkbox',

                    'checkbox'=>'true',

                    'value'=> "$row[dm]"    

                 ),

                 'Direc Dial' => array ( 

                    'name'=> 'ddial', 

                    'text'=> 'Telephone Number', 

                    'type'=> 'text',

                    'class'=>'inputbox',

                    'value'=>"$row[direct_dial]"

                 ),

                 'Email Address' => array ( 

                    'name'=> 'email', 

                    'text'=> 'Email Address', 

                    'type'=> 'text',

                    'class'=>'inputbox',

                    'value'=>"$row[emailad]"

                 ),

);

if(isset($_POST['save']))

    {

    $query="insert into rec_contacts(employer_id,confirstname,conlastname,salutation,position,dm,direct_dial,emailad,con_coment)VALUES('$empid','$_POST[firstname]','$_POST[lastname]','$_POST[salutation]','$_POST[position]','$value','$_POST[ddial]','$_POST[email]','$_POST[con_coment]')";

    $result=mysql_query($query);

    $query    =    "select * from rec_contacts where employer_id='$empid'";

     echo "<script language='Javascript'>

                    alert('Data successfully saved');

                          window.opener.addRow('$fname','$_POST[position]','$_POST[ddial]','$_POST[email]');

                          window.opener.applystyle('contact');                    

                    window.close();

                   </script>";

    }    

}

this page will display wat u just inputed

Code:

function addRow(con,pos,tel,email)
{
	var tbody=document.getElementById('contact').getElementsByTagName("TBODY")[0];
	var row = document.createElement("TR");
	var td1 = document.createElement("TD");td1.appendChild(document.createTextNode(con));
	var td2 = document.createElement("TD");td2.appendChild(document.createTextNode(pos));
	var td3 = document.createElement("TD");td3.appendChild (document.createTextNode(tel));
	var td4 = document.createElement("TD");document.createElement("SPAN");td4.appendChild(document.createTextNode(email));
	row.appendChild(td1);row.appendChild(td2);row.appendChild(td3);row.appendChild(td4);tbody.appendChild(row);
}
function applystyle(id)
{
	if(document.getElementsByTagName)
{
	var table = document.getElementById(id);
	var col = table.getElementsByTagName("td");
	for(i = 4; i < col.length; i++)
	{
		col[i].className = "table-list-entry1";
	}


}
}

PHP Code:


			
$contact_array=array('Name','Position','Telephone No','Email');

    

    echo '<tr>';

                contactlist($contact_array);              

    echo '</tr>';

    while($row=mysql_fetch_array($result))

    {

echo '<tr>

          <td class="table-list-entry1"><a href="'; echo $_SERVER["PHP_SELF"]; echo '?click=addcontacts.php&menu=1&conid='.$row[contact_id].'">'.$row[confirstname].' '.$row[conlastname].'</a></td>

          <td class="table-list-entry1">'.$row[position].'</td>

          <td class="table-list-entry1">'.$row[direct_dial].'</td>

          <td class="table-list-entry1"><span class="notaction"><a href=mailto:'.$row[emailad].'>'.$row[emailad].'</a></span></td></tr>';

        }

        echo '<tbody>';

        }

        else 

        {

        echo '<tr><td>No Contacts</td></tr>';

        echo '</tbody>';    

        }

the flow of this code is when i click the add contact the popup page apear and u will input the needed data after that u will click the save button and the inputed data will display automatically to the first page.my problem is i dont know how to put the mailto and span on my script to make it similar to other data that coming from database or old data displayed b4 u add the new one...in the email field

PS
see where tbody is..that will display the new inputed data

Karl · 10-10-2007, 04:02 PM

Ah, I see. Try this:

Add the following code to your addRow function:

Code:

var pAnchor = document.createElement('a');
pAnchor.href = 'mailto:' + email;

var pSpan = document.createElement('span');
pSpan.className = 'notaction';
pSpan.appendChild(pAnchor);

Then replace this code:

Code:

document.createElement("SPAN");td4.appendChild(document.createTextNode(email));

with:

Code:

td4.appendChild(pSpan);

meshi · 10-11-2007, 12:21 PM

i did ur advice but it has no display on email field..i change my JS.and what i did is this one

Code:

function addRow(con,pos,tel,email)
{
	var tbody=document.getElementById('contact').getElementsByTagName("TBODY")[0];
	var row = document.createElement("TR");
	var td1 = document.createElement("TD");td1.appendChild(document.createTextNode(con));
	var td2 = document.createElement("TD");td2.appendChild(document.createTextNode(pos));
	var td3 = document.createElement("TD");td3.appendChild (document.createTextNode(tel));
	var td4 = document.createElement("TD");td4.appendChild(document.createTextNode(email));
	row.appendChild(td1);row.appendChild(td2);row.appendChild(td3);row.appendChild(td4);tbody.appendChild(row);
}
function applystyle(id)
{
	if(document.getElementsByTagName)
{
	var table = document.getElementById(id);
	var col = table.getElementsByTagName("TD");
	for(i =4; i < col.length; i++)
	{
		if (((i+1)%4)==0)
			col[i].className = "table-list-entry1 notaction";
		else       
			col[i].className = "table-list-entry1";       
	}
}
}

my problem now is how to put mailto in the email field?forget the span thing i only want to put mailto..how would i do that?

Karl · 10-11-2007, 12:31 PM

Hmm, the last bit of code I gave you should have put the mailto: link in with the anchor. Did you try it?

meshi · 10-11-2007, 12:46 PM

yeah i did but there is no display in the email field

Karl · 10-11-2007, 01:00 PM

Ah I forgot something in the last bit of code I posted. If you ammend this code:

Code:

var pAnchor = document.createElement('a');
pAnchor.href = 'mailto:' + email;

var pSpan = document.createElement('span');
pSpan.className = 'notaction';
pSpan.appendChild(pAnchor);

by adding the following line:

Code:

pAnchor.innerHTML = email;

So that it looks like:

Code:

var pAnchor = document.createElement('a');
pAnchor.href = 'mailto:' + email;
pAnchor.innerHTML = email;

var pSpan = document.createElement('span');
pSpan.className = 'notaction';
pSpan.appendChild(pAnchor);

If you try to run that again you should see the valid mailto link with the anchor text set to the value of email.

meshi · 10-11-2007, 01:21 PM

its ok now....thanks karl...ur the best...its been a long time since i start solving this problem...thank u thank u thank u