如何使用javascript将列添加到表中并从文本框中获取列名称？

Question

我写了这段代码，使用javascript将列添加到表中，并从html文本框中获取列名。 但这是行不通的。

JavaScript的：-

<script type="text/javascript">
 $(document).ready(function () {
     $('#btnAdd').click(function () {
         var count = 3,
             first_row = $('#Row2');
         while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
     });`enter code here`


     var myform = $('#myform'),
         iter = 4;

     $('#btnAddCol').click(function () {
        var col_name = document.getElementID("txt_col_name").value;
         myform.find('tr').each(function(){
           var trow = $(this);
             if(trow.index() === 0){
                 trow.append('<td>'+colname+'</td>');
             }else{
                 trow.append('<td><input type="text" name="al'+iter+'"/></td>');
             }

         });
         iter += 1;
     });
 });
        </script>

HTML：-

        <form name="myform" id="myform">
    <table id="blacklistgrid">
        <tr id="heading">
            <td>Employee ID</td>
            <td>Employee Name</td>
            <td>Basic Salary</td>
            <td>Mobile Allowances</td>
            <td>Travel Allowences</td>
            <td>Internet Allowences</td>
            <td>Sales Commission</td>
            <td>Bonus</td>
            <td>Net Salary</td>
        </tr>
            <?php
                $sql1="SELECT user_id, user_fname, user_lname
                FROM ".$prefix."users_info
                WHERE user_st='1'";
                $employee_info = $wpdb->get_results($sql1);
                //var_dump($employee_info);

                foreach ($employee_info as $employee_info_row)
                {
                    $user_id = $employee_info_row->user_id;
                    $user_fname = $employee_info_row->user_fname;
                    $user_lname = $employee_info_row->user_lname;

                    echo "<tr id=\"row\">";
                    echo "<td>";
                    echo "$user_id";
                    echo "</td>";
                    echo "<td>";
                    echo "$user_fname $user_lname";
                    echo "</td>";
                    echo "<td>";
                    echo "<input type=\"text\" name=\"bs\" />";
                    echo "</td>";
                    echo "<td>";
                    echo "<input type=\"text\" name=\"a1\" />";
                    echo "</td>";
                    echo "<td>";
                    echo "<input type=\"text\" name=\"a2\" />";
                    echo "</td>";
                    echo "<td>";
                    echo "<input type=\"text\" name=\"a3\" />";
                    echo "</td>";
                    echo "<td>";
                    echo "<input type=\"text\" name=\"sc\" />";
                    echo "</td>";
                    echo "<td>";
                    echo "<input type=\"text\" name=\"bns\" />";
                    echo "</td>";
                    echo "<td>";
                    echo "";
                    echo "</td>";
                    echo "</tr>";


                }

            ?>

    </table>

    <input type="text" id="txt_col_name"  name="add_col" />

    <button type="button" id="btnAddCol">Add new column</button>
    </br>
    </br>
    <input type="submit"></input>
</form>

我也想在“ Internet许可”和“销售委员会”之间添加新列。 谁能告诉我该怎么做。 谢谢

Answer 1

希望这个帮助

jsfiddle.net/stormspirit/2zh64/1/