1

前の入力の1行が空でない場合にのみonClickで新しい行を取得する方法は?

* 「前の入力の 1 行」 - 空白の入力が 1 行あり、クリックするとすぐに次の行が作成されますが、その 1 行目は空になるか、部分的にいっぱいになります。新しい行を作成します。

次のコードは、私がこれまでに持っている もの です
。

<!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

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 に答える
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 に答える
0

まず、checkempty関数は次のようなパラメータを受け入れる必要があります。checkempty(cellId)

次に、addrow関数は入力要素にIDと名前を指定する必要があります。そうしないと、フォームを十分な方法で処理できなくなります。また、行にIDまたはデータ属性を指定します。

第3に、addrow関数でそれを実行する場合は、最後の行を取得し、データ属性から行IDを抽出し、それを使用してその行内のすべての入力要素を調べるだけです。少なくとも1つの入力要素の値がnullでない場合、スクリプトは新しい行を追加できます。

于 2012-05-01T17:46:40.037 に答える