我试图通过隐藏单击的行的标签来显示单击的行上的文本框,然后单击按钮将文本框数据打印在“ 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>
假设我有两行,当用户单击选定的行时,该文本框将被隐藏,并且该标签将作为显示显示,该标签应被隐藏并且该文本框应可见,然后如果用户单击该按钮,则该文本框应可见然后应打印数据或单击的行文本框值
#showresult
尝试利用.toggle()
到显示,不显示label
,input
内的元件tr
点击的元素; 创建index
与tr
单击元素对应的变量; 单击时#printdata
,tr
在index
使用时迭代.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] 删除。
我来说两句