如何通过使用PHP，javascript和html单击从数据库中检索到的数据来编辑每行属性

Question

如您在上图中所看到的，我将第二行标记为第二行，因此我的问题基于，当我在任何属性值上单击第一行时，都可以对其进行编辑。 但是，我的逻辑对所有行均不起作用。

因此，任何帮助将是感激的。

我的代码：

==>用于标签

<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>

表单内容==>（仅我接受输入和数据库提取记录的表）

<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>

每个标签代表检索到的数据和更新选项

Answer 1

看看这个JSFiddle 。 它通过jquery的一些帮助对HTML和javascript进行了改进，尽管不需要jquery就可以实现，因为我已经在HTML和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();
  });

});

如何通过使用PHP，javascript和html单击从数据库中检索到的数据来编辑每行属性

问题描述

1 个解决方案

解决方案1
0 2016-11-22 11:34:14

如何通过使用PHP，javascript和html单击从数据库中检索到的数据来编辑每行属性

问题描述

1 个解决方案

解决方案1 0 2016-11-22 11:34:14

解决方案1
0 2016-11-22 11:34:14