<JSP/JQuery> How to make text input box when click on the button

Question

I have a table(check box included) with data as following. And there is "ADD" button.

<script type="text/javascript">
 I don't know what comes here..
</script>
 .
 .
 .  
 .      

 <colgroup>
    <col style="width:30px;"/>
    <col style="width:200px;"/>
    <col style="width:300px;"/>
    <col style="width:px;"/>
</colgroup>
<thead>
<tr>
    <th scope="col"><input type="checkbox" id="chkAllGrp" name="chkAllGrp" onclick="CommonUtil.chkAll('chkAllGrp','chkGrp')"/></th>
    <th scope="col">LINE</th>
    <th scope="col">ITEM</th>
</tr>
</thead>
<tbody>
<c:forEach items="${resultList.content}" var="result" varStatus="status">
  <tr>
    <td><input type="checkbox" id="chkGrp" name="chkGrp" value="${result.line}"/></td>
    <td style="cursor:pointer;" onclick="fnSelGrp('${result.line}', '${result.item}')">${result.line}</td>
    <td>${result.item}</td>
 </tr>
</c:forEach>

   <div class="area_btnA clfix mgB20">
        <a href="#" onclick="addInputBox();return false;" class="btnA"><strong>ADD</strong></a>
    </div>

What I want to make is that when I click on the ADD button, a new row of text-input box appears on the bottom of displayed-data rows. Can anyone help me with OnClick event code?

Jobin · Accepted Answer · 2013-11-28 06:39:20Z

1

something like ,

function addInputBox(){
    jQuery('#myTable tr:last').after('<tr><input type="checkbox"  name="chkGrp" value=""/></tr><tr>your html content here</tr>');

}

#myTable is table id.

answered Nov 28, 2013 at 6:39

Jobin

8,2822 gold badges36 silver badges54 bronze badges

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

Comments

rajesh kakawat · Accepted Answer · 2013-11-28 06:47:07Z

1

try something like this

    function addInputBox(){
        var tr = '<tr>';
        tr += '<td><input type="text" id="mytextbox" name="mytextbox" value=""/></td>'
        tr += '<td></td><td></td>'
        tr += '</tr>'
        jQuery('#table_id').append(jQuery(tr));
    }

answered Nov 28, 2013 at 6:47

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

<JSP/JQuery> How to make text input box when click on the button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related