Поиск значения в таблице HTML и изменение его значения TD

При нажатии кнопки после ввода числового значения в поле ввода номера функция javascript должна искать соответствующее значение номера в поле HTML таблицу, а затем измените значения ячейки TD на то, что пользователь вводит в другие 2 поля ввода (цвет и элемент).Поиск значения в таблице HTML и изменение его значения TD

Я поместил некоторое html-кодирование ниже того, что я пытаюсь выполнить. Я приветствую jQuery, если это более простой способ использовать, поскольку я сам не достаточно квалифицированный программист.

<!DOCTYPE html> 
<html> 
<head>   
</head> 
<body> 
Number:* 
<input type="text" id="number"> 
<br> 

Items: 
<input type="text" id="item"> 
<br> 

Color: 
<input type="text" id="color"> 
<br>  
<br> 
<input type="button" onclick="changeit()" value="save"> 
<br> 

<table id="data" style="width: 100%" cellspacing="1" class="style1"> 
    <tr> 
     <td><b>Number*</b></td> 
     <td><b>items</b></td> 
     <td><b>Colors</b></td> 
    </tr> 
    <tbody> 
    <tr> 
     <td>123</td> 
     <td>Boats</td> 
     <td>red</td> 
    </tr> 
    <tr> 
     <td>456</td> 
     <td>Vehicles</td> 
     <td>blue</td> 
    </tr> 
    <tr> 
     <td>789</td> 
     <td>Motorcycles</td> 
     <td>green</td> 
    </tr> 
    </tbody> 
</table>  
</body> 
</html>

источник

2015-08-12 BobbyJones

Вы можете показать, что у вас есть для функции 'changeit()'? – duffn

Pro-совет: вместо того, чтобы делать 'некоторый заголовок', 'просто сделать некоторые заголовок'. Таким образом, браузеры должны автоматически добавлять жирный шрифт, и у вас есть семантическое значение, показывающее, что это заголовок, а не фактические данные. –

Re: Комментарий oxguy3, вы также должны обернуть свой заголовок в '' и ваше тело в ''. Я считаю, что браузеры будут делать это для вас неявно, но лучше быть явным. Это делает более очевидным в источнике то, что структура в конечном итоге будет выглядеть как тоже. – Marc

Эта скрипка делает то, что вы хотите:

http://jsfiddle.net/c84doLdm/

Соответствующий код (используется JQuery) здесь:

function changeit() { 
    var valueToFind = $('#number').val(); 
    $('#data > tbody> tr').each(function(index) { 
     console.log(index); 
     var firstTd = $(this).find('td:first'); 
     if ($(firstTd).text() == valueToFind) { 
      console.log("found: " + index + ":" + valueToFind); 
      $(this).find('td:eq(1)').text($('#item').val()); 
      $(this).find('td:eq(2)').text($('#color').val()); 
     } 
    }) 
}

Вы можете удалить console.log() заявления, а также улучшить эффективность A бит путем кэширования значений DOM, но это суть того, что вы хотите.

источник

2015-08-12 21:31:30 Marc

Вот некоторые JQuery псевдокод, что в целом делает то, что вы хотите сделать:

var number = $("#number").val(); // get the number the user entered 
var numberCell = $("td:contains('" + number + "')"); // get a reference to the <td> tag with the same number as the one the user typed in 
var row = numberCell.parent(); // get a reference to the <tr> tag that `numberCell` is inside of 

var itemCell = row.children()[1]; // get a reference to the item <td> 
itemCell.html($("#item").val()); // put the user's item into the item cell 

var colorCell = row.children()[2]; // get a reference to the color <td> 
colorCell.html($("#color").val()); // put the user's color into the color cell

Я думаю, вы хотите положить, что в функции changeit(). Вам нужно будет добавить проверку ошибок и прочее (что, если пользователь вводит номер, который не существует?), Но это должно выполнить основную работу.

источник

2015-08-12 21:15:42

Скопируйте и вставьте следующий код на свой. Это должно сработать!

<script> 
    var table, 
     number, 
     item, 
     color, 
     save; 

    table = document.getElementById('data'); 

    number = document.getElementById('number'); 
    item = document.getElementById('item'); 
    color = document.getElementById('color'); 
    save = document.getElementById('save'); 

    save.addEventListener('click', function(e){ 
     var rows = table.querySelectorAll('tbody tr'); 
     for(var i = 0; i < rows.length; ++i){ 
      if(parseInt(rows[i].cells[0].innerHTML) == parseInt(number.value)){ 
       rows[i].cells[1].innerHTML = item.value; 
       rows[i].cells[2].innerHTML = color.value; 
      } 
     } 
    }); 

</script>

источник

2015-08-12 21:44:28 Gacci

Поиск значения в таблице HTML и изменение его значения TD

ответ

Смежные вопросы