how each row attributes can be edited by clicking on retrieved data from the database using PHP, javascript and html

Question

As you can see in the image above I marked 2nd row 2nd colmn, so my question is based on that when I click on 1st row on any attribute value I can edit it. But my logic doesnt work the same for all rows.

So any help would be appreciatd.

My code:

==> for tag

<head>
    <script>
    function dis(a,b) 
    {

            var x = document.getElementById(a);
            if (x.style.display === 'block') {
                x.style.display ='none';                                            
            }

            var y = document.getElementById(b);
            if (y.style.display === 'none') {
                y.style.display = 'block';
            }                           
    }           
    </script>
</head>

form content ==> (only table wer i take input and databased fetch records)

<tr>
    <td>
        <font color= #FFFFFF size=4 >  
        <input type="text" name="uname[]" value="<?php echo $row['uname']; ?>" readable>
        </font>
    </td> 

    <td>
        <div id='1' style="display: none;">
            <font color= #FFFFFF size=4 >
                <input type="password" name="pass[]" value="<?php echo $row['pass']; ?>">
        </div>
            <div id='11' style="display: block;" onclick = "dis(11,1)"><?php echo $row['pass']; ?>
        </div>
        </font>
    </td>

    <td>
        <div id='2' style="display: none;">
            <font color= #FFFFFF size=4 >
            <input type="text" name="fname[]" value="<?php echo $row['fname']; ?>">
        </div>
        <div id='12' style="display: block;" onclick = "dis(12,2)"><?php echo $row['fname']; ?>
        </div>
            </font>
    </td>

    <td><div id='3' style="display: none;"><font color= #FFFFFF size=4 ><input type="text" name="addr[]" value="<?php echo $row['addr']; ?>"></div><div id='13' style="display: block;" onclick = "dis(13,3)"><?php echo $row['addr']; ?></div></font></td>

    <td><div id='4' style="display: none;"><font color= #FFFFFF size=4 ><input type="text" name="no1[]" value="<?php echo $row['no1']; ?>"></div><div id='14' style="display: block;" onclick = "dis(14,4)"><?php echo $row['no1']; ?></div></font></td>

    <td><div id='5' style="display: none;"><font color= #FFFFFF size=4 ><input type="text" name="no2[]" value="<?php echo $row['no2']; ?>"></div><div id='15' style="display: block;" onclick = "dis(15,5)"><?php echo $row['no2']; ?></div></font></td>
</tr>

Each tag represents data retrieved and update option

Answer 1

Take a look at this JSFiddle . It has revamped both your HTML and javascript with a bit of help from jquery, though it can be achieved without jquery since I have added the appropriate classes in HTML and CSS.

CSS

.hidden{
    display: none;
  }

.back-black{
  background-color: black;
}
.white{
  color: white;
}

.col-6elem{
  width: calc(100%/6);
}
.col-1elem{
  width: 100%;
}

HTML

<table class="back-black white">
<thead>
  <tr>
    <td class="col-6elem"></td>
    <td class="col-6elem"></td>
    <td class="col-6elem"></td>
    <td class="col-6elem"></td>
    <td class="col-6elem"></td>
    <td class="col-6elem"></td>
  </tr>
</thead>
<tbody>
<tr>
<td>
  <input type="text" name="uname[]" value="rowUname" readable  class="col-1elem">
</td> 
<td>
    <input alt-type="password" type=hidden name="pass[]" value="rowPass" class="col-1elem">
    <div class="">rowPass</div>
</td>
<td>
    <input alt-type="text" type="hidden" name="fname[]" value="rowFname" class="col-1elem">
    <div class="">rowFname</div>
</td>
<td>
    <input alt-type="text" type="hidden" name="addr[]" value="addr" class="co1-1elem">
    <div class="">addr</div>
</td>
<td>
    <input alt-type="text" type="hidden" name="no1[]" value="no1" class="col-1elem">
    <div class="">no1</div>
</td>
<td>
    <input alt-type="text" type="hidden" name="no2[]" value="no2" class="col-1elem">
    <div class="">no2</div>
</td>
</tr>
</tbody>
</table>
<br/>
<button class="update-btn">
  Update
</button>

JS

$('tbody > tr > td').on('click', function(e){
  var $input = $('input',this);
  var $div = $('div',this);
  $div.hide();
  $input.attr('type', $input.attr('alt-type'));
});

$('button.update-btn').on('click', function(){
  // TODO: call update function and approperiate procedures
  var $td = $('tbody > tr > td');
  $td.each(function(){
    var $input = $('input',this);
    var $div = $('div',this);
    if ($input.attr('alt-type')) $input.attr('type', 'hidden');
    $div.show();
  });

});

how each row attributes can be edited by clicking on retrieved data from the database using PHP, javascript and html

Question

1 answers

solution1
0 2016-11-22 11:34:14

how each row attributes can be edited by clicking on retrieved data from the database using PHP, javascript and html

Question

1 answers

solution1 0 2016-11-22 11:34:14

solution1
0 2016-11-22 11:34:14