How to add row in table with Javascript , table value checkbox,textbox,radio,select option?

Question

Click the add button, add a new row to the table

Welcome to Stackoverflow, but your question is not appropriate and complete. Read it for asking good questions. stackoverflow.com/help/how-to-ask — Wasif Khan
– Wasif Khan, Commented Mar 7, 2018 at 6:25
Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named "What topics can I ask about here?" and "What types of questions should I avoid asking?". And more importantly, please read the Stack Overflow question checklist. You might also want to learn about Minimal, Complete, and Verifiable Examples. — Muhammet Can TONBUL
– Muhammet Can TONBUL, Commented Mar 7, 2018 at 6:26

Akash More · Accepted Answer · 2018-03-07 06:53:37Z

1

You can create a string similar to your HTML code, that represents the row:

var new_row='<tr>' 
        + '<td><input type="text" id="firstName" name="firstName"></td>'
        + '<td><input type="text" id="lastName" name="lastName"></td>'
        + '<td><input type="radio" id="gender" name="gender"></td>'
        + '</tr>';

I have created only some part of it, you need to add everything your case requires. Then this JS can be used to add the new row to your table:

document.getElementById('table_id').append(new_row);

edited Mar 7, 2018 at 6:53

answered Mar 7, 2018 at 6:34

Akash More

821 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Raheem · Accepted Answer · 2018-03-07 06:39:53Z

@neversaynever, have you tried anything, well use this

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var fname = $("#fname").val();
            var lname = $("#lname").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + fname + "</td><td>" + lname + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });

        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="fname" placeholder="First Name">
        <input type="text" id="lname" placeholder="Last Name">
        <input type="text" id="email" placeholder="Email Address">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>rst</td>
                <td>xyz</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>

Nayantara Jeyaraj · Accepted Answer · 2018-03-07 06:48:35Z

In order to append a new row to an existing table, you can call a function with the following on the button click event of Add.

var table = document.getElementById("table_name");

var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");

//Rest of the required field data (td) will be declared here

var firstname = document.createElement('input');
firstname.type = 'text';
var lastname = document.createElement('input');
lastname.type = 'text';

//CReate the rest of the elements and append them to the respective <td>


td1.appendChild(firstname);
td2.appendChild(lastname);

//Append the remaining elements

//Then Append the <td>s to the row
tr.appendChild(td1); 
tr.appendChild(td2);


table.appendChild(tr);

To create the radio buttons within the Gender column, you can either present the code within the above function itself or extract it to a separate function and append the newly created radio button division to the respective td when above. The code to create a radio button division is shown here.

var objDiv = document.getElementById("radioDiv");   

var radioItem1 = document.createElement("input");   
radioItem1.type = "radio";   
radioItem1.name = "radioGender";   
radioItem1.id = "radio1";   
radioItem1.value = "Male";   

radioItem1.defaultChecked = true;    

var radioItem2 = document.createElement("input");   
radioItem2.type = "radio";   
radioItem2.name = "radioGender";   
radioItem2.id = "radio2";   
radioItem2.value = "Female";   

var objTextNode1 = document.createTextNode("Male");   
var objTextNode2 = document.createTextNode("Female");   
var objLabel = document.createElement("label");   
objLabel.htmlFor = radioItem1.id;   
objLabel.appendChild(radioItem1);   
objLabel.appendChild(objTextNode1);   

var objLabel2 = document.createElement("label");   
objLabel2.htmlFor = radioItem2.id;   
objLabel2.appendChild(radioItem2);   
objLabel2.appendChild(objTextNode2);       

objDiv.appendChild(objLabel);   
objDiv.appendChild(objLabel2);

Once the objDiv is created, simply append it to td3.

Likewise the following Mark field and COE fields can be created and appended as well.

Collectives™ on Stack Overflow

How to add row in table with Javascript , table value checkbox,textbox,radio,select option?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related