Hello.
I have a user defined function in start of an Html page. I want to add textfields in the innerHtml. Please guide me what should I do. When I enter string in the innerHtml on line 10 and 11, It show "New" in the cells. BUt i am adding textfileds instead of "New", Nothing happens.

Here is the code

<html>
<head>
<script>
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML="New";
cell2.innerHTML="New";
}
</script>
</head>

Need Guidance.

Regards.

Aamir Karim.

This HTML looks like Click Here

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML='<input name="myinput" type="input">';
cell2.innerHTML="New";
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert new row</button>

</body>
</html>

Code updated with an input in the table cell

Thanks @paulkd
Ok I am making mistake line 11 parenthesis. Let me check this...

Thanks alot dear.
Yes it works. The Correct code is here.

<script>
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(5);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell1.innerHTML='<input name="myinput" type="input">';
cell2.innerHTML="2";
cell3.innerHTML="3";
cell4.innerHTML="4";
}
</script>

<table id="myTable" width="666" border="1" align="center" bgcolor="#FFFFCC">
            <tr>
              <td width="312"><strong>Medicine</strong></td>
              <td width="80"><strong>Quantity</strong></td>
              <td width="65"><strong>Rate</strong></td>
              <td width="74"><strong>Total</strong></td>
            </tr>
            <tr>
              <td><label>
                <select name="select">
                </select>
              </label></td>
              <td><label>
                <input type="text" name="textfield" />
              </label></td>
              <td><input type="text" name="textfield5" /></td>
              <td><input type="text" name="textfield9" /></td>
            </tr>
            <tr>
              <td><label>
                <select name="select2">
                </select>
              </label></td>
              <td><input type="text" name="textfield2" /></td>
              <td><input type="text" name="textfield6" /></td>
              <td><input type="text" name="textfield10" /></td>
            </tr>
            <tr>
              <td><label>
                <select name="select3">
                </select>
              </label></td>
              <td><input type="text" name="textfield3" /></td>
              <td><input type="text" name="textfield7" /></td>
              <td><input type="text" name="textfield11" /></td>
            </tr>
            <tr>
              <td><label>
                <select name="select4" size="1">
                </select>
              </label></td>
              <td><input type="text" name="textfield4" /></td>
              <td><input type="text" name="textfield8" /></td>
              <td><input type="text" name="textfield12" /></td>
            </tr>
          </table>

          <button type="button" onclick="displayResult()">Insert new row</button>
          <p align="center">
            <label>
            <input type="submit" name="Submit2" value="Submit" />
            </label>

You solved my issue less then 5 minutes.

That's great.

cell1.innerHTML='<input name="myinput" type="input">';

the type should be "text" not input.Though it is working because default type is text.Correct it.

Alternative of above example,you can do it by using createElement and then set attributes of that element.

var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "text");
element.setAttribute("name", "text");
cell1.appendChild(element);
cell2.innerHTML="New";

<embarrassed/>

Hmmm.
Thanks for correction.

One more question.
How dropdown list will be added in <script></script> like textfilesds while the options of the dropdown list is stored in MySQL tale med_t?

Thanks

you can create element for select then add options by creating option element and assigning value and text and id and class if required.
i have added comments in code to understand the code worling

var table=document.getElementById("myTable");
var row=table.insertRow(5);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "text");
element.setAttribute("name", "text");
cell1.appendChild(element);

//changes frm here
var element1 = document.createElement("select");//create select element
element1.setAttribute("name", "text");
var option = document.createElement("option");//create option element
 option.text = "name";//option text attribute
    option.value = "name";//option value attribute
     try {
        element1.add(option, null); //Standard 
    }catch(error) {
        element1.add(option); // IE only
    }
    cell2.appendChild(element1);//append select to cell

//till here
cell3.innerHTML="3";
cell4.innerHTML="4";

Thanks @IIM.
Its working fine. But i don't know where I am making a mistake. Its not fetching data from MySQL table.
I have tried it in diffirent ways but no success. Have a look on code I have done so far.

var element = document.createElement("select");//create select element
    element.setAttribute("name", "text");
    var option = document.createElement("option");//create option element
    option.text = "name1";//option text attribute
    option.value= '<?php
        //Server= localhost, Username= root, pasword = "there is no password" and db name = bsc_db.
    mysql_connect('localhost', 'root', '') or die('Connection could not be established');
    mysql_select_db('bsc_db') or die('Database is not present');
    $q = mysql_query("SELECT * FROM doctor_t");
    $options = '';
    while($r = mysql_fetch_array($q))
    {
    $options .= '<option value="'.$r['id'].'">'.$r['dname'].'</option>';
    }
    ?>'
    //option.value = "name";//option value attribute
    try 
    {
    element.add(option, null); //Standard
    }catch(error) {
    element.add(option); // IE only
    }
cell1.appendChild(element);

I am trying that when user click on Insert New Row button so new should be added and in first cell, A dropdown menu should be displayed and the values in that drop down menu is fetching from my SQL table "doctor_t" and the field is "dname".
Everything is going fine but its not fetching the values from the above said table.

regards.

When doing like this,

var element = document.createElement("select");//create select element
    element.setAttribute("name", "text");
    var option = document.createElement("option");//create option element
    <?php
                     //Server= localhost, Username= root, pasword = "there is no password" and db name = bsc_db.
    mysql_connect('localhost', 'root', '') or die('Connection could not be established');
    mysql_select_db('bsc_db') or die('Database is not present');
    $q = mysql_query("SELECT * FROM doctor_t");
    $options = '';
    while($r = mysql_fetch_array($q))
    {
    $options .= '<option value="'.$r['id'].'">'.$r['dname'].'</option>';
    }
    ?>
    option.text = '<?php echo $options;?>';//option text attribute
    option.value= "text";
        //option.value = "name";//option value attribute
    try 
    {
    element.add(option, null); //Standard
    }catch(error) {
    element.add(option); // IE only
    }
cell1.appendChild(element);

I get the result like one that is attached to this post. Made changes at line 16.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.