Question

我有一个html表，从postgres表获取其值，使用php来回显表内容。我的表中没有行，当我单击该行时，我希望该行的值在另一个函数中使用，我用sql值填充表的代码是

 while($row1 = pg_fetch_assoc($result1)) { 
          echo "<tr>"
            . "<td>{$row1['name']}</td>"
            . "<td>{$row1['email']}</td>"
            . "<td>"
                    . "<form id='form_id'>"
                    . "<input type='hidden' id='cord' value=$row1['lat']>"
                   . "<input type='hidden' id='cord1' value=$row1['lon']>"
                    . "<a onclick='submit_by_id()' >view</a>" 
                    . "</form>"

             . "</td>"
            . "</tr>\n";
        }
      }
    ?>

显示html表，但是当我点击onclick函数时，只显示第一行值（在警告框中），我不知道如何在点击时重置表单值或者是否还有其他方法优化它。

function submit_by_id() {
       var geom=document.getElementById('cord').value;
       var geom1=document.getElementById('cord1').value;
       alert(geom);
       alert(geom1);
            }

<table>
    <thead>
  <tr>
    <th>Name</a</th>
    <th>Email</th>
   
    <th>Click to view</th>
  </tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>email1</td>
<td>
<form id='form_id'>
<input type='hidden' id='cord' value=15><input type='hidden' id='cord1' value=73><a onclick='submit_by_id()' >view</a>
</form>
</td>
</tr>
<tr>
<td>name2</td>
<td>email2</td>
<td>
<form id='form_id'>
<input type='hidden' id='cord' value=16><input type='hidden' id='cord1' value=78><a onclick='submit_by_id()'>view</a>
</form>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

当你使用多行时，你的id cord1和cord也会重复。使其动态变化到每一行或使用类来获取值。

Answer 2

因为标签表明允许jQuery所以我使用jQuery。

您不应该有多个具有相同ID的元素。改为使用一个类：

           . "<form id='form_id'>"
            . "<input type='hidden' class='cord' value=$latlon[0]>"
            . "<input type='hidden' class='cord1' value=$latlon[1]>"
            . "<a onclick='submit_by_id()' class='glyphicon glyphicon-pushpin'></a>" 
            . "</form>"

要访问它，一个不错的方法是使用最近的方法来查找元素所在的表单：

function submit_by_id() {
       var $form = $(this).closest('form'); 
       var geom= $form.find('.cord').val();
       var geom1= $form.find('.cord1').val();
       alert(geom);
       alert(geom1);
            }

Answer 3

ID应该是唯一的，您需要在您的情况下使用类。改变

id='cord' and id='cord1'

到

class='cord' and class='cord1'

你的JS代码

function submit_by_id() {
   var geom=document.getElementById('cord').value;
   var geom1=document.getElementById('cord1').value;
   alert(geom);
   alert(geom1);
        }

到

function submit_by_id() {
           var $form = $(this).parent(); 
           var geom= $form.find('.cord').val();
           var geom1= $form.find('.cord1').val();
           alert(geom);
           alert(geom1);
    }

Answer 4

您正在使用while循环进行迭代，但它不会在每次迭代中创建动态表单。这意味着所有形式的行相同。并且提交表单没有指定要汇总的表格。你可以做这样的事情

while($row1 = pg_fetch_assoc($result1)) { 
   $i=0;
      echo "<tr>"
        . "<td>{$row1['name']}</td>"
        . "<td>{$row1['email']}</td>"
        . "<td>{$row1['device_id']}</td>"
        . "<td>{$row1['last_login']}</td>"
       . "<td>"
                . "<form id='form_id"$i."'>"
                . "<input type='hidden' id='cord".$i."' value=$latlon[0]>"
                . "<input type='hidden' id='cord1".$i."' value=$latlon[1]>"
                . "<a onclick='submit_by_id($i)' >view</a>" 
                . "</form>"

         . "</td>"
        . "</tr>\n";
   $i++; 
   }
  }
?>

在javascript中

function submit_by_id(id) {
   var geom=document.getElementById('cord'+id).value;
   var geom1=document.getElementById('cord1'+id).value;
   alert(geom);
   alert(geom1);
        }

Html表单Onclick函数不采用动态值

4 个答案: