1

仅当一行先前的输入不为空时，如何在单击时获取新行？

* “一行先前的输入” - 我有 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>
4

3 回答 3

1

补充一下保罗所说的——你有很多问题

一、你遇到的问题

1) 加载 = ....

永远不要设置 onload 事件，而是添加到它。阅读https://stackoverflow.com/a/10017532/643500

2) setAttribute 与点击

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/

于 2012-05-01T18:29:57.203 回答
1

这是一个使用 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>
于 2012-05-01T20:23:44.903 回答
0

首先，您的checkempty函数需要接受一个参数，例如：checkempty(cellId)

其次，您的addrow函数应该为输入元素提供 ID 和名称，否则您将无法以足够的方式处理表单。还要为行提供 id 或数据属性。

第三，如果你有你的addrow函数来做到这一点，你只需要获取最后一行，从数据属性中提取行 id 并使用它来遍历该行中的所有输入元素。如果至少一个输入元素的值不为空，您的脚本可以添加一个新行。

于 2012-05-01T17:46:40.037 回答