chrome compatibility required

Question

0.00/5 (No votes)

See more:

The following code works fine with IE5+. But adding and deleting row becomes clattering when chrome is used. How to make it chrome compatible?

XML

<html>
    <head>
        <title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
        <script language="javascript">

            //add a new row to the table
            function addRow()
            {
                //add a row to the rows collection and get a reference to the newly added row
                var newRow = document.all("tblGrid").insertRow();

                //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

                var oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t1'>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<select name='t2'  ><option>Select Type</option><option>int</option><option>string</option><option>boolean</option></select>";

                oCell = newRow.insertCell();
                oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";
            }

            //deletes the specified row from the table
            function removeRow(src)
            {
                /* src refers to the input button that was clicked.
                   to get a reference to the containing <tr> element,
                   get the parent of the parent (in this case case <tr>)
                */
                var oRow = src.parentElement.parentElement;

                //once the row reference is obtained, delete it passing in its rowIndex
                document.all("tblGrid").deleteRow(oRow.rowIndex);
            }

        </script>
    </head>
    <body>
        Demo
        <p/>
        Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
        <p/>
        <p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
        <p/>
        <hr>
        <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
        <table id="tblGrid" style="table-layout:fixed">
            <tr>
                <td width="150px">Name</td>
                <td width="150px">Type</td>
                <td width="250px">Default Value</td>
            </tr>
            <tr>
                <td><input type="text" name="t1" value="GEN_SSI_VER" readonly /></td>
                <td><select name="t2"  >
                    <option>Select Type</option>
                    <option>int</option>
                    <option>string</option>
                    <option>boolean</option></select></td>
                <td><input type="text" name="t3" value="SSI" readonly /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
            </tr>
            <tr>
                <td><input type="text" name="t1" value="SPEC_VER" readonly /></td>
                <td><select name="t2"  >
                    <option>Select Type</option>
                    <option>int</option>
                    <option>string</option>
                    <option>boolean</option></select></td>
                <td><input type="text" name="t3" value="1" readonly /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
            </tr>
            <tr>
                <td><input type="text" name="t1" value="GEN_STK_VER" readonly /></td>
                <td><select name="t2"  >
                    <option>Select Type</option>
                    <option>int</option>
                    <option>string</option>
                    <option>boolean</option></select></td>
                <td><input type="text" name="t3" value="STK1.5" readonly /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
            </tr>
            <tr>
                <td><input type="text" name="t1" value="GEN_CLASS_T" readonly /></td>
                <td><select name="t2"  >
                    <option>Select Type</option>
                    <option>int</option>
                    <option>string</option>
                    <option>boolean</option></select></td>
                <td><input type="text" name="t3" value="dmtimer_t" readonly /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
            </tr>
            <tr>
                <td><input type="text" name="t1" value="GEN_SCONS_MODULE" readonly /></td>
                <td><select name="t2"  >
                    <option>Select Type</option>
                    <option>int</option>
                    <option>string</option>
                    <option>boolean</option></select></td>
                <td><input type="text" name="t3" value="DMTIMER_SC" readonly /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
            </tr>
        </table>
        <hr>
        <input type="button" value="Add Row" onclick="addRow();" />
    </body>
</html>

XML

<select name="t2"  >
                    <option>Select Type</option>
                    <option>int</option>
                    <option>string</option>
                    <option>boolean</option></select>

Your response will be highly accepted.

Posted 29-May-11 20:07pm

Subhadeep2007

Add a Solution

Comments

Sandeep Mewara 30-May-11 2:10am

Look at the view source of the page in IE & Chrome and share the differences you found while clutter.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)