如何获取新表行仅当先前输入的一行不为空时才单击
How to get new table rows onClick only when one line of previous inputs is not empty?
如何获取新行仅在先前输入的一行不为空时才单击？
*"一行以前的输入" - 我有 1 行空白输入，只要我单击它，就会创建下一行，但我的第一行将是空的或部分满的，而不是我不想创建新行。
以下代码是我到目前为止拥有的代码：
- 第一行创建加载
- 单击输入时创建新
行- Checkempty 功能已准备就绪
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GE Watch</title>
<style type="text/css">
input{width:76px;height:20px;padding:0;margin:0;display:block;float:left}table{padding:0;margin:0;border:thin dotted #333}tr{padding:0;margin:0}td{width:80px;height:20px;padding:0;margin:0;text-align:center}
</style>
<script language="javascript" type="text/javascript">
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var RowCount = 11;
for (i = 1; i <= RowCount; ++i) {
var td = document.createElement("td")
td.appendChild(document.createElement("input"))
td.id = "td" + i;
td.setAttribute("onclick", "javascript:addRow('myTable');")
row.appendChild(td);
}
tbody.appendChild(row);
}
function checkempty() {
checking = document.getElementById(cellId);
if (checking.value == "" || " " || null) {
return false;
} else {
return true;
}
}
</script>
</head>
<body onLoad = "javascript:addRow('myTable')">
<a href="javascript:addRow('myTable')">Add row</a>
<table id="myTable">
<tr>
<td>#</td>
<td>CHECK</td>
<td>DATE</td>
<td>HOUR</td>
<td>MIN</td>
<td>MARKET</td>
<td>MAX</td>
<td>BUY</td>
<td>SELL</td>
<td>PROFIT</td>
<td>FLIP TIME</td>
</tr>
</table>
</body>
</html>
下面是一个使用 jquery 的快速示例（在 ff 11 && chrome 中快速测试）：
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GE Watch</title>
<style type="text/css">
body{
padding:0px;
margin:0px;
font-size:11px;
color:#333;
font-family:Arial;
background:#efefef;
text-align:center;
}
#content{
width:600px;
padding:15px;
margin:20px auto;
background:#fff;
border:solid 1px #ddd;
text-align:left;
}
table{
width:100%;
padding:0;
margin:0;
border:solid 1px #ddd;
border-collapse:collapse;
}
tr{
padding:0;
margin:0
}
td{
width:80px;
height:20px;
padding:4px;
margin:0;
border:solid 1px #ebebeb;
text-align:center
}
table#myTable td input[type="text"]{
padding:2;
margin:0;
display:block;
border:solid 1px #ddd;
}
table#myTable td input[type="text"].incomplete{
border:solid 1px #ff0000;
}
th{
font-size:11px;
border:solid 1px #ddd;
background:#efefef;
text-align:center;
color:#999;
}
#addRow{
padding:3px;
width:80px;
text-align:center;
text-decoration:none;
background:#0000ff;
color:#fff;
margin:10px 0px;
font-weight:bold;
font-size:10px;
display:inline-block;
}
#message{
color:#DB1925;
padding:4px;
font-size:10px;
font-weight:bold;
border:dotted 1px #DB1925;
background:#FFBABA;
display:inline-block;
opacity:0;
}
</style>
</head>
<body>
<div id="content">
<a href="javascript:" id="addRow">Add row</a>
<span id="message">Please complete inputs that are in red</span>
<br style="clear:both"/>
<table id="myTable">
<thead>
<tr>
<th>CHECK</th>
<th>DATE</th>
<th>HOUR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var rowTemplateHTML = '<tr class="dataRow"><td><input type="text" value=""/></td><td><input type="text" value=""/></td><td><input type="text" value=""/></td></tr>';
$(document).ready(function(){
var $tableBody = $('#myTable'),
$addRowButton = $('#addRow'),
$message = $('#message');
$addRowButton.click(function(event){
event.preventDefault();
$('.incomplete').removeClass('incomplete');
addRow();
});
function addRow(){
if(previousRowNotEmpty()){
$message.css("opacity", "0");
$tableBody.append(rowTemplateHTML);
}else{
//alert('please complete previous row');
$message.animate({
"opacity" : "1"
}, 50);
}
}
function previousRowNotEmpty(){
var rowComplete = true;
$tableBody.find('tr.dataRow:last').find('input[type="text"]').each(function(index, input){
var $input = $(input);
if($input.val() === ""){
$input.addClass('incomplete');
rowComplete = false;
}
});
return rowComplete;
}
function addFirstRow(){
$tableBody.append(rowTemplateHTML);
}
addFirstRow();
})
</script>
</body>
</html>
补充保罗所说的话——你有很多问题
一、您遇到的问题
1） 负载 = ....
切勿设置 onload 事件，而是添加到其中。 阅读 https://stackoverflow.com/a/10017532/643500
2） 设置属性与点击
button_element.setAttribute('onclick','doSomething();'); // for FF
button_element.onclick = function() {doSomething();}; // for IE
3）将onclick设置为行而不是每个单元格
对于解决方案：
步骤是：
1）用户点击一行，获取上一行 - 或所有行，不确定你想要什么
if(elem.previousSibling != null){
while (elem.previousSibling.tagName == 'TR') {
...
}
}
2）检查该行中的每个单元格
if(elem.previousSibling != null){
while (elem.previousSibling.tagName == 'TR') {
var cells = elem.previousSibling.childNodes;
for(i = 0 ; i < cells.length; i++){
if(!checkIfEmpty(cells[i])){
canInsertRow = true;
}
}
elem = elem.previousSibling;
}
}
这是一个不完整的 jsfiddle ..我只是用它来弄乱你的代码 - 不是在writeCode模式下编写所有代码，但你应该理解这个概念 http://jsfiddle.net/mHgms/12/
首先，你的checkempty函数需要接受一个参数，比如： checkempty(cellId)
其次，您的addrow函数应为输入元素提供 id 和名称，否则您将无法以足够的方式处理表单。同时为行提供 ID 或数据属性。
第三，如果你让addrow函数这样做，你只需要获取最后一行，从数据属性中提取行 id，并使用它来遍历该行中的所有输入元素。如果至少一个输入元素的值不为 null，则脚本可以添加新行。
相关文章：
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 在GridView中，当单击复选框时，在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- 从 html 表中选择一行(突出显示）并在单击按钮时发送值
- 如何找出单击了哪一行
- 仅单击一行中的一个项目
- 在表格最后一行(链接）中显示菜单，并在单击菜单项时显示模式窗口
- 递归可防止函数在一行中被多次单击
- 单击同一行中的任何复选框时，选中/取消选中表行中的复选框
- 单击按钮时删除一行
- 单击编辑按钮时，如何使用 jquery 从循环表的每一行传递 id
- 单击“单击”jqgrid“多选缺少最后一行
- 我想单击一个按钮，一次只执行已经制作的程序中的一行代码.(JavaScript）
- Javascript 在单击时将输入值更改为单击按钮的同一行上的值
- 通过单击删除同一行中存在的链接来删除特定行
- 如何获取新表行仅当先前输入的一行不为空时才单击
- 单击表中的按钮后从上一行获取文本
- 单击同一行中的按钮后递减值 - 挖空
- 单击行后，从另一行中删除分离的类
- 单击按钮时，验证是否必须使用 Jquery 将至少一行移动到自定义表中
- jqxTreeGrid如果我单击一行中的特定单元格，则禁用对该行的选择/取消选择
