单击tr隐藏并显示文本框,然后单击按钮在div中打印相同的文本框

用户名

我试图通过隐藏单击的行的标签来显示单击的行上的文本框,然后单击按钮将文本框数据打印在“ showresult” div上。我的问题是无法隐藏和显示我拥有的文本框收集了一个可以更改颜色的脚本,但是不确定如何隐藏和显示文本框以及如何打印数据。

$(document).ready(function () {
    $('tr').click(function () {
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', 'red');
        }
        else {
            $(this).css('background', 'white');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
    </tr>

    <tr>
        <td><label>data1</label> <input type="text" value="1" /></td>
        <td><label>data2</label>  <input type="text" value="2"  /></td>
        <td><label>data3</label>  <input type="text" value="3" /></td>
        <td><label>data4</label>  <input type="text" value="4" /></td>
        <td><label>data5</label>  <input type="text" value="5" /></td>
    </tr>
    <tr>
        <td><label>data6</label> <input type="text" value="6" /></td>
        <td><label>data7</label>  <input type="text" value="7" /></td>
        <td><label>data8</label>  <input type="text" value="8"  /></td>
        <td><label>data9</label>  <input type="text" value="9" /></td>
        <td><label>data10</label>  <input type="text" value="10" /></td>
    </tr>

</table>

<input type="button" value="printdata"/>
<div id="showresult"></div>

来宾271314

假设我有两行,当用户单击选定的行时,该文本框将被隐藏,并且该标签将作为显示显示,该标签应被隐藏并且该文本框应可见,然后如果用户单击该按钮,则该文本框应可见然后应打印数据或单击的行文本框值 #showresult

尝试利用.toggle()到显示,不显示labelinput内的元件tr点击的元素; 创建indextr单击元素对应的变量; 单击时#printdatatrindex使用时迭代.each(),创建一个对象,其属性为label,值input,设置#showresult html为创建的对象

$(document).ready(function() {
  var index = null;
  $("tr").click(function() {
    $("input, label", this).toggle();
    index = $(this).index("tr");
  });
  $("input[type=button]").click(function() {
    var obj = {};
    var elems = $("tr").eq(index).find("label, input");
    elems.each(function(i, el) {
      if ($(el).is("label")) {
        obj[el.textContent] = elems[i + 1].value
      }
    });
    $("#showresult").html("<pre>" + JSON.stringify(obj, null, 2) + "</pre>")
  })
});
tr td input {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
  <tbody>
    <tr style="background:transparent">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
    </tr>

    <tr>
      <td>
        <label>data1</label>
        <input type="text" value="1" />
      </td>
      <td>
        <label>data2</label>
        <input type="text" value="2" />
      </td>
      <td>
        <label>data3</label>
        <input type="text" value="3" />
      </td>
      <td>
        <label>data4</label>
        <input type="text" value="4" />
      </td>
      <td>
        <label>data5</label>
        <input type="text" value="5" />
      </td>
    </tr>
    <tr>
      <td>
        <label>data6</label>
        <input type="text" value="6" />
      </td>
      <td>
        <label>data7</label>
        <input type="text" value="7" />
      </td>
      <td>
        <label>data8</label>
        <input type="text" value="8" />
      </td>
      <td>
        <label>data9</label>
        <input type="text" value="9" />
      </td>
      <td>
        <label>data10</label>
        <input type="text" value="10" />
      </td>
    </tr>
  </tbody>
</table>

<input type="button" value="printdata" />
<div id="showresult"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击按钮时无法显示文本框中的文本?

来自分类Dev

单击按钮后在文本框中显示checkBox的文本

来自分类Dev

单击按钮时显示文本框

来自分类Dev

使文本框在tr(row)单击上可见,并在DIV中的按钮单击上打印相同的数据

来自分类Dev

单击复选框动态隐藏/显示文本框

来自分类Dev

动态显示按钮单击时的文本框

来自分类Dev

用户在文本框中单击时隐藏表行

来自分类Dev

单击按钮从表单上的多个文本框中清除文本框

来自分类Dev

通过单击按钮不正确,其他文本框中的文本框值

来自分类Dev

单击Angular JS中的按钮添加新文本框

来自分类Dev

文本框更改停止按钮在jQuery中单击

来自分类Dev

在文本框中按 Enter 以触发单击按钮

来自分类Dev

如何单击隐藏在我的文本框中的按钮,在 appium 的角落以图像的形式

来自分类Dev

单击清除文本框

来自分类Dev

单击按钮可将列表中的下一个项目打印到文本框

来自分类Dev

如何在单击按钮时在div内显示文本框的内容?

来自分类Dev

在按钮单击和选项上添加新的div以选择显示文本框的选项

来自分类Dev

如何使它在文本框中按 Enter 与单击旁边的按钮相同?

来自分类Dev

3个文本框,1个按钮,单击按钮时,将文本放在光标所在的文本框中

来自分类Dev

单击文本框时如何擦除或隐藏文本框文本?C#

来自分类Dev

我想在文本框中显示值,而无需单击按钮。只是更新值

来自分类Dev

单击按钮时如何在文本框中显示不同的sql数据

来自分类Dev

单击撇号中的单选按钮后无法显示文本框

来自分类Dev

单击kendo按钮时如何在div中添加新的文本框?

来自分类Dev

单击按钮更改所选文本框的文本

来自分类Dev

使文本框仅在首次单击时突出显示文本

来自分类Dev

单击复选框,将选中的值放入文本框,然后从文本框中删除未选中的值

来自分类Dev

单击链接时,如何使文本框发光然后褪色?

来自分类Dev

强制元素在文本框外部单击时隐藏

Related 相关文章

  1. 1

    单击按钮时无法显示文本框中的文本?

  2. 2

    单击按钮后在文本框中显示checkBox的文本

  3. 3

    单击按钮时显示文本框

  4. 4

    使文本框在tr(row)单击上可见,并在DIV中的按钮单击上打印相同的数据

  5. 5

    单击复选框动态隐藏/显示文本框

  6. 6

    动态显示按钮单击时的文本框

  7. 7

    用户在文本框中单击时隐藏表行

  8. 8

    单击按钮从表单上的多个文本框中清除文本框

  9. 9

    通过单击按钮不正确,其他文本框中的文本框值

  10. 10

    单击Angular JS中的按钮添加新文本框

  11. 11

    文本框更改停止按钮在jQuery中单击

  12. 12

    在文本框中按 Enter 以触发单击按钮

  13. 13

    如何单击隐藏在我的文本框中的按钮,在 appium 的角落以图像的形式

  14. 14

    单击清除文本框

  15. 15

    单击按钮可将列表中的下一个项目打印到文本框

  16. 16

    如何在单击按钮时在div内显示文本框的内容?

  17. 17

    在按钮单击和选项上添加新的div以选择显示文本框的选项

  18. 18

    如何使它在文本框中按 Enter 与单击旁边的按钮相同?

  19. 19

    3个文本框,1个按钮,单击按钮时,将文本放在光标所在的文本框中

  20. 20

    单击文本框时如何擦除或隐藏文本框文本?C#

  21. 21

    我想在文本框中显示值,而无需单击按钮。只是更新值

  22. 22

    单击按钮时如何在文本框中显示不同的sql数据

  23. 23

    单击撇号中的单选按钮后无法显示文本框

  24. 24

    单击kendo按钮时如何在div中添加新的文本框?

  25. 25

    单击按钮更改所选文本框的文本

  26. 26

    使文本框仅在首次单击时突出显示文本

  27. 27

    单击复选框,将选中的值放入文本框,然后从文本框中删除未选中的值

  28. 28

    单击链接时,如何使文本框发光然后褪色?

  29. 29

    强制元素在文本框外部单击时隐藏

热门标签

归档