CODEWITHSUNDEEP
javascripthtmlhtml-table
Ayyanar G
Ayyanar G

Reputation: 1545

Issue on Getting clicked TR from TABLE using Javascript

enter image description here

I designed this using HTML Table, On Button hover Im showing two buttons(Delete,Set).I want to perform two actions,that is 1) When I click Delete Button,I want to delete that particular table row 2)When I click Set Button,I want to set the particular rows ListBox's selected value in Label and remove ListBox's.

My Table code:

<table id="dataTable" border="1px" bordercolor="lightgrey" cellpadding="10">
<caption>Monday</caption>
<tr bordercolor="grey"><td align="center">open</td><td align="center">close</td><td>
<ul class="dropv">
   <li> <a href="#"> <button type="button" name="btn[]">Button</button></a> 
    <ul>
      <li><a href="#"><input type="image" name="new[]" class="newbtn" onclick="addRow()" src="<?php echo Yii::app()->request->baseUrl; ?>/images/new.jpg"/></a></li>
      <li><a href="#">Link two</a></li>

     </ul>
    </li>
   </ul>

</td></tr>
<tr class="dasd"><td><select id ="t" style="width: 60px;">  
<?php 
    for ($i = 1; $i<=24;$i++)
    {
        echo "<option value=".$i.">".$i."</option>";
    }
?>
</select> : <select style="width: 60px;">
<?php 
    for ($i = 1; $i<=24;$i++)
    {
        echo "<option value=".$i.">".$i."</option>";
    }
?>
</select></td><td><select style="width: 60px;">
<?php 
    for ($i = 1; $i<=24;$i++)
    {
        echo "<option value=".$i.">".$i."</option>";
    }
?>
</select> : <select style="width: 60px;">
<?php 
    for ($i = 1; $i<=24;$i++)
    {
        echo "<option value=".$i.">".$i."</option>";
    }
?>
</select></td>
<td >
<ul class="dropv">
   <li> <a href="#"> <button type="button" name="btnt[]">Button</button></a>    
    <ul>
      <li><a href="#"><input type="button" value="Delete" name="ok[]" class="delbtn[]" onclick="delval(this)" /> </a></li>
      <li><a href="#"><input type="button" value="Set" name="set[]" class="tickbtn[]" onclick="setval(this)" /></a></li>

     </ul>
    </li>
   </ul>

</td></tr>
</table>

My Javascript code:

<script type="text/javascript">
function delval(e) {
     var table = document.getElementById("dataTable");
     var rowCount = table.rows.length;
        if(rowCount > 2)
         table.deleteRow(rowCount-1);

}
function setval(e) {

     var as = document.getElementById("t");

     var select = document.createElement("label");
     select.innerHTML = as.options[as.selectedIndex].value;
     as.parentNode.replaceChild(select, as);

}
</script>

Delete Button only works for last row delete,I also cant able to find the current row where button click is performed???

Upvotes: 0

Views: 253

Answers (4)

mano
mano

Reputation: 54

try ths , put text field near select option and hide them using javascript,put id for every select option

$('#texthere').hide();
 $("#a").change(function () {
   $('#texthere').show();
    var selectedItem = $("#a option:selected");
    $("#texthere").val(selectedItem.text());
        $('#a').hide();
});

demo---http://jsfiddle.net/ppSv4/4/

Upvotes: 0

mano
mano

Reputation: 54

Try this in your function....

$(this).closest('tr').remove();

Upvotes: 1

Daniel B&#246;ttner
Daniel B&#246;ttner

Reputation: 112

Add an id or class to the <tr> tag and reference it when you want to delete the row.

Upvotes: 0

KamilD
KamilD

Reputation: 163

I think it will better for you to use jQuery. Than you can find parent row just by:

$(this).parent('tr')

This is clicked button, and from taht button you go to parent tr - your actual tr that you want to delete.

Let's say in that way:

$('.delete').on('click', function() {
    $(this).parent('tr').remove();
});

Should work fine for you.

Upvotes: 0

Related Questions