Javascript 如果前面有span，则无法从TD提取数据_Javascript_Dom_Html Table

Javascript 如果前面有span，则无法从TD提取数据

javascript dom

Javascript 如果前面有span，则无法从TD提取数据,javascript,dom,html-table,Javascript,Dom,Html Table,我需要你的帮助由于IE7选择忽略TD:whitespace:nowrap的方式，我被迫在我的TD前面放置和使用跨距，所以这里是delema。当我单击td之间没有跨距的表行时，编码能够提取数据并突出显示该行但是，当我在我的td之间引入一个跨度，并单击以选择表行中具有跨度的单个单元格时，我得到以下错误：cells.0为null或不是对象。我知道，如果我单击表格单元格一侧的一点，它就会工作，但我还需要能够单击和区域，并让代码工作既然我正在制作一个表，其中所有的都在所有的之间，那么如何重新格式化现

我需要你的帮助

由于IE7选择忽略TD:whitespace:nowrap的方式，我被迫在我的TD前面放置和使用跨距，所以这里是delema。当我单击td之间没有跨距的表行时，编码能够提取数据并突出显示该行

但是，当我在我的td之间引入一个跨度，并单击以选择表行中具有跨度的单个单元格时，我得到以下错误：cells.0为null或不是对象。我知道，如果我单击表格单元格一侧的一点，它就会工作，但我还需要能够单击和区域，并让代码工作

既然我正在制作一个表，其中所有的都在所有的之间，那么如何重新格式化现有的编码以适应不同数据之间的差异呢

请不要用jQuery

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
    color: #235A81;
    background-color: white;
}
#data tr.highlighted td {
    color: #FFFFFF;
    background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {

var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh

tbody.onclick = function (e) {
  e = e || window.event;
  var td = e.target || e.srcElement
  var row = td.parentNode;
  if (ishigh&&ishigh!=row){
    ishigh.className='';
  }
  row.className = row.className==="highlighted" ? "" : "highlighted";
  ishigh=row;
  getdata(row)
}

document.onkeydown = function(e){
    e = e || event;
    var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
    if(code === 38){ //up arraow
        newhigh = rowindex(ishigh) - 2;
        if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
        return GoTo('data', newhigh);
    } else if (code === 40){ //down arrow
        newhigh = rowindex(ishigh);
        if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
        return GoTo('data', newhigh);
    }
}

function GoTo(id,nu){
  var obj=document.getElementById(id),
      trs=obj.getElementsByTagName('TR');
  nu = nu + 1;
  if (trs[nu]){
    if (ishigh&&ishigh!=trs[nu]){
      ishigh.className='';
    }
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
    ishigh=trs[nu];
   }
   getdata(trs[nu]);
}

function rowindex(row){
    var rows = table.rows, i = rows.length;
    while(--i > -1){
        if(rows[i] === row){return i;}
    }
}

function getdata(row) {
    document.getElementById('firstname').value = row.cells[0].innerHTML;
    document.getElementById('lastname').value = row.cells[1].innerHTML;
    document.getElementById('age').value = row.cells[2].innerHTML;
    document.getElementById('total').value = row.cells[3].innerHTML;
    document.getElementById('discount').value = row.cells[4].innerHTML;
    document.getElementById('diff').value = row.cells[5].innerHTML;     
    find_option('fname',row.cells[0].innerHTML)
}

}//end of nested function

function find_option(id,value) {
    var sel = document.getElementById(id)
    for (var i = 0; i < sel.length; i++){
        //alert(sel.options[i].text+" "+sel.options[i].value)
        if (sel.options[i].value == value) { 
            sel.selectedIndex = i; 
            return
        }
    }
}
</script>


</head>
<body>
  <table id="data" cellspacing="1" border="1">
    <thead>
        <tr>
            <th>first name</th>
            <th>last name</th>
            <th>age</th>
            <th>total</th>
            <th>discount</th>
            <th>diff</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>peter</span></td>
            <td><span>parker</span></td>
            <td><span>28</span></td>
            <td><span>9.99</span></td>
            <td><span>20.3%</span></td>
            <td><span>+3</span></td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>19.99</td>
            <td>25.1%</td>
            <td>-7</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>15.89</td>
            <td>44.2%</td>
            <td>-15</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>153.19</td>
            <td>44%</td>
            <td>+19</td>
        </tr>
        <tr>
            <td>benjamin</td>
            <td>evans</td>
            <td>56</td>
            <td>153.19</td>
            <td>23%</td>
            <td>+9</td>
        </tr>
    </tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />

<br>
<input type="button" value="testme" onclick="test()">
<br><br>
<select id="fname">
    <option value="bruce">bruce</option>
    <option value="clark">clark</option>
    <option value="benjamin">benjamin</option>
</select>

</body>


</html>

您可以查看elemet的标记名并确定用户是否单击了TD或跨度，然后调整并选择元素的父元素TD（如果有跨度）

var td = e.target || e.srcElement
alert(td.tagName)

或者，您可以将CSS类名添加到所有跨度中，然后检查所选元素是否具有该类名。如果有，这是一个跨度，如果没有，这是一个TD

我还建议使用DIV，而不是SPAN。

更改此行：

var row = td.parentNode;

致：

还是同样的问题，如果我将跨度更改为div。我不够聪明，不能同时抓住这两个。我以前也在这里得到过关于这段代码的帮助。

var row = (td.tagName == "DIV") ? td.parentNode.parentNode : td.parentNode;