代码之家 › 专栏 › 技术社区 › Val.M

Html表格文本条目占位符作为行索引

row html javascript

Val.M · 技术社区 · 7 年前

我有一个html表,可以在其中动态添加和删除行。为了避免进一步混淆,我希望每行第一个条目的占位符是该行的索引。

一个小的工作示例:

<!DOCTYPE html>
<html>
<body> 

<script src="https://code.jquery.com/jquery-1.12.1.js"   integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8="   crossorigin="anonymous"></script>
<script>
 window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) {
  var p=o.parentNode.parentNode;
  p.parentNode.removeChild(p);
 }

 $('document').ready(function() {
  $('.add_another').click(function() {
   $("#tbl").append('<tr><td><input type="text" class="txtbox" value="" placeholder=x.rowIndex/>  </td></tr>');
  });
 })</script>

<table id="tbl">
<tr>

</tr>
<tr>
<td><input type="text" name="links"  placeholder=x.rowIndex /></td>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
</tr>
</table>
<input type="submit" class="button add_another" value="Add another line"/>

</body>
</html>

在本例中,我希望用当前行索引替换x.rowindex。

有没有办法做到这一点?

非常感谢。

1 回复 | 直到 7 年前

ElasticCode 7 年前

window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) {
  var p = o.parentNode.parentNode;
  p.parentNode.removeChild(p);

  $('#tbl tr').each(function(i) {
    $(this).find('input').eq(0).attr("placeholder", i+1);
  });
}

$('document').ready(function() {
  $('.add_another').click(function() {
    $("#tbl").append('<tr><td><input type="text" class="txtbox" value="" placeholder="' + ($('#tbl tr').length + 1) + '"/></td><td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)" /></td></tr>');
  });

});

<!DOCTYPE html>
<html>

<body>

  <script src="https://code.jquery.com/jquery-1.12.1.js" integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8=" crossorigin="anonymous"></script>
  <table id="tbl">
    <tr>
      <td><input type="text" name="links" placeholder=1 /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)" /></td>
    </tr>
  </table>
  <input type="submit" class="button add_another" value="Add another line" />

</body>

</html>