个人中心
gpt4 book ai didi

javascript - 仅当先前输入的一行不为空时，如何获取新的表格行onClick？

转载 作者：行者123 更新时间：2023-11-30 18:27:45 25 4
gpt4 key购买 nike

如何仅当前面的一行输入不为空时才在onClick上获取新行？

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

关于javascript - 仅当先前输入的一行不为空时，如何获取新的表格行onClick？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10401123/

25 4 0
文章推荐： c# - 相对于中心而不是左上角缩放 WPF Canvas
文章推荐： c - C 中关系运算符的前缀与后缀。运算符结合性如何影响？
文章推荐： C 到 OCaml - for 循环内的 If 条件 OCaml
文章推荐： javascript - 智能化我的 jquery 选项卡式浏览
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com