使用 JavaScript 编辑 HTML 中的每一行

救命！我无法编辑表格中的其他行

这是我的脚本..它正在工作。 但仅限于第一行。

<script>
function showInput(e)
{
document.getElementById(e.id).type = "text";
document.getElementById(e.id).focus();
}
</script>

这是我的桌子。来自我的数据库。

<table class="table table-bordered">
<tr class="green">
    <th>Job Title</th>
    <th>Job Description</th>
    <th colspan="2">actions</th>
 </tr>
<?php foreach ($fill_data as $row): ?>enter code here

<tr>
    <td>
        <?php echo $row['title'];?>
        <div style="position:absolute; margin-top:-20px; margin-left:4px;">
            <input type="hidden" id="<?php echo $row['title'];?>" name="<?php echo $row['title'];?>" value="<?php echo $row['title'];?>">
        </div>
    </td>
    <td><?php echo $row['description'];?></td>
    <td width="40px"><img src="<?php echo base_url(); ?>images/edit1.png" width="30" height="30" title="Edit" onclick="showInput(<?php echo $row['title'];?>)" style="cursor: pointer"></td>
    <td><img data-toggle="modal" data-id="<?php echo $row['id']?>" class="delete-data" href="#delete" style="margin-top: 5px; cursor:pointer" height="15" width="15" src="<?php echo base_url(); ?>images/remove.gif"></td>
</tr>
<?php endforeach?>
</table>

$rows来自我的数据库。